如何用自己喜歡的 CSS 風格重置網站的樣式

許多前端開發人員都在用 Normalize 為他們的網站設計樣式。一些人喜歡在 Normalize.css 中添加一些自己偏好的樣式，我也一樣。

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

我將 reset 項分為8類：

1. 盒子大小
2. 刪除邊距和填充
3. 列表
4. 表格和按鈕
5. 媒體元素
6. 表格
7. 隱藏屬性
8. Noscript

調整盒子大小

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

box-sizing 的默認設置是 content-box。我更喜歡將其改為 border-box，因為這樣更容易設置 padding 和 width。

有關 Box Sizing 的更多信息，你可能對“瞭解Box大小”(https://zellwk.com/blog/understanding-css-box-sizing/)感興趣。

1html {
2 box-sizing: border-box;
3}
4*,
5*::before,
6*::after {
7 box-sizing: inherit;
8}

刪除邊距和填充

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

 1/* Reset margins and paddings on most elements */
 2body,
 3h1,
 4h2,
 5h3,
 6h4,
 7h5,
 8h6,
 9ul,
10ol,
11li,
12p,
13pre,
14blockquote,
15figure,
16hr {
17 margin: 0;
18 padding: 0;
19}

列表

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

上手動設置它。

1/* Removes discs from ul */
2ul {
3 list-style: none;
4}

表單和按鈕

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

1input,
2textarea,
3select,
4button {
5 color: inherit; 
6 font: inherit; 
7 letter-spacing: inherit; 
8}

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

1input,
2textarea,
3button {
4 border: 1px solid gray;  

5}

我對按鈕做了一些調整：

1. 將按鈕的 padding 設置為 0.75em 和 1em ，因為這看起來更符合我經驗中的合理默認值。
2. 刪除了應用於按鈕的默認 border-radius 。
3. 強制背景顏色是透明的

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

最後，我將 pointer-events: none 設置為按鈕內的元素。這主要用於 JavaScript 交互。

（當用戶點擊按鈕中的某些內容時，他們點擊的內容是 event.target ，而不是按鈕。如果按鈕內有 HTML 元素，這種風格可以更輕鬆地處理 click 事件）。

1button * {
2 pointer-events: none;
3}

媒體元素

媒體元素包括 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.

我還將這些元素設置為 display: block ，因為 inline-block 在元素的底部創建了不需要的空格。

1embed,
2iframe,
3img,
4object,
5video {
6 display: block;
7 max-width: 100%;
8}

表格

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

1table {
2 table-layout: fixed;
3 width: 100%;
4}

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

1[hidden] {
2 display: none;
3}

這種風格的問題是它的特異性低。

我經常將 hidden 添加到用類設置的其他元素中。類的特異性高於屬性，並且 display: none屬性不起作用。

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

1[hidden] {
2 display: none !important;
3}

Noscript

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

這樣為

1/* noscript styles */
2noscript {
3 display: block;
4 margin-bottom: 1em;
5 margin-top: 1em;
6}

總結

很多人對我提到的這些樣式風格感興趣。這個鏈接是我在 Github 的 CSS Resets 倉庫（https://github.com/zellwk/css-reset）。

閱讀更多 前端技術教學分享 的文章

關鍵字: CSS 屬性 設計