編寫(xiě)現代 CSS 代碼的 20 個(gè)建議

　　何謂Margin Collapse

　　不同于其他很多屬性ID嵌套樣式問(wèn)題，盒模型中垂直方向上的Margin會(huì )在相遇時(shí)發(fā)生崩塌，也就是說(shuō)當某個(gè)元素的底部Margin與另一個(gè)元素的頂部Margin相鄰時(shí)，只有二者中的較大值會(huì )被保留下來(lái)，可以從下面這個(gè)簡(jiǎn)單的例子來(lái)學(xué)習:

　　.square { width: 80px; height: 80px; } .red { background-color: #F44336; margin-bottom: 40px; } .blue { background-color: #2196F3; margin-top: 30px; }

　　在上述例子中我們會(huì )發(fā)現，紅色和藍色方塊的外邊距并沒(méi)有相加得到70px，而是只有紅色的下外邊距保留了下來(lái)ID嵌套樣式問(wèn)題。我們可以使用一些方法來(lái)避免這種行為，不過(guò)建議來(lái)說(shuō)還是盡量統一使用margin-bottom屬性，這樣就顯得和諧多了。

　　使用Flexbox進(jìn)行布局

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

　　在傳統的布局中我們習慣使用Floats或者inline-blocks，不過(guò)它們更適合于格式化文檔，而不是整個(gè)網(wǎng)站ID嵌套樣式問(wèn)題。而Flexbox則是專(zhuān)門(mén)的用于進(jìn)行布局的工具。Flexbox模型允許開(kāi)發(fā)者使用很多便捷可擴展的屬性來(lái)進(jìn)行布局，估計你一旦用上就舍不得了:

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

　　我們已經(jīng)在Tutorialzine上提供了很多的關(guān)于Flexbox的介紹與小技巧，譬如5 Flexbox Techniques You Need to Know AboutID嵌套樣式問(wèn)題。

　　使用CSS Reset

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

　　* { margin: 0; padding: 0; box-sizing: border-box; }

　　上面的規則看起來(lái)沒(méi)啥用，不過(guò)如果不同的瀏覽器在默認情況下為你設置了不同的外邊距/內邊距的默認值，還是會(huì )挺麻煩的ID嵌套樣式問(wèn)題。

　　一切應為Border-box

　　雖然很多初學(xué)者并不了解box-sizing這個(gè)屬性，但是它確實(shí)相當的重要ID嵌套樣式問(wèn)題。而最好的理解它的方式就是看看它的兩種取值:

　　默認值為content-box，即當我們設置某個(gè)元素的heght/width屬性時(shí)，僅僅會(huì )作用于其內容尺寸ID嵌套樣式問(wèn)題。而所有的內邊距與邊都是在其之上的累加，譬如某個(gè)

　　標簽設置為寬100，內邊距為10，那么最終元素會(huì )占用120(100 + 2*10)的像素ID嵌套樣式問(wèn)題。

　　border-box:內邊距與邊是包含在了width/height之內ID嵌套樣式問(wèn)題，譬如設置了width:100px的

　　無(wú)論其內邊距或者邊長(cháng)設置為多少，其占有的大小都是100pxID嵌套樣式問(wèn)題。

　　將元素設置為border-box會(huì )很方便你進(jìn)行樣式布局，這樣的話(huà)你就可以在父元素設置高寬限制而不擔心子元素的內邊距或者邊打破了這種限制ID嵌套樣式問(wèn)題。

　　以背景圖方式使用Images

　　如果需要在響應式的環(huán)境下展示圖片ID嵌套樣式問(wèn)題，有個(gè)簡(jiǎn)單的小技巧就是使用該圖片作為某個(gè)

　　的背景圖而不是直接使用img標簽ID嵌套樣式問(wèn)題。基于這種方式配合上background-size與background-position這兩個(gè)屬性，可以很方便地按比例縮放:

　　img { width: 300px; height: 200px; } div { width: 300px; height: 200px; background: url('網(wǎng)頁(yè)鏈接); background-position: center center; background-size: cover; } section{ float: left; margin: 15px; }

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

　　Better Table Borders

　　HTML中使用Tables進(jìn)行布局一直是個(gè)很頭疼的問(wèn)題，它們使用起來(lái)很簡(jiǎn)單，但是無(wú)法進(jìn)行響應式操作，并且也不方便進(jìn)行全局樣式設置ID嵌套樣式問(wèn)題。譬如，如果你打算為T(mén)able的邊與單元的邊添加樣式，可能得到的結果如下:

　　table { width: 600px; border: 1px solid #505050; margin-bottom: 15px; color:#505050; } td{ border: 1px solid #505050; padding: 10px; }

　　這里存在的問(wèn)題是出現了很多的重復的邊ID嵌套樣式問(wèn)題，會(huì )導致視覺(jué)上不協(xié)調的情況，那么我們可以通過(guò)設置border-collapse:collapse來(lái)進(jìn)行處理:

　　注釋格式優(yōu)化

　　CSS雖然談不上一門(mén)編程語(yǔ)言但是其仍然需要添加注釋以保障整體代碼的可讀性，只要添加些簡(jiǎn)單的注釋不僅可以方便你更好地組織整個(gè)樣式表還能夠讓你的同事或者未來(lái)的自己更好地理解ID嵌套樣式問(wèn)題。對于CSS中整塊的注釋或者使用在Media-Query中的注釋?zhuān)偗浣ㄗh是使用如下形式：

　　/*--------------- #Header ---------------*/header { }header nav { }/*--------------- #Slideshow ---------------*/.slideshow { }

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

　　/* Footer Buttons */ .footer button { } .footer button:hover { }

　　同時(shí)ID嵌套樣式問(wèn)題，不要忘了CSS中是沒(méi)有//這種注釋方式的:

　　/* Do */p { padding: 15px; /*border: 1px solid #222;*/ }/* Don't */p { padding: 15px; // border: 1px solid #222; }

　　使用Kebab-case命名變量

　　對于樣式類(lèi)名或者ID名的命名都需要在多個(gè)單詞之間添加-符號ID嵌套樣式問(wèn)題，CSS本身是大小寫(xiě)不敏感的因此你是用不了camelCase的，另一方面，很久之前也不支持下劃線(xiàn)，所以現在的默認的命名方式就是使用-:

　　/* Do */ .footer-column-left { } /* Don't */ .footerColumnLeft { } .footer_column_left { }

　　而涉及到具體的變量命名規范時(shí)，建議是使用BEM規范，只要遵循一些簡(jiǎn)單的原則即可以保證基于組件風(fēng)格的命名一致性ID嵌套樣式問(wèn)題。你也可以參考CSS Tricks來(lái)獲得更多的細節描述。

　　避免重復代碼

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

　　html { font: normal 16px/1.4 sans-serif; }

　　使用transform添加CSS Animations

　　不建議直接改變元素的width與height屬性或者left/top/bottom/right這些屬性來(lái)達到動(dòng)畫(huà)效果ID嵌套樣式問(wèn)題，而應該優(yōu)先使用transform()屬性來(lái)提供更平滑的變換效果，并且能使得代碼的可讀性會(huì )更好:

　　.ball { left: 50px; transition: 0.4s ease-out; }/* Not Cool*/.ball.slide-out { left: 500px; }/* Cool*/.ball.slide-out { transform: translateX(450px); }

　　Transform的幾個(gè)屬性translate、rotate、scale都具有比較好的瀏覽器兼容性可以放心使用ID嵌套樣式問(wèn)題。

　　不要重復造輪子

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

　　盡可能使用低優(yōu)先級的選擇器

　　并不是所有的CSS選擇器的優(yōu)先級都一樣ID嵌套樣式問(wèn)題，很多初學(xué)者在使用CSS選擇器的時(shí)候都是考慮以新的特性去復寫(xiě)全部的繼承特性，不過(guò)這一點(diǎn)在某個(gè)元素多狀態(tài)時(shí)就麻煩了，譬如下面這個(gè)例子:

　　a{ color: #fff; padding: 15px; } a#blue-btn { background-color: blue; } a.active { background-color: red; }

　　我們本來(lái)希望將.active類(lèi)添加到按鈕上然后使其顯示為紅色，不過(guò)在上面這個(gè)例子中很明顯起不了作用，因為button已經(jīng)以ID選擇器設置過(guò)了背景色，也就是所謂的Higher Selector SpecificityID嵌套樣式問(wèn)題。一般來(lái)說(shuō)，選擇器的優(yōu)先級順序為：ID(#id) Class(.class) Type(header)

　　避免使用!important

　　認真的說(shuō)，千萬(wàn)要避免使用!important，這可能會(huì )導致你在未來(lái)的開(kāi)發(fā)中無(wú)盡的屬性重寫(xiě)，你應該選擇更合適的CSS選擇器ID嵌套樣式問(wèn)題。而唯一的可以使用!important屬性的場(chǎng)景就是當你想去復寫(xiě)某些行內樣式的時(shí)候，不過(guò)行內樣式本身也是需要避免的。

　　使用text-transform屬性設置文本大寫(xiě)

　　Star Wars: The Force Awakens

　　.movie-poster { text-transform: uppercase; }

　　Em, Rem, 以及 Pixel

　　已經(jīng)有很多關(guān)于人們應該如何使用em，rem，以及px作為元素尺寸與文本尺寸的討論，而筆者認為，這三個(gè)尺寸單位都有其適用與不適用的地方ID嵌套樣式問(wèn)題。不同的開(kāi)發(fā)與項目都有其特定的設置，因此并沒(méi)有通用的規則來(lái)決定應該使用哪個(gè)單位，這里是我總結的幾個(gè)考慮:

　　em – 其基本單位即為當前元素的font-size值，經(jīng)常適用于media-queries中，em是特別適用于響應式開(kāi)發(fā)中ID嵌套樣式問(wèn)題。

　　rem – 其是相對于html屬性的單位，可以保證文本段落真正的響應式尺寸特性ID嵌套樣式問(wèn)題。

　　px – Pixels 并沒(méi)有任何的動(dòng)態(tài)擴展性，它們往往用于描述絕對單位，并且可以在設置值與最終的顯示效果之間保留一定的一致性ID嵌套樣式問(wèn)題。

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

　　估計你肯定聽(tīng)說(shuō)過(guò) Sass, Less, PostCSS, Stylus這些預處理器與對應的語(yǔ)法ID嵌套樣式問(wèn)題。Preprocessors可以允許我們將未來(lái)的CSS特性應用在當前的代碼開(kāi)發(fā)中，譬如變量支持、函數、嵌套式的選擇器以及很多其他的特性，這里我們以Sass為例:

　　$accent-color: #2196F3; a { padding: 10px 15px; background-color: $accent-color; } a:hover { background-color: darken($accent-color,10%); }

　　使用Autoprefixers來(lái)提升瀏覽器兼容性

　　使用特定的瀏覽器前綴是CSS開(kāi)發(fā)中常見(jiàn)的工作之一，不同的瀏覽器、不同的屬性對于前綴的要求也不一樣，這就使得我們無(wú)法在編碼過(guò)程中記住所有的前綴規則ID嵌套樣式問(wèn)題。并且在寫(xiě)樣式代碼的時(shí)候還需要加上特定的瀏覽器前綴支持也是個(gè)麻煩活，幸虧現在也是有很多工具可以輔助我們進(jìn)行這樣的開(kāi)發(fā):

　　Online tools: Autoprefixer

　　Text editor plugins: Sublime Text, Atom

　　Libraries: Autoprefixer (PostCSS)

　　在生產(chǎn)環(huán)境下使用Minified代碼

　　為了提升頁(yè)面的加載速度，在生產(chǎn)環(huán)境下我們應該默認使用壓縮之后的資源代碼ID嵌套樣式問(wèn)題。在壓縮的過(guò)程中，會(huì )將所有的空白與重復剔除掉從而減少整個(gè)文件的體積大小。當然，經(jīng)過(guò)壓縮之后的代碼毫無(wú)可讀性，因此在開(kāi)發(fā)階段我們還是應該使用普通的版本。對于CSS的壓縮有很多的現行工具:

　　Online tools – CSS Minifier (API included), CSS Compressor

　　Text editor plugins: Sublime Text, Atom

　　Libraries: Minfiy (PHP), CSSO and CSSNano (PostCSS, Grunt, Gulp)

　　選擇哪個(gè)工具肯定是依賴(lài)于你自己的工作流啦~

　　多參閱Caniuse

　　不同的瀏覽器在兼容性上差異很大，因此如果我們可以針對我們所需要適配的瀏覽器，在caniuse上我們可以查詢(xún)某個(gè)特性的瀏覽器版本適配性，是否需要添加特定的前綴或者在某個(gè)平臺上是否存在Bug等等ID嵌套樣式問(wèn)題。不過(guò)光光使用caniuse肯定是不夠的，我們還需要使用些額外的服務(wù)來(lái)進(jìn)行檢測。

　　Validate:校驗

　　對于CSS的校驗可能不如HTML校驗或者JavaScript校驗那么重要，不過(guò)在正式發(fā)布之前用Lint工具校驗一波你的CSS代碼還是很有意義的ID嵌套樣式問(wèn)題。它會(huì )告訴你代碼中潛在的錯誤，提示你一些不符合最佳實(shí)踐的代碼以及給你一些提升代碼性能的建議。就像Minifers與Autoprefixers，也有很多可用的工具:

　　Online tools: W3 Validator, CSS Lint

　　Text editor plugins: Sublime Text, Atom

　　Libraries: stylelint (Node.js, PostCSS), css-validator (Node.js)