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è)問題，不過該屬性目前的瀏覽器支持并不是很完善。

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)行處理:

CSS雖然談不上一門編程語言但是其仍然需要添加注釋以保障整體代碼的可讀性，只要添加些簡(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;  
}

對(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é)描述。

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

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

不建議直接改變?cè)氐?b>width與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都具有比較好的瀏覽器兼容性可以放心使用。

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

并不是所有的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)?b>button已經(jīng)以ID選擇器設(shè)置過了背景色，也就是所謂的Higher Selector Specificity。一般來說，選擇器的優(yōu)先級(jí)順序?yàn)椋篒D(#id) > Class(.class) > Type(header)

認(rèn)真的說，千萬要避免使用!important，這可能會(huì)導(dǎo)致你在未來的開發(fā)中無盡的屬性重寫，你應(yīng)該選擇更合適的CSS選擇器。而唯一的可以使用!important屬性的場(chǎng)景就是當(dāng)你想去復(fù)寫某些行內(nèi)樣式的時(shí)候，不過行內(nèi)樣式本身也是需要避免的。

Star Wars: The Force Awakens

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

已經(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è)置值與最終的顯示效果之間保留一定的一致性。

估計(jì)你肯定聽說過 Sass, Less, PostCSS, Stylus這些預(yù)處理器與對(duì)應(yīng)的語法。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%);
}

使用特定的瀏覽器前綴是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)境下我們應(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è)工具肯定是依賴于你自己的工作流啦~

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

對(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)