我們本來希望將.active類添加到按鈕上然后使其顯示為紅色，不過在上面這個例子中很明顯起不了作用，因為button已經(jīng)以ID選擇器設置過了背景色，也就是所謂的Higher Selector Specificity。一般來說，選擇器的優(yōu)先級順序為：ID(#id) > Class(.class) > Type(header)
避免使用!important
認真的說，千萬要避免使用!important，這可能會導致你在未來的開發(fā)中無盡的屬性重寫，你應該選擇更合適的CSS選擇器。而唯一的可以使用!important屬性的場景就是當你想去復寫某些行內(nèi)樣式的時候，不過行內(nèi)樣式本身也是需要避免的。
使用text-transform屬性設置文本大寫
XHTML12345<div class="movie-poster">Star Wars: The Force Awakens</div> .movie-poster{ text-transform:uppercase;}Em, Rem, 以及 Pixel
已經(jīng)有很多關于人們應該如何使用em，rem，以及px作為元素尺寸與文本尺寸的討論，而筆者認為，這三個尺寸單位都有其適用與不適用的地方。不同的開發(fā)與項目都有其特定的設置，因此并沒有通用的規(guī)則來決定應該使用哪個單位，這里是我總結(jié)的幾個考慮:
- em – 其基本單位即為當前元素的
font-size值，經(jīng)常適用于media-queries中，em是特別適用于響應式開發(fā)中。 - rem – 其是相對于
html屬性的單位，可以保證文本段落真正的響應式尺寸特性。 - px – Pixels 并沒有任何的動態(tài)擴展性，它們往往用于描述絕對單位，并且可以在設置值與最終的顯示效果之間保留一定的一致性。
在大型項目中使用預處理器
估計你肯定聽說過 Sass, Less, PostCSS, Stylus這些預處理器與對應的語法。Preprocessors可以允許我們將未來的CSS特性應用在當前的代碼開發(fā)中，譬如變量支持、函數(shù)、嵌套式的選擇器以及很多其他的特性，這里我們以Sass為例:
CSS12345678910$accent-color:#2196F3; a { padding:10px15px; background-color:$accent-color;} a:hover { background-color:darken($accent-color,10%);}使用Autoprefixers來提升瀏覽器兼容性
使用特定的瀏覽器前綴是CSS開發(fā)中常見的工作之一，不同的瀏覽器、不同的屬性對于前綴的要求也不一樣，這就使得我們無法在編碼過程中記住所有的前綴規(guī)則。并且在寫樣式代碼的時候還需要加上特定的瀏覽器前綴支持也是個麻煩活，幸虧現(xiàn)在也是有很多工具可以輔助我們進行這樣的開發(fā):
- Online tools: Autoprefixer
- Text editor plugins: Sublime Text, Atom
- Libraries: Autoprefixer (PostCSS)
在生產(chǎn)環(huán)境下使用Minified代碼
為了提升頁面的加載速度，在生產(chǎn)環(huán)境下我們應該默認使用壓縮之后的資源代碼。在壓縮的過程中，會將所有的空白與重復剔除掉從而減少整個文件的體積大小。當然，經(jīng)過壓縮之后的代碼毫無可讀性，因此在開發(fā)階段我們還是應該使用普通的版本。對于CSS的壓縮有很多的現(xiàn)行工具: