翻譯:瘋狂的技術宅
原文: https://medium.freecodecamp.o...
許多前端開發人員都在用 Normalize 爲他們的網站設計樣式。一些人喜歡在 Normalize.css 中添加一些本身偏好的樣式,我也同樣。css
在本文中,我會與你分享我本身的 CSS reset 項目(除了 Normalize.css 以外我還使用它們)。html
我將 reset 項分爲8類:前端
box-sizing
屬性改變了 CSS 盒子模型的工做方式。它會改變計算 width
、 height
、 padding
、 border
和 margin
的方式。git
box-sizing
的默認設置是 content-box
。我更喜歡將其改成 border-box
,由於這樣更容易設置 padding
和 width
.。程序員
有關 Box Sizing 的更多信息,你可能對「瞭解Box大小」感興趣。github
html { box-sizing: border-box; } *, *::before, *::after { box-sizing: inherit; }
瀏覽器對不一樣元素 margin
和 padding
的設置各不相同。當我不瞭解這些時,默認設置會讓我失望。可是我更喜歡經過本身編碼設置全部邊距和填充。web
/* 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
。我認爲這是使人難以置信和奇怪的。因此我老是要手動讓它們從祖先元素繼承樣式。segmentfault
input, textarea, select, button { color: inherit; font: inherit; letter-spacing: inherit; }
不一樣的瀏覽器爲表單元素和按鈕設置了不一樣的邊框樣式。我很不喜歡這些默認樣式,寧願將它們設置爲 1px solid gray
。瀏覽器
input, textarea, button { border: 1px solid gray; }
我對按鈕作了一些調整:
padding
設置爲 0.75em
和 1em
,由於這看起來更符合我經驗中的合理默認值。border-radius
。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; }
若是一個組件須要 JavaScript 才能工做,我會添加一個 <noscript>
標籤讓用戶知道(若是他們已經禁用了JavaScript)。
這樣爲 <noscript>
標記建立默認樣式:
/* noscript styles */ noscript { display: block; margin-bottom: 1em; margin-top: 1em; }
不少人對我提到的這些樣式風格感興趣。這個連接是我在 Github 的 CSS Resets 倉庫(https://github.com/zellwk/css...)。