`在這篇文章中颤专，我想跟你分享 20 條由CSS
社區(qū)推薦的約定和最佳實(shí)踐孽锥。 有些建議可能比較適合新手概行，而有些則更高級一些，但我希望每個(gè)人都可以在本篇文章中收獲自己不知道的知識儒鹿。
1. 謹(jǐn)慎使用外邊距屬性
與其它的屬性不同化撕，垂直方向上的外邊距相遇時(shí)將會發(fā)生折疊。這意味著如果一個(gè)元素的下邊距遇到了另一個(gè)元素的上邊距约炎，那么二者中較大的一個(gè)將被留下侯谁。下面是一個(gè)簡單的例子。
<div class="square red"></div>
<div class="square blue"></div>
.square {
width: 80px;
height: 80px;
}
.red {
background-color: #F44336;
margin-bottom: 40px;
}
.blue {
background-color: #2196F3;
margin-top: 30px;
}
其實(shí)上述兩個(gè)元素在垂直方向上的距離并不是 70px， 而是 40px墙贱， 藍(lán)色正方形的margin沒有被計(jì)算在內(nèi)热芹。 有很多的方法消除這種默認(rèn)的行為，但最好的方法是只使用一個(gè)方向上的margin屬性惨撇，比如說margin-bottom伊脓。
2. 利用盒子模型布局
盒子模型自然有其存在的理由。float和inline-block當(dāng)然也可以工作魁衙，但它們都是樣式化文檔的基礎(chǔ)工具报腔，而不是整個(gè)網(wǎng)站。從某種意義來說剖淀，Flexbox是為更容易更精確創(chuàng)建我們想要的布局而設(shè)計(jì)的纯蛾。
Flexbox模型提供的一系列屬性給了開發(fā)者更大的靈活性，而且你一旦熟悉了它們纵隔，那創(chuàng)建任何響應(yīng)式布局都是輕而易舉的事翻诉。瀏覽器對Flexbox的支持也已經(jīng)接近完美，所以已經(jīng)沒有什么理由能夠阻止你使用Flexbox了捌刮。
.container {
display: flex;
/* Don't forget to add prefixes for Safari */
display: -webkit-flex;
}
3. 執(zhí)行 CSS 重置
盡管這些年來情形已經(jīng)有所好轉(zhuǎn)碰煌，但是各瀏覽器的默認(rèn)行為還是存在很多分歧。解決這個(gè)問題最好的辦法就是使用一個(gè)CSS重置文件為所有元素重新設(shè)置默認(rèn)樣式绅作。這可以讓你在一個(gè)純凈的樣式環(huán)境下工作芦圾，并且在所有瀏覽器中產(chǎn)生相同的結(jié)果。
有很多的庫做這個(gè)工作做的非常不錯(cuò)俄认，比如 normalize.css, minireset, 和 ress个少， 糾正了瀏覽器間的不一致。如果你不想使用庫眯杏，你也可以自己制作一個(gè)簡單的CSS重置稍算，像下面這樣。
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
這可能看上去比較苛刻役拴，但是消除了默認(rèn)的margin和padding我們將更容易的擺放我們的元素糊探，而不用擔(dān)心它會占用額外的空間。`box-sizing: border-box是一個(gè)很受用的屬性河闰，我們將在下面介紹這個(gè)屬性科平。
4. 為所有元素使用 Border-box
許多初學(xué)者不知道box-sizing屬性，但它的確很重要姜性。了解它的最好辦法就是看看它的兩個(gè)可選值瞪慧。
content-box(default) - 當(dāng)我們?yōu)樵卦O(shè)置了寬度和高度，但那只是內(nèi)容的尺寸部念。所有的padding和border都在不包含在內(nèi)容當(dāng)中弃酌，也就是在內(nèi)容的外部氨菇。舉例來說，如果我們有一個(gè)div它的寬度為 100px妓湘，padding為 10px, 那么它的實(shí)際寬度為 120px查蓉。border-box-padding和border被包含在 寬度和高度當(dāng)中。 如果一個(gè)div的寬度為100px榜贴，而被設(shè)置了box-sizing:border-box豌研， 那么它的寬度將始終是100px， 無論你添加多少padding和border唬党。
為所有元素設(shè)置border-box將有利于樣式化鹃共，而且你在也不用做乏味的數(shù)學(xué)運(yùn)算了。
5. 圖像作為背景
當(dāng)你為自己的站點(diǎn)添加圖片時(shí)驶拱，尤其是你想做響應(yīng)式設(shè)計(jì)的時(shí)候霜浴，利用一個(gè)div
標(biāo)簽并為其設(shè)置background屬性，而不是使用<img>元素蓝纲。
似乎額外的工作并沒有起到任何作用阴孟，但實(shí)際上這更利于你對圖片設(shè)置樣式，保持它們原有的尺寸或者根據(jù)比例變化驻龟，這需要借助background-size温眉，background-size還有一些其它的屬性缸匪。
<section>
<p>Img element</p>
<img src="" alt="bicycle">
</section>
<section>
<p>Div with background image</p>
<div></div>
</section>
img {
width: 300px;
height: 200px;
}
div {
width: 300px;
height: 200px;
background: url('');
background-position: center center;
background-size: cover;
}
section{
float: left;
margin: 15px;
}
這種技術(shù)的一個(gè)缺點(diǎn)是你頁面的可訪問性可能略有打擊翁狐，因?yàn)槟愕膱D片不會被屏幕閱讀器和引擎正確抓取。 這個(gè)問題可以被 object-fit 解決凌蔬，但它還不被所有瀏覽器支持露懒。
6. 更好的 Table 邊框
HTML中的table沒什么意思。它們非常古怪砂心，難以設(shè)計(jì)成響應(yīng)式的流码，而且很難與整體風(fēng)格一致冤留。比如說，你想為table和其中的元素添加上邊框，你可能會得到下面的結(jié)果审编。
正如你所見到的，它有很多重復(fù)的邊框而且看起來不是很好乍惊，有一個(gè)非衬璧ⅲ快速且簡單的去除雙邊框的方法，就是將
border-collapse: collapse添加到table.
這樣看起來就好多了外永。
7. 更好的注釋方式
CSS可能不是一門編程語言但它的代碼仍然需要被記錄崎脉，所以一些簡單的注釋將會對你的同事或者未來的自己很有幫助！
對于CSS中的一些比較大的模塊伯顶，比如主要模塊或者媒體查詢囚灼，使用風(fēng)格化的注釋并且在其后留下一些空行骆膝。
/*---------------
#Header
---------------*/
header { }
header nav { }
/*---------------
#Slideshow
---------------*/
.slideshow { }
設(shè)計(jì)中的一些細(xì)節(jié)或那些不是特別重要的模塊，可以用單行注釋灶体。
/* Footer Buttons */
.footer button { }
.footer button:hover { }
另外阅签，值得注意的是，CSS中沒有//注釋赃春，所以當(dāng)你需要注釋的時(shí)候你需要使用/* */符號愉择。
/* Do */
p {
padding: 15px;
/*border: 1px solid #222;*/
}
/* Don't */
p {
padding: 15px;
// border: 1px solid #222;
}
8. 命名連接
當(dāng)class或者id不止一個(gè)單詞的時(shí)候，需要使用-符號連接织中，CSS對大小寫不敏感锥涕，所以駱駝命名法不是一個(gè)好的選擇。很久以前狭吼，下劃線不被支持所以破折號成為了默認(rèn)約定层坠。
/* Do */
.footer-column-left { }
/* Don't */
.footerColumnLeft { }
.footer_column_left { }
9. 不要重復(fù)設(shè)置
CSS的許多屬性值都是從DOM樹中的上一級繼承下來的，因此命名為層疊樣式表刁笙。讓我們以font為例 - 它幾乎總是繼承自父節(jié)點(diǎn)破花，你不需要為頁面中的每一個(gè)元素設(shè)置該屬性。
你只需要為<html>或者<body>設(shè)置font樣式疲吸，然后讓它一級一級流傳下去就可以了座每。 下面是一個(gè)很好的例
子。
html {
font: normal 16px/1.4 sans-serif;
}
當(dāng)然摘悴，在任何一個(gè)子元素中你都可以按照自己的需求改變這一樣式峭梳。我要說的就是能使用繼承獲得的屬性就不要再去一一指定了。
10. CSS 動畫與變換
不要通過直接更改元素的寬度和高度去動畫元素蹂喻，或者是更改left/right/top/bottom葱椭。最好的辦法是使用transform()屬性因?yàn)樗峁┝烁訄A滑的過渡效果而且可以讓你的意圖在閱讀代碼時(shí)更加易于理解。下面是一個(gè)例子口四，我們想動畫一個(gè)ball孵运，讓它往右滑動。 不要去改變left的值蔓彩，最好是使用translateX()治笨。
.ball {
left: 50px;
transition: 0.4s ease-out;
}
/* Not Cool*/
.ball.slide-out {
left: 500px;
}
/* Cool*/
.ball.slide-out {
transform: translateX(450px);
}
transform以及它的所有方法（translate, rotate, scale等）擁有幾乎一致的瀏覽器兼容性，你可以自由使用它們赤嚼。
11. 不要 DIY, 使用庫
CSS社區(qū)非常的龐大而且不斷出現(xiàn)新的庫旷赖。 庫被提供于各種用途，從小片段到完善的框架探膊，用于構(gòu)建響應(yīng)式程序杠愧，而且它們當(dāng)中大部分都是開源的。
所以下次當(dāng)你碰到CSS問題的時(shí)候逞壁，在你想自己動手去解決問題的時(shí)候流济，最好先去Github或者CodePen找找是否已經(jīng)存在可用的解決方案锐锣。
12. 保持選擇器的特指度低
不是所有CSS選擇器都是生而相等的，當(dāng)新手開發(fā)者書寫CSS代碼的時(shí)候通常期望它們寫的選擇器能夠覆蓋之前所有已存在的樣式绳瘟。 但是事情并不總像我們想的那樣雕憔，就像下面這個(gè)例子：
a{
color: #fff;
padding: 15px;
}
a#blue-btn {
background-color: blue;
}
a.active {
background-color: red;
}
我們想為所有按鈕添加.active類使其變?yōu)榧t色，但這是不起作用的糖声，因?yàn)榘粹o已經(jīng)被一個(gè)id選擇器設(shè)置了background-color斤彼，而id選擇器具有更高的特指度。它們之間的規(guī)則就像下面這樣：
ID (#id) > Class (.class) > Type (比如header)蘸泻。
特指度是可以堆疊的琉苇，所以a#button.active的特指度是高于a#button的。 使用特指度高的選擇器將使你不斷的使用更高的去覆蓋那些原本存在的選擇器悦施，這將最終導(dǎo)致!important
效果并扇。
13. 不要使用 !important
很認(rèn)真的告訴你，不要使用!important抡诞。 即時(shí)的一個(gè)快速修復(fù)在將來可能導(dǎo)致大量的重寫穷蛹。相反，找出你CSS選擇器不工作的原因昼汗，并且嘗試去修復(fù)它肴熏。
只有在一種情景中使用!important是可以接受的，那就是你想覆蓋那些在HTML中定義的行內(nèi)樣式顷窒。而且書寫行內(nèi)樣式也是一種非常糟糕的方式蛙吏，建議停止使用。
14. 使用 text-transform
在HTML中蹋肮，當(dāng)你使用大寫字母的時(shí)候可能是出于某種語義目的出刷，比如說你想強(qiáng)調(diào)一個(gè)單詞的重要性璧疗。
<h3>Employees MUST wear a helmet!</h3>
如果出于某種目的你將一組文本都設(shè)置成大寫坯辩，可以在HTML中正常書寫文本，然后利用CSS轉(zhuǎn)換其大小寫崩侠。 它們看起來都是一樣的漆魔，但是如果不在上下文中，你的內(nèi)容將更有意義却音。
<div class="movie-poster">Star Wars: The Force Awakens</div>
.movie-poster { text-transform: uppercase;}
這同樣適用于大寫或者小寫的字符串 -text-transform屬性可以將它們處理的很好改抡。
15. Em， Rem 和 Pixel
人們在對元素和文本設(shè)置尺寸應(yīng)該用em系瓢，rem還是px有很多的爭論阿纤。事實(shí)是，這三者都是可行的夷陋，有自己的優(yōu)點(diǎn)和缺點(diǎn)欠拾。
所有的開發(fā)者和項(xiàng)目都是不同的胰锌，所以不應(yīng)該有什么嚴(yán)格的規(guī)則說明什么時(shí)候該用哪一種。下面是一些提示和良好的做法：
em-1em的大小與直接父元素的字體大小有關(guān)藐窄。 通常用于媒體查詢资昧，em對響應(yīng)式設(shè)計(jì)而言是非常棒的 ，但是將每個(gè)元素的em值轉(zhuǎn)換為p的比例是非常難以計(jì)算的荆忍，因?yàn)槟憧赡芤?code>DOM樹上逐級跟蹤元素格带。rem- 以<html>元素中的font-size為基準(zhǔn)，rem將比例化頁面中的標(biāo)題和段落變得很容易刹枉。保持<html>中默認(rèn)的font-size并且為其它的元素設(shè)置rem是一種非常棒的方法叽唱。px- 像素是最精確的控制方式，但是在 響應(yīng)式設(shè)計(jì)中它并不友好微宝，因?yàn)樗粫S屏幕大小變化而自動縮放尔觉。它們是可靠的，易于理解的芥吟，并且在值和實(shí)際結(jié)果之間呈現(xiàn)出良好的視覺聯(lián)系侦铜。
下面我要說的是，不要害怕嘗試钟鸵。去使用它們并且找出哪一種是你最喜歡的钉稍。 有時(shí)候em和rem很省事，尤其對于響應(yīng)式界面棺耍。
16. 在大項(xiàng)目中使用預(yù)處理器
你可能已經(jīng)聽說過它們了 - Sass, Less, PostCSS, Stylus 贡未。預(yù)處理器是CSS發(fā)展的下一階段。 它們提供的功能諸如變量蒙袍，CSS函數(shù)俊卤，選擇器嵌套以及其它一些非常酷的東西害幅。這使得CSS代碼非常易于管理消恍，尤其在大項(xiàng)目中。
舉個(gè)簡單的例子以现，下面是使用了CSS變量和函數(shù)的Sass代碼片段狠怨。
$accent-color: #2196F3;
a { padding: 10px 15px; background-color: $accent-color; }
a:hover { background-color: darken($accent-color,10%); }
使用CSS預(yù)處理器的唯一缺點(diǎn)是，它們需要編譯成真正的CSS代碼邑遏，但是如果你已經(jīng)決定在你的項(xiàng)目中使用一個(gè)構(gòu)建腳本佣赖，那么這就不再是你應(yīng)該煩惱的問題了。
如果你想了解更多關(guān)于預(yù)處理器的知識记盒，請查看目前最受歡迎的兩個(gè)系統(tǒng)的教程 - Sass 和 Less.
17. Autoprefixers
為各個(gè)瀏覽器添加前綴算得上是書寫CSS代碼最惱人的問題了憎蛤。它們不一致，你永遠(yuǎn)無法精確的你需要哪一個(gè)纪吮，而且如果你真的去一個(gè)個(gè)適配并將它們都放到樣式表中俩檬，你會發(fā)現(xiàn)這是一場噩夢栏豺。
感謝上天，有很多工具可以自動的幫你實(shí)現(xiàn)這一過程豆胸，甚至可以讓你指定你需要支持的瀏覽器 ：
- 在線工具： Autoprefixer
- 文本編輯器插件 - Sublime Text, Atom
- 庫 - Autoprefixer
18. 在項(xiàng)目中使用精簡代碼
為了提高網(wǎng)站或app的頁面加載速度我們需要總是使用精簡代碼 . 代碼的精簡版本會移除掉空白和重復(fù)的部分,這樣會削減文件的大小. 當(dāng)然,這樣的話你的CSS代碼將會變得非常難以閱讀,所以最好總是提供一個(gè).min的精簡版本和一個(gè)常規(guī)的發(fā)展版本.
有很多不同的方法去精簡CSS代碼 :
- 在線工具 - CSS Minifier, CSS Compressor
- 文本編輯插件 - Sublime Text, [Atom]* (https://atom.io/packages/atom-minify)
- 庫 - Minfiy , CSSO 和 CSSNano
根據(jù)你的工作流程,你可以選用上述一個(gè)選項(xiàng),但是建議你總是使用某種方式自動執(zhí)行此過程.
19. Can I Use
不同的瀏覽器仍然存在著很多不一致的兼容性問題, 利用 caniuse 或者其它類似的服務(wù)檢測你正在使用的屬性是否被廣泛支持, 是否需要添加前綴, 或者說是否會在某平臺下出現(xiàn)bug.
僅僅檢測是否仍然是不夠的, 你仍然需要測試布局是否會無緣無故的崩潰. 充分了解用戶經(jīng)常使用的瀏覽器也會提供很大的幫助, 因此你可以看到好的支持是非常關(guān)鍵的.
20. Validate
驗(yàn)證CSS代碼可能沒有驗(yàn)證HTML或者JavaScript代碼重要, 但是在一個(gè)CSS驗(yàn)證器上運(yùn)行你的代碼還是有幫助的, 它會提示你是否書寫了錯(cuò)誤或者比較糟糕的代碼, 甚至?xí)o出一些比較中肯的建議幫助你改進(jìn)代碼.
有很多的工具可以完成這一工作.
在線工具 - W3 Validator, CSS Lint
文本編輯器插件 - Sublime Text, Atom
庫 - stylelint (Node.js, PostCSS), css-validator (Node.js)
當(dāng)然,你可以 查看原文
Ending...
