如何用自己喜歡的 CSS 風(fēng)格重置網(wǎng)站的樣式

shaonbean 發(fā)布于2019-08-30 15:43 / 1942人閱讀

摘要：翻譯瘋狂的技術(shù)宅原文許多前端開發(fā)人員都在用為他們的網(wǎng)站設(shè)計(jì)樣式。一些人喜歡在中添加一些自己偏好的樣式，我也一樣。我認(rèn)為這是令人難以置信和奇怪的。不同的瀏覽器為表單元素和按鈕設(shè)置了不同的邊框樣式。這種風(fēng)格的問題是它的特異性低。

翻譯：瘋狂的技術(shù)宅
原文：https://medium.freecodecamp.o...

許多前端開發(fā)人員都在用 Normalize 為他們的網(wǎng)站設(shè)計(jì)樣式。一些人喜歡在 Normalize.css 中添加一些自己偏好的樣式，我也一樣。

在本文中，我會與你分享我自己的 CSS reset 項(xiàng)目（除了 Normalize.css 之外我還使用它們）。

我將 reset 項(xiàng)分為8類：

盒子大小

刪除邊距和填充

列表

表格和按鈕

圖像和嵌入視頻

表格

隱藏屬性

Noscript

調(diào)整盒子大小

box-sizing 屬性改變了 CSS 盒子模型的工作方式。它會改變計(jì)算 width、 height、 padding、 border 和 margin 的方式。

box-sizing 的默認(rèn)設(shè)置是 content-box。我更喜歡將其改為 border-box，因?yàn)檫@樣更容易設(shè)置 padding 和 width.。

有關(guān) Box Sizing 的更多信息，你可能對“了解Box大小”感興趣。

html {
  box-sizing: border-box;
}
*,
*::before,
*::after {
  box-sizing: inherit;
}

刪除邊距和填充

瀏覽器對不同元素 margin 和 padding 的設(shè)置各不相同。當(dāng)我不了解這些時，默認(rèn)設(shè)置會讓我失望。但是我更喜歡通過自己編碼設(shè)置所有邊距和填充。

/* Reset margins and paddings on most elements */
body,
h1,
h2,
h3,
h4,
h5,
h6,
ul,
ol,
li,
p,
pre,
blockquote,
figure,
hr {
  margin: 0;
  padding: 0;
}

列表

我在很多情況下都使用無序列表，而且很多情況下都不需要 disc 樣式。在這里我將 list-style 設(shè)置為 none 。當(dāng)我需要 disc 樣式時，會在特定的

/* Removes discs from ul */
ul {
  list-style: none;
}

表單和按鈕

瀏覽器不會繼承表單和按鈕的排版。他們將 font 設(shè)置為 400 11px system-ui。我認(rèn)為這是令人難以置信和奇怪的。所以我總是要手動讓它們從祖先元素繼承樣式。

input,
textarea,
select,
button {
  color: inherit; 
  font: inherit; 
  letter-spacing: inherit; 
}

不同的瀏覽器為表單元素和按鈕設(shè)置了不同的邊框樣式。我很不喜歡這些默認(rèn)樣式，寧愿將它們設(shè)置為 1px solid gray。

input,
textarea,
button {
  border: 1px solid gray; 
}

我對按鈕做了一些調(diào)整：

將按鈕的 padding 設(shè)置為 0.75em 和 1em ，因?yàn)檫@看起來更符合我經(jīng)驗(yàn)中的合理默認(rèn)值。

刪除了應(yīng)用于按鈕的默認(rèn) border-radius 。

強(qiáng)制背景顏色是透明的

button {
  border-radius: 0; 
  padding: 0.75em 1em;
  background-color: transparent;
}

最后，我將 pointer-events: none 設(shè)置為按鈕內(nèi)的元素。這主要用于 JavaScript 交互。

（當(dāng)用戶點(diǎn)擊按鈕中的某些內(nèi)容時，他們點(diǎn)擊的內(nèi)容是 event.target ，而不是按鈕。如果按鈕內(nèi)有 HTML 元素，這種風(fēng)格可以更輕松地處理 click 事件）。

button * {
  pointer-events: none;
}

媒體元素包括 img、 video、 object、 iframe 和 embed。我傾向于讓這些元素符合其容器的寬度。

I also set these elements to display: block because inline-block creates unwanted whitespace at the bottom of the element.
我還將這些元素設(shè)置為 display: block ，因?yàn)?inline-block 在元素的底部創(chuàng)建了不需要的空格。

embed,
iframe,
img,
object,
video {
  display: block;
  max-width: 100%;
}

表格

我很少使用表格，但有時它們可??能很有用。這是我的默認(rèn)樣式：

table {
  table-layout: fixed;
  width: 100%;
}

當(dāng)元素具有 hidden 屬性時，應(yīng)該從視圖中隱藏它們。 Normalize.css 已經(jīng)為我們做了這件事。

[hidden] {
  display: none;
}

這種風(fēng)格的問題是它的特異性低。

我經(jīng)常將 hidden 添加到用類設(shè)置的其他元素中。類的特異性高于屬性，并且 display: none 屬性不起作用。

這就是為什么我選擇用 !important 提高[hidden]的特異性。

[hidden] {
  display: none !important;
}

Noscript

如果一個組件需要 JavaScript 才能工作，我會添加一個

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

如何用自己喜歡的 CSS 風(fēng)格重置網(wǎng)站的樣式

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

如何用自己喜歡的 CSS 風(fēng)格重置網(wǎng)站的樣式

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！