明白何謂Margin Collapse
不同于其他很多屬性纲酗，盒模型中垂直方向上的Margin會(huì)在相遇時(shí)發(fā)生崩塌足陨，也就是說當(dāng)某個(gè)元素的底部Margin與另一個(gè)元素的頂部Margin相鄰時(shí)克伊，只有二者中的較大值會(huì)被保留下來，可以從下面這個(gè)簡(jiǎn)單的例子來學(xué)習(xí):
.square { width: 80px; height: 80px; } .red { background-color: #F44336; margin-bottom: 40px; } .blue { background-color: #2196F3; margin-top: 30px; }
在上述例子中我們會(huì)發(fā)現(xiàn)，紅色和藍(lán)色方塊的外邊距并沒有相加得到70px汁胆，而是只有紅色的下外邊距保留了下來。我們可以使用一些方法來避免這種行為霜幼，不過建議來說還是盡量統(tǒng)一使用margin-bottom
屬性嫩码，這樣就顯得和諧多了。
使用Flexbox進(jìn)行布局
在傳統(tǒng)的布局中我們習(xí)慣使用Floats或者inline-blocks罪既，不過它們更適合于格式化文檔铸题，而不是整個(gè)網(wǎng)站。而Flexbox則是專門的用于進(jìn)行布局的工具琢感。Flexbox模型允許開發(fā)者使用很多便捷可擴(kuò)展的屬性來進(jìn)行布局丢间，估計(jì)你一旦用上就舍不得了:
.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 About驹针。
使用CSS Reset
雖然這些年來隨著瀏覽器的迅速發(fā)展與規(guī)范的統(tǒng)一烘挫，瀏覽器特性碎片化的情況有所改善，但是在不同的瀏覽器之間仍然存在著很多的行為差異柬甥。而解決這種問題的最好的辦法就是使用某個(gè)CSS Reset來為所有的元素設(shè)置統(tǒng)一的樣式饮六，保證你能在相對(duì)統(tǒng)一干凈的樣式表的基礎(chǔ)上開始工作。目前流行的Reset庫(kù)有 normalize.css, minireset以及 ress 苛蒲，它們都可以修正很多已知的瀏覽器之間的差異性卤橄。而如果你不打算用某個(gè)外在的庫(kù)，那么建議可以使用如下的基本規(guī)則:
* { margin: 0; padding: 0; box-sizing: border-box; }
上面的規(guī)則看起來沒啥用臂外，不過如果不同的瀏覽器在默認(rèn)情況下為你設(shè)置了不同的外邊距/內(nèi)邊距的默認(rèn)值窟扑，還是會(huì)挺麻煩的。
一切應(yīng)為Border-box
雖然很多初學(xué)者并不了解box-sizing這個(gè)屬性漏健，但是它確實(shí)相當(dāng)?shù)闹匾炕酢６詈玫睦斫馑姆绞骄褪强纯此膬煞N取值:
默認(rèn)值為content-box，即當(dāng)我們?cè)O(shè)置某個(gè)元素的heght/width屬性時(shí)蔫浆，僅僅會(huì)作用于其內(nèi)容尺寸殖属。而所有的內(nèi)邊距與邊都是在其之上的累加，譬如某個(gè)<div>標(biāo)簽設(shè)置為寬100克懊，內(nèi)邊距為10，那么最終元素會(huì)占用120(100 + 2*10)的像素七蜘。
border-box:內(nèi)邊距與邊是包含在了width/height之內(nèi)谭溉，譬如設(shè)置了width:100px的<div>無論其內(nèi)邊距或者邊長(zhǎng)設(shè)置為多少，其占有的大小都是100px橡卤。
將元素設(shè)置為border-box會(huì)很方便你進(jìn)行樣式布局扮念，這樣的話你就可以在父元素設(shè)置高寬限制而不擔(dān)心子元素的內(nèi)邊距或者邊打破了這種限制。
以背景圖方式使用Images
如果需要在響應(yīng)式的環(huán)境下展示圖片碧库，有個(gè)簡(jiǎn)單的小技巧就是使用該圖片作為某個(gè)<div>的背景圖而不是直接使用img標(biāo)簽柜与∏汕冢基于這種方式配合上background-size與background-position這兩個(gè)屬性，可以很方便地按比例縮放:
img { width: 300px; height: 200px; } div { width: 300px; height: 200px; background: url('http://cdn.tutorialzine.com/wp-content/uploads/2016/08/bicycle.jpg'); background-position: center center; background-size: cover; } section{ float: left; margin: 15px; }
不過這種方式也是存在缺陷的弄匕，譬如你無法設(shè)置圖片的懶加載颅悉、圖片無法被搜索引擎或者其他類似的工具抓取到，有個(gè)不錯(cuò)的屬性叫object-fit可以解決這個(gè)問題迁匠，不過該屬性目前的瀏覽器支持并不是很完善剩瓶。
Better Table Borders
HTML中使用Tables進(jìn)行布局一直是個(gè)很頭疼的問題，它們使用起來很簡(jiǎn)單城丧，但是無法進(jìn)行響應(yīng)式操作延曙，并且也不方便進(jìn)行全局樣式設(shè)置。譬如亡哄，如果你打算為Table的邊與單元的邊添加樣式枝缔，可能得到的結(jié)果如下:
table { width: 600px; border: 1px solid #505050; margin-bottom: 15px; color:#505050; } td{ border: 1px solid #505050; padding: 10px; }
這里存在的問題是出現(xiàn)了很多的重復(fù)的邊，會(huì)導(dǎo)致視覺上不協(xié)調(diào)的情況蚊惯，那么我們可以通過設(shè)置border-collapse:collapse來進(jìn)行處理:
注釋格式優(yōu)化
CSS雖然談不上一門編程語(yǔ)言但是其仍然需要添加注釋以保障整體代碼的可讀性愿卸，只要添加些簡(jiǎn)單的注釋不僅可以方便你更好地組織整個(gè)樣式表還能夠讓你的同事或者未來的自己更好地理解。對(duì)于CSS中整塊的注釋或者使用在Media-Query中的注釋拣挪，建議是使用如下形式：
/*--------------- #Header---------------*/ header { } header nav { } /*--------------- #Slideshow---------------*/ .slideshow { }
而設(shè)計(jì)的細(xì)節(jié)說明或者一些不重要的組件可以用如下單行注釋的方式:
/* Footer Buttons */ .footer button { } .footer button:hover { }
同時(shí)擦酌，不要忘了CSS中是沒有//
這種注釋方式的:
/* Do */ p { padding: 15px; /*border: 1px solid #222;*/ } /* Don't */ p { padding: 15px; // border: 1px solid #222; }
使用Kebab-case命名變量
對(duì)于樣式類名或者ID名的命名都需要在多個(gè)單詞之間添加-
符號(hào)，CSS本身是大小寫不敏感的因此你是用不了camelCase的菠劝，另一方面赊舶，很久之前也不支持下劃線，所以現(xiàn)在的默認(rèn)的命名方式就是使用-
:
/* Do */ .footer-column-left { } /* Don't */ .footerColumnLeft { } .footer_column_left { }
而涉及到具體的變量命名規(guī)范時(shí)赶诊，建議是使用BEM規(guī)范笼平，只要遵循一些簡(jiǎn)單的原則即可以保證基于組件風(fēng)格的命名一致性。你也可以參考CSS Tricks來獲得更多的細(xì)節(jié)描述舔痪。
避免重復(fù)代碼
大部分元素的CSS屬性都是從DOM樹根部繼承而來寓调，這也是其命名為級(jí)聯(lián)樣式表的由來。我們以font屬性為例锄码，該屬性往往是繼承自父屬性夺英，因此我們并不需要再單獨(dú)地為元素設(shè)置該屬性。我們只需要在html或者body
中添加該屬性然后使其層次傳遞下去即可:
html { font: normal 16px/1.4 sans-serif;}
使用transform添加CSS Animations
不建議直接改變?cè)氐膚idth與height屬性或者left/top/bottom/right這些屬性來達(dá)到動(dòng)畫效果滋捶，而應(yīng)該優(yōu)先使用transform()屬性來提供更平滑的變換效果痛悯，并且能使得代碼的可讀性會(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都具有比較好的瀏覽器兼容性可以放心使用载萌。
不要重復(fù)造輪子
現(xiàn)在CSS社區(qū)已經(jīng)非常龐大，并且不斷地有新的各式各樣的庫(kù)開源出來。這些庫(kù)可以幫助我們解決從小的代碼片到用于構(gòu)建完整的響應(yīng)式應(yīng)用的全框架扭仁。所以如果下次你再碰到什么CSS問題的時(shí)候垮衷，在打算擼起袖子自己上之前可以嘗試在GitHUB或者CodePen上搜索可行方案。
盡可能使用低優(yōu)先級(jí)的選擇器
并不是所有的CSS選擇器的優(yōu)先級(jí)都一樣乖坠，很多初學(xué)者在使用CSS選擇器的時(shí)候都是考慮以新的特性去復(fù)寫全部的繼承特性搀突，不過這一點(diǎn)在某個(gè)元素多狀態(tài)時(shí)就麻煩了，譬如下面這個(gè)例子:
a{ color: #fff; padding: 15px; } a#blue-btn { background-color: blue; } a.active { background-color: red; }
我們本來希望將.active
類添加到按鈕上然后使其顯示為紅色瓤帚，不過在上面這個(gè)例子中很明顯起不了作用描姚，因?yàn)閎utton
已經(jīng)以ID選擇器設(shè)置過了背景色，也就是所謂的Higher Selector Specificity戈次。一般來說轩勘，選擇器的優(yōu)先級(jí)順序?yàn)椋篒D(#id) > Class(.class) > Type(header)
避免使用!important
認(rèn)真的說，千萬要避免使用!important怯邪，這可能會(huì)導(dǎo)致你在未來的開發(fā)中無盡的屬性重寫绊寻，你應(yīng)該選擇更合適的CSS選擇器。而唯一的可以使用!important
屬性的場(chǎng)景就是當(dāng)你想去復(fù)寫某些行內(nèi)樣式的時(shí)候悬秉，不過行內(nèi)樣式本身也是需要避免的澄步。
使用text-transform屬性設(shè)置文本大寫
<div class="movie-poster"> Star Wars: The Force Awakens </div> .movie-poster { text-transform: uppercase; }
Em, Rem, 以及 Pixel
已經(jīng)有很多關(guān)于人們應(yīng)該如何使用em，rem和泌，以及px作為元素尺寸與文本尺寸的討論村缸，而筆者認(rèn)為，這三個(gè)尺寸單位都有其適用與不適用的地方武氓。不同的開發(fā)與項(xiàng)目都有其特定的設(shè)置梯皿，因此并沒有通用的規(guī)則來決定應(yīng)該使用哪個(gè)單位，這里是我總結(jié)的幾個(gè)考慮:
em – 其基本單位即為當(dāng)前元素的font-size值县恕，經(jīng)常適用于media-queries中东羹，em是特別適用于響應(yīng)式開發(fā)中。
rem – 其是相對(duì)于html屬性的單位忠烛，可以保證文本段落真正的響應(yīng)式尺寸特性属提。
px – Pixels 并沒有任何的動(dòng)態(tài)擴(kuò)展性，它們往往用于描述絕對(duì)單位美尸，并且可以在設(shè)置值與最終的顯示效果之間保留一定的一致性冤议。
在大型項(xiàng)目中使用預(yù)處理器
估計(jì)你肯定聽說過 Sass, Less, PostCSS, Stylus這些預(yù)處理器與對(duì)應(yīng)的語(yǔ)法。Preprocessors可以允許我們將未來的CSS特性應(yīng)用在當(dāng)前的代碼開發(fā)中师坎，譬如變量支持恕酸、函數(shù)、嵌套式的選擇器以及很多其他的特性屹耐，這里我們以Sass為例:
`
$accent-color: #2196F3;
a {
padding: 10px 15px;
background-color:
$accent-color;
}
a:hover {
background-color: darken($accent-color,10%);
}`
使用Autoprefixers來提升瀏覽器兼容性
使用特定的瀏覽器前綴是CSS開發(fā)中常見的工作之一尸疆，不同的瀏覽器、不同的屬性對(duì)于前綴的要求也不一樣惶岭，這就使得我們無法在編碼過程中記住所有的前綴規(guī)則寿弱。并且在寫樣式代碼的時(shí)候還需要加上特定的瀏覽器前綴支持也是個(gè)麻煩活，幸虧現(xiàn)在也是有很多工具可以輔助我們進(jìn)行這樣的開發(fā):
Online tools: Autoprefixer
Text editor plugins: Sublime Text, Atom
Libraries: Autoprefixer (PostCSS)
在生產(chǎn)環(huán)境下使用Minified代碼
為了提升頁(yè)面的加載速度按灶，在生產(chǎn)環(huán)境下我們應(yīng)該默認(rèn)使用壓縮之后的資源代碼症革。在壓縮的過程中，會(huì)將所有的空白與重復(fù)剔除掉從而減少整個(gè)文件的體積大小鸯旁。當(dāng)然噪矛，經(jīng)過壓縮之后的代碼毫無可讀性，因此在開發(fā)階段我們還是應(yīng)該使用普通的版本铺罢。對(duì)于CSS的壓縮有很多的現(xiàn)行工具:
Online tools – CSS Minifier (API included), CSS Compressor
Text editor plugins: Sublime Text, Atom
Libraries: Minfiy (PHP), CSSO and CSSNano (PostCSS, Grunt, Gulp)
選擇哪個(gè)工具肯定是依賴于你自己的工作流啦~
多參閱Caniuse
不同的瀏覽器在兼容性上差異很大艇挨，因此如果我們可以針對(duì)我們所需要適配的瀏覽器，在caniuse上我們可以查詢某個(gè)特性的瀏覽器版本適配性韭赘，是否需要添加特定的前綴或者在某個(gè)平臺(tái)上是否存在Bug等等缩滨。不過光光使用caniuse肯定是不夠的，我們還需要使用些額外的服務(wù)來進(jìn)行檢測(cè)泉瞻。
Validate:校驗(yàn)
對(duì)于CSS的校驗(yàn)可能不如HTML校驗(yàn)或者JavaScript校驗(yàn)?zāi)敲粗匾雎贿^在正式發(fā)布之前用Lint工具校驗(yàn)一波你的CSS代碼還是很有意義的。它會(huì)告訴你代碼中潛在的錯(cuò)誤袖牙，提示你一些不符合最佳實(shí)踐的代碼以及給你一些提升代碼性能的建議侧巨。就像Minifers與Autoprefixers，也有很多可用的工具:
*Online tools: W3 Validator, CSS Lint
*Text editor plugins: Sublime Text, Atom
*Libraries: stylelint (Node.js, PostCSS), css-validator (Node.js)
