本文翻譯自Danny Markov 的20-Tips-For-Writing-Modern-CSS一文。

本文歸納于筆者的Web Frontend Introduction And Best Practices:前端入門與最佳實踐中CSS入門與最佳實踐系列，其他的關于CSS樣式指南的還有提升你的CSS姿勢、Facebook里是怎樣提升CSS代碼質量的。本文更偏向于樣式使用技巧，前兩篇偏向于代碼風格與規范。

明白何謂Margin Collapse

不同于其他很多屬性，盒模型中垂直方向上的Margin會在相遇時發生崩塌，也就是說當某個元素的底部Margin與另一個元素的頂部Margin相鄰時，只有二者中的較大值會被保留下來，可以從下面這個簡單的例子來學習:

1. .square?{?
2. ????width:?80px;?
3. ????height:?80px;?
4. }?
5. ?
6. .red?{?
7. ????background-color:?#F44336;?
8. ????margin-bottom:?40px;?
9. }?
10. ?
11. .blue?{?
12. ????background-color:?#2196F3;?
13. ????margin-top:?30px;?
14. }??

在上述例子中我們會發現，紅色和藍色方塊的外邊距并沒有相加得到70px，而是只有紅色的下外邊距保留了下來。我們可以使用一些方法來避免這種行為，不過建議來說還是盡量統一使用margin-bottom屬性，這樣就顯得和諧多了。

使用Flexbox進行布局

CSS實戰之Flex詳解以及其在微信中的兼容實現

在傳統的布局中我們習慣使用Floats或者inline-blocks，不過它們更適合于格式化文檔，而不是整個網站。而Flexbox則是專門的用于進行布局的工具。Flexbox模型允許開發者使用很多便捷可擴展的屬性來進行布局，估計你一旦用上就舍不得了:

1. .container?{?
2. ????display:?flex;?
3. ????/*?Don't?forget?to?add?prefixes?for?Safari?*/display:?-webkit-flex;?
4. }??

我們已經在Tutorialzine上提供了很多的關于Flexbox的介紹與小技巧，譬如5 Flexbox Techniques You Need to Know About。

使用CSS Reset

雖然這些年來隨著瀏覽器的迅速發展與規范的統一，瀏覽器特性碎片化的情況有所改善，但是在不同的瀏覽器之間仍然存在著很多的行為差異。而解決這種問題的最好的辦法就是使用某個CSS Reset來為所有的元素設置統一的樣式，保證你能在相對統一干凈的樣式表的基礎上開始工作。目前流行的Reset庫有 normalize.css, minireset以及 ress ，它們都可以修正很多已知的瀏覽器之間的差異性。而如果你不打算用某個外在的庫，那么建議可以使用如下的基本規則:

1. *?{?
2. ????margin:?0;?
3. ????padding:?0;?
4. ????box-sizing:?border-box;?
5. }??

上面的規則看起來沒啥用，不過如果不同的瀏覽器在默認情況下為你設置了不同的外邊距/內邊距的默認值，還是會挺麻煩的。

一切應為Border-box

雖然很多初學者并不了解box-sizing這個屬性，但是它確實相當的重要。而最好的理解它的方式就是看看它的兩種取值:

• 默認值為content-box，即當我們設置某個元素的heght/width屬性時，僅僅會作用于其內容尺寸。而所有的內邊距與邊都是在其之上的累加，譬如某個<div>標簽設置為寬100，內邊距為10，那么最終元素會占用120(100 + 2*10)的像素。
• border-box:內邊距與邊是包含在了width/height之內，譬如設置了width:100px的<div>無論其內邊距或者邊長設置為多少，其占有的大小都是100px。

將元素設置為border-box會很方便你進行樣式布局，這樣的話你就可以在父元素設置高寬限制而不擔心子元素的內邊距或者邊打破了這種限制。

以背景圖方式使用Images

如果需要在響應式的環境下展示圖片，有個簡單的小技巧就是使用該圖片作為某個<div>的背景圖而不是直接使用img標簽。基于這種方式配合上background-size與background-position這兩個屬性，可以很方便地按比例縮放:

1. img?{?
2. ????width:?300px;?
3. ????height:?200px;?
4. }?
5. ?
6. div?{?
7. ????width:?300px;?
8. ????height:?200px;?
9. ????background:?url('http://cdn.tutorialzine.com/wp-content/uploads/2016/08/bicycle.jpg');?
10. ????background-position:?center?center;?
11. ????background-size:?cover;?
12. }?
13. ?
14. section{?
15. ????float:?left;?
16. ????margin:?15px;?
17. }??

不過這種方式也是存在缺陷的，譬如你無法設置圖片的懶加載、圖片無法被搜索引擎或者其他類似的工具抓取到，有個不錯的屬性叫object-fit可以解決這個問題，不過該屬性目前的瀏覽器支持并不是很完善。

Better Table Borders

HTML中使用Tables進行布局一直是個很頭疼的問題，它們使用起來很簡單，但是無法進行響應式操作，并且也不方便進行全局樣式設置。譬如，如果你打算為Table的邊與單元的邊添加樣式，可能得到的結果如下:

1. table?{?
2. ????width:?600px;?
3. ????border:?1px?solid?#505050;?
4. ????margin-bottom:?15px;?
5. ????color:#505050;?
6. }?
7. ?
8. td{?
9. ????border:?1px?solid?#505050;?
10. ????padding:?10px;?
11. }??

這里存在的問題是出現了很多的重復的邊，會導致視覺上不協調的情況，那么我們可以通過設置border-collapse:collapse來進行處理:

注釋格式優化

CSS雖然談不上一門編程語言但是其仍然需要添加注釋以保障整體代碼的可讀性，只要添加些簡單的注釋不僅可以方便你更好地組織整個樣式表還能夠讓你的同事或者未來的自己更好地理解。對于CSS中整塊的注釋或者使用在Media-Query中的注釋，建議是使用如下形式：

1. /*---------------?
2. ????#Header?
3. ---------------*/header?{?}header?nav?{?}/*---------------?
4. ????#Slideshow?
5. ---------------*/.slideshow?{?}??

而設計的細節說明或者一些不重要的組件可以用如下單行注釋的方式:

1. /*???Footer?Buttons???*/?
2. .footer?button?{?}?
3. ?
4. .footer?button:hover?{?}??

同時，不要忘了CSS中是沒有//這種注釋方式的:

1. /*??Do??*/p?{?
2. ????padding:?15px;?
3. ????/*border:?1px?solid?#222;*/?
4. }/*??Don't??*/p?{?
5. ????padding:?15px;?
6. ????//?border:?1px?solid?#222;???
7. }??

使用Kebab-case命名變量

對于樣式類名或者ID名的命名都需要在多個單詞之間添加-符號，CSS本身是大小寫不敏感的因此你是用不了camelCase的，另一方面，很久之前也不支持下劃線，所以現在的默認的命名方式就是使用-:

1. /*??Do?????*/?
2. .footer-column-left?{?}?
3. ?
4. /*??Don't??*/?
5. .footerColumnLeft?{?}?
6. ?
7. .footer_column_left?{?}??

而涉及到具體的變量命名規范時，建議是使用BEM規范，只要遵循一些簡單的原則即可以保證基于組件風格的命名一致性。你也可以參考CSS Tricks來獲得更多的細節描述。

避免重復代碼

大部分元素的CSS屬性都是從DOM樹根部繼承而來，這也是其命名為級聯樣式表的由來。我們以font屬性為例，該屬性往往是繼承自父屬性，因此我們并不需要再單獨地為元素設置該屬性。我們只需要在html或者body中添加該屬性然后使其層次傳遞下去即可:

1. html?{?
2. ????font:?normal?16px/1.4?sans-serif;?
3. }??

使用transform添加CSS Animations

不建議直接改變元素的width與height屬性或者left/top/bottom/right這些屬性來達到動畫效果，而應該優先使用transform()屬性來提供更平滑的變換效果，并且能使得代碼的可讀性會更好:

1. .ball?{?
2. ????left:?50px;?
3. ????transition:?0.4s?ease-out;?
4. }/*?Not?Cool*/.ball.slide-out?{?
5. ????left:?500px;?
6. }/*?Cool*/.ball.slide-out?{?
7. ????transform:?translateX(450px);?
8. }??

Transform的幾個屬性translate、rotate、scale都具有比較好的瀏覽器兼容性可以放心使用。

不要重復造輪子

現在CSS社區已經非常龐大，并且不斷地有新的各式各樣的庫開源出來。這些庫可以幫助我們解決從小的代碼片到用于構建完整的響應式應用的全框架。所以如果下次你再碰到什么CSS問題的時候，在打算擼起袖子自己上之前可以嘗試在GitHUB或者CodePen上搜索可行方案。

盡可能使用低優先級的選擇器

并不是所有的CSS選擇器的優先級都一樣，很多初學者在使用CSS選擇器的時候都是考慮以新的特性去復寫全部的繼承特性，不過這一點在某個元素多狀態時就麻煩了，譬如下面這個例子:

1. a{?
2. ????color:?#fff;?
3. ????padding:?15px;?
4. }?
5. ?
6. a#blue-btn?{?
7. ????background-color:?blue;?
8. }?
9. ?
10. a.active?{?
11. ????background-color:?red;?
12. }??

我們本來希望將.active類添加到按鈕上然后使其顯示為紅色，不過在上面這個例子中很明顯起不了作用，因為button已經以ID選擇器設置過了背景色，也就是所謂的Higher Selector Specificity。一般來說，選擇器的優先級順序為：ID(#id) > Class(.class) > Type(header)

避免使用!important

認真的說，千萬要避免使用!important，這可能會導致你在未來的開發中無盡的屬性重寫，你應該選擇更合適的CSS選擇器。而唯一的可以使用!important屬性的場景就是當你想去復寫某些行內樣式的時候，不過行內樣式本身也是需要避免的。

使用text-transform屬性設置文本大寫

1. <div?class="movie-poster">Star?Wars:?The?Force?Awakens</div>?
2. ?
3. .movie-poster?{?
4. ????text-transform:?uppercase;?
5. }??

Em, Rem, 以及 Pixel

已經有很多關于人們應該如何使用em，rem，以及px作為元素尺寸與文本尺寸的討論，而筆者認為，這三個尺寸單位都有其適用與不適用的地方。不同的開發與項目都有其特定的設置，因此并沒有通用的規則來決定應該使用哪個單位，這里是我總結的幾個考慮:

• em – 其基本單位即為當前元素的font-size值，經常適用于media-queries中，em是特別適用于響應式開發中。
• rem – 其是相對于html屬性的單位，可以保證文本段落真正的響應式尺寸特性。
• px – Pixels 并沒有任何的動態擴展性，它們往往用于描述絕對單位，并且可以在設置值與最終的顯示效果之間保留一定的一致性。

在大型項目中使用預處理器

估計你肯定聽說過 Sass, Less, PostCSS, Stylus這些預處理器與對應的語法。Preprocessors可以允許我們將未來的CSS特性應用在當前的代碼開發中，譬如變量支持、函數、嵌套式的選擇器以及很多其他的特性，這里我們以Sass為例:

1. $accent-color:?#2196F3;?
2. ?
3. a?{?
4. ????padding:?10px?15px;?
5. ????background-color:?$accent-color;?
6. }?
7. ?
8. a:hover?{?
9. ????background-color:?darken($accent-color,10%);?
10. }??

使用Autoprefixers來提升瀏覽器兼容性

使用特定的瀏覽器前綴是CSS開發中常見的工作之一，不同的瀏覽器、不同的屬性對于前綴的要求也不一樣，這就使得我們無法在編碼過程中記住所有的前綴規則。并且在寫樣式代碼的時候還需要加上特定的瀏覽器前綴支持也是個麻煩活，幸虧現在也是有很多工具可以輔助我們進行這樣的開發:

• Online tools: Autoprefixer
• Text editor plugins: Sublime Text, Atom
• Libraries: Autoprefixer (PostCSS)

在生產環境下使用Minified代碼

為了提升頁面的加載速度，在生產環境下我們應該默認使用壓縮之后的資源代碼。在壓縮的過程中，會將所有的空白與重復剔除掉從而減少整個文件的體積大小。當然，經過壓縮之后的代碼毫無可讀性，因此在開發階段我們還是應該使用普通的版本。對于CSS的壓縮有很多的現行工具:

• Online tools – CSS Minifier (API included), CSS Compressor
• Text editor plugins: Sublime Text, Atom
• Libraries: Minfiy (PHP), CSSO and CSSNano (PostCSS, Grunt, Gulp)

選擇哪個工具肯定是依賴于你自己的工作流啦~

多參閱Caniuse

不同的瀏覽器在兼容性上差異很大，因此如果我們可以針對我們所需要適配的瀏覽器，在caniuse上我們可以查詢某個特性的瀏覽器版本適配性，是否需要添加特定的前綴或者在某個平臺上是否存在Bug等等。不過光光使用caniuse肯定是不夠的，我們還需要使用些額外的服務來進行檢測。

Validate:校驗

對于CSS的校驗可能不如HTML校驗或者JavaScript校驗那么重要，不過在正式發布之前用Lint工具校驗一波你的CSS代碼還是很有意義的。它會告訴你代碼中潛在的錯誤，提示你一些不符合最佳實踐的代碼以及給你一些提升代碼性能的建議。就像Minifers與Autoprefixers，也有很多可用的工具:

• Online tools: W3 Validator, CSS Lint
• Text editor plugins: Sublime Text, Atom
• Libraries: stylelint (Node.js, PostCSS), css-validator (Node.js)