的背景圖而不是直接使用img標簽。基于這種方式配合上-size與-這兩個屬性，可以很方便地按比例縮放:
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; ?
}不過這種方式也是存在缺陷的，譬如你無法設置圖片的懶加載、圖片無法被搜索引擎或者其他類似的工具抓取到，有個不錯的屬性叫-fit可以解決這個問題，不過該屬性目前的瀏覽器支持并不是很完善。
Table
HTML中使用進行布局一直是個很頭疼的問題，它們使用起來很簡單，但是無法進行響應式操作，并且也不方便進行全局樣式設置。譬如，如果你打算為Table的邊與單元的邊添加樣式，可能得到的結果如下:
table { ?
? ?width: 600px; ?
? ?border: 1px solid #505050; ?
? ?margin-bottom: 15px; ?
? ?color:#505050; ?
} ?
td{ ?
? ?border: 1px solid #505050; ?
? ?padding: 10px; ?
}這里存在的問題是出現了很多的重復的邊，會導致視覺上不協調的情況，那么我們可以通過設置-:來進行處理:
注釋格式優化
CSS雖然談不上一門編程語言但是其仍然需要添加注釋以保障整體代碼的可讀性，只要添加些簡單的注釋不僅可以方便你更好地組織整個樣式表還能夠讓你的同事或者未來的自己更好地理解。對于CSS中整塊的注釋或者使用在Media-Query中的注釋，建議是使用如下形式：
/*--------------- ?
? ?#Header ?
---------------*/header { }header nav { }/*--------------- ?
? ?#Slideshow ?
---------------*/.slideshow { }而設計的細節說明或者一些不重要的組件可以用如下單行注釋的方式:
/* ? Footer Buttons ? */ ? .footer button { } ?
.footer button:hover { }同時，不要忘了CSS中是沒有//這種注釋方式的:
/* ?Do ?*/p { ?
? ?padding: 15px; ?
? ?/*border: 1px solid #222;*/ ? }/* ?Don't ?*/p { ?
? ?padding: 15px; ?
? ?// border: 1px solid #222; ? ? }使用Kebab-case命名變量
對于樣式類名或者ID名的命名都需要在多個單詞之間添加-符號，CSS本身是大小寫不敏感的因此你是用不了的，另一方面，很久之前也不支持下劃線，所以現在的默認的命名方式就是使用-:
/* ?Do ? ? */ ? .footer-column-left { } ?
/* ?Don't ?*/ ? .footerColumnLeft { } ?
.footer_column_left { }而涉及到具體的變量命名規范時，建議是使用BEM規范，只要遵循一些簡單的原則即可以保證基于組件風格的命名一致性。你也可以參考CSS 來獲得更多的細節描述。
避免重復代碼
大部分元素的CSS屬性都是從DOM樹根部繼承而來，這也是其命名為級聯樣式表的由來。我們以font屬性為例，該屬性往往是繼承自父屬性，因此我們并不需要再單獨地為元素設置該屬性。我們只需要在html或者body中添加該屬性然后使其層次傳遞下去即可:
html { ?
? ?font: normal 16px/1.4 sans-serif; ?
}使用添加CSS
不建議直接改變元素的width與屬性或者left/top//right這些屬性來達到動畫效果，而應該優先使用()屬性來提供更平滑的變換效果，并且能使得代碼的可讀性會更好:
.ball { ?
? ?left: 50px; ?
? ?transition: 0.4s ease-out; ?
}/* Not Cool*/.ball.slide-out { ?
? ?left: 500px; ?
}/* Cool*/.ball.slide-out { ?
? ?transform: translateX(450px); ?
}的幾個屬性、、scale都具有比較好的瀏覽器兼容性可以放心使用。
不要重復造輪子
現在CSS社區已經非常龐大網頁制作在代碼上加鏈接，并且不斷地有新的各式各樣的庫開源出來。這些庫可以幫助我們解決從小的代碼片到用于構建完整的響應式應用的全框架。所以如果下次你再碰到什么CSS問題的時候，在打算擼起袖子自己上之前可以嘗試在或者上搜索可行方案。
盡可能使用低優先級的選擇器
并不是所有的CSS選擇器的優先級都一樣，很多初學者在使用CSS選擇器的時候都是考慮以新的特性去復寫全部的繼承特性，不過這一點在某個元素多狀態時就麻煩了，譬如下面這個例子:
a{ ?
? ?color: #fff; ?
? ?padding: 15px; ?
} ?
a#blue-btn { ?
? ?background-color: blue; ?
} ?
a.active { ?
? ?background-color: red; ?
}我們本來希望將.類添加到按鈕上然后使其顯示為紅色，不過在上面這個例子中很明顯起不了作用，因為已經以ID選擇器設置過了背景色，也就是所謂的 。一般來說，選擇器的優先級順序為：ID(#id) > Class(.class) > Type()
避免使用!
認真的說，千萬要避免使用!，這可能會導致你在未來的開發中無盡的屬性重寫，你應該選擇更合適的CSS選擇器。而唯一的可以使用!屬性的場景就是當你想去復寫某些行內樣式的時候，不過行內樣式本身也是需要避免的。
使用text-屬性設置文本大寫
Star Wars: The Force Awakens ?
.movie-poster { ?
? ?text-transform: uppercase; ?
}Em, Rem, 以及 Pixel
已經有很多關于人們應該如何使用em，rem，以及px作為元素尺寸與文本尺寸的討論，而筆者認為，這三個尺寸單位都有其適用與不適用的地方。不同的開發與項目都有其特定的設置，因此并沒有通用的規則來決定應該使用哪個單位，這里是我總結的幾個考慮:
在大型項目中使用預處理器
估計你肯定聽說過Sass,Less,,這些預處理器與對應的語法。可以允許我們將未來的CSS特性應用在當前的代碼開發中網頁制作在代碼上加鏈接，譬如變量支持、函數、嵌套式的選擇器以及很多其他的特性，這里我們以Sass為例:
$accent-color: #2196F3; ?
a { ?
? ?padding: 10px 15px; ?
? ?background-color: $accent-color; ?
} ?
a:hover { ?
? ?background-color: darken($accent-color,10%); ?
}使用來提升瀏覽器兼容性
使用特定的瀏覽器前綴是CSS開發中常見的工作之一，不同的瀏覽器、不同的屬性對于前綴的要求也不一樣，這就使得我們無法在編碼過程中記住所有的前綴規則。并且在寫樣式代碼的時候還需要加上特定的瀏覽器前綴支持也是個麻煩活，幸虧現在也是有很多工具可以輔助我們進行這樣的開發:
在生產環境下使用代碼
為了提升頁面的加載速度，在生產環境下我們應該默認使用壓縮之后的資源代碼。在壓縮的過程中，會將所有的空白與重復剔除掉從而減少整個文件的體積大小。當然，經過壓縮之后的代碼毫無可讀性，因此在開發階段我們還是應該使用普通的版本。對于CSS的壓縮有很多的現行工具:
選擇哪個工具肯定是依賴于你自己的工作流啦~
多參閱
不同的瀏覽器在兼容性上差異很大，因此如果我們可以針對我們所需要適配的瀏覽器，在上我們可以查詢某個特性的瀏覽器版本適配性，是否需要添加特定的前綴或者在某個平臺上是否存在Bug等等。不過光光使用肯定是不夠的，我們還需要使用些額外的服務來進行檢測。
:校驗
對于CSS的校驗可能不如HTML校驗或者校驗那么重要，不過在正式發布之前用Lint工具校驗一波你的CSS代碼還是很有意義的。它會告訴你代碼中潛在的錯誤，提示你一些不符合最佳實踐的代碼以及給你一些提升代碼性能的建議。就像與，也有很多可用的工具: