如何用本身喜歡的 CSS 風格重置網站的樣式

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

許多前端開發人員都在用 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大小」感興趣。

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

刪除邊距和填充

瀏覽器對不一樣元素 margin 和 padding 的設置各不相同。當我不瞭解這些時，默認設置會讓我失望。可是我更喜歡經過本身編碼設置全部邊距和填充。

/* 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 設置爲 none 。當我須要 disc 樣式時，會在特定的 <ul>上手動設置它。

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

表單和按鈕

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

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

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

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

我對按鈕作了一些調整：

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

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

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

（當用戶點擊按鈕中的某些內容時，他們點擊的內容是 event.target ，而不是按鈕。若是按鈕內有 HTML 元素，這種風格能夠更輕鬆地處理 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.
我還將這些元素設置爲 display: block ，由於 inline-block 在元素的底部建立了不須要的空格。

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

表格

我不多使用表格，但有時它們可​​能頗有用。這是個人默認樣式：

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

當元素具備 hidden 屬性時，應該從視圖中隱藏它們。 Normalize.css 已經爲咱們作了這件事。

[hidden] {
  display: none;
}

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

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

這就是爲何我選擇用 !important 提升[hidden]的特異性。

[hidden] {
  display: none !important;
}

Noscript

若是一個組件須要 JavaScript 才能工做，我會添加一個 <noscript> 標籤讓用戶知道（若是他們已經禁用了JavaScript）。

這樣爲 <noscript> 標記建立默認樣式：

/* noscript styles */
noscript {
  display: block;
  margin-bottom: 1em;
  margin-top: 1em;
}

總結

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

本文首發微信公衆號：jingchengyideng

歡迎掃描二維碼關注公衆號，天天都給你推送新鮮的前端技術文章

---

---

歡迎繼續閱讀本專欄其它高贊文章：

• 12個使人驚歎的CSS實驗項目
• 世界頂級公司的前端面試都問些什麼
• CSS Flexbox 可視化手冊
• 過節很無聊？仍是用 JavaScript 寫一個腦力小遊戲吧！
• 從設計者的角度看 React
• CSS粘性定位是怎樣工做的
• 一步步教你用HTML5 SVG實現動畫效果
• 程序員30歲前月薪達不到30K，該何去何從
• 7個開放式的前端面試題
• React 教程：快速上手指南