翻譯:瘋狂的技術宅css
許多前端開發人員都在用 Normalize 爲他們的網站設計樣式。一些人喜歡在 Normalize.css 中添加一些本身偏好的樣式,我也同樣。前端
在本文中,我會與你分享我本身的 CSS reset 項目(除了 Normalize.css 以外我還使用它們)。git
我將 reset 項分爲8類:github
盒子大小web
刪除邊距和填充瀏覽器
列表ide
表格和按鈕網站
圖像和嵌入視頻ui
表格
隱藏屬性
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;
}
複製代碼
我對按鈕作了一些調整:
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 倉庫(github.com/zellwk/css-…