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

疯狂的技术宅發表於2019-03-27
CSS網站

翻譯：瘋狂的技術宅

原文：medium.freecodecamp.org/how-i-style…

許多前端開發人員都在用 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 倉庫（github.com/zellwk/css-…

歡迎關注京程一燈公眾號：京程一燈，獲取更多前端乾貨。

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

相關文章