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

翻譯:瘋狂的技術宅css

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

許多前端開發人員都在用 Normalize 爲他們的網站設計樣式。一些人喜歡在 Normalize.css 中添加一些本身偏好的樣式,我也同樣。前端

在本文中,我會與你分享我本身的 CSS reset 項目(除了 Normalize.css 以外我還使用它們)。git

我將 reset 項分爲8類:github

  1. 盒子大小web

  2. 刪除邊距和填充瀏覽器

  3. 列表ide

  4. 表格和按鈕網站

  5. 圖像和嵌入視頻ui

  6. 表格

  7. 隱藏屬性

  8. Noscript

調整盒子大小

box-sizing 屬性改變了 CSS 盒子模型的工做方式。它會改變計算 widthheightpaddingbordermargin 的方式。

box-sizing 的默認設置是 content-box。我更喜歡將其改成 border-box,由於這樣更容易設置 paddingwidth.。

有關 Box Sizing 的更多信息,你可能對「瞭解Box大小」感興趣。

html {
  box-sizing: border-box;
}
*,
*::before,
*::after {
  box-sizing: inherit;
}
複製代碼

刪除邊距和填充

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

/* 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.75em1em ,由於這看起來更符合我經驗中的合理默認值。
  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;
}
複製代碼

媒體元素包括 imgvideoobjectiframeembed。我傾向於讓這些元素符合其容器的寬度。

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-…

歡迎關注京程一燈公衆號:京程一燈,獲取更多前端乾貨。

相關文章
相關標籤/搜索