在這里想與你分享一個由各大CSS網(wǎng)站總結(jié)推薦的20個有用的規(guī)則和實踐經(jīng)驗集合。
有一些是面向CSS初學者的，有一些知識點是進階型的。
希望每個人通過這篇文章都能學到對自己有用的知識。
1、注意外邊距折疊
與其他大多數(shù)屬性不同，上下的垂直外邊距margin在同時存在時會發(fā)生外邊距折疊。
這意味著當一個元素的下邊緣接觸到另一個元素的上邊緣時，只會保留兩個margin值中較大的那個。
例如：
HTML
<div class="square red"></div>
<div class="square blue"></div>
CSS
.square {
width: 80px;
height: 80px;
}
.red {
background-color: #F44336;
margin-bottom: 40px;
}
.blue {
background-color: #2196F3;
margin-top: 30px;
}
紅色方塊與藍色方塊的上下間距是40px，而不是70px。
解決外邊距折疊的方法有很多種，對于初學者來說最簡單的就是所有元素只使用一個方向上的margin，比如上下的外邊距我們統(tǒng)統(tǒng)使用margin-bottom。
2、使用flex進行布局
flex彈性布局的出現(xiàn)是有原因的。
浮動和inline-block雖然也能實現(xiàn)很多的布局效果，但它們本質(zhì)上是文本和塊元素布局的工具，而不是面向整個網(wǎng)頁的。
flex可以很容易的按照我們預(yù)期的方式創(chuàng)建布局。
flex擁有一組面向“彈性容器”的屬性和一組面向“彈性項目”的屬性，一旦你學會了它們，做任何響應(yīng)式布局都是小菜一碟。
目前各類瀏覽器的最新版本對flex的支持性也是沒有任何問題的，所以你應(yīng)該多多使用flex布局。
.container {
display: flex;
}
3、重置元素的CSS樣式
盡管這些年來有了很大的改善，但是不同瀏覽器對于各種元素的默認樣式仍然存在很大的差異。
解決這個問題的最佳辦法是在CSS開頭為所有的元素設(shè)置通用的CSS Reset重置代碼，這樣你是在沒有任何默認內(nèi)外邊距的基礎(chǔ)上進行布局，于是所產(chǎn)生的效果也就是統(tǒng)一的。
網(wǎng)絡(luò)上已經(jīng)有成熟的CSS代碼庫為我們解決瀏覽器不一致問題，例如normalize.css、minireset和ress，你可以在你的項目中引用它們。
如果你不想使用第三方代碼庫，你可以使用下面的樣式來進行一個非?；镜腃SS reset：
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
上面的代碼看起來有些霸道，將所有元素的內(nèi)外邊距都設(shè)置為0了，而正是沒有了這些默認內(nèi)外邊距的影響，使得我們后面的CSS設(shè)置會更加的容易。
同時box-sizing: border-box也是一個很棒的設(shè)置，我們緊接著就會介紹它。
4、所有元素設(shè)置為Border-box
大多數(shù)初學者都不知道box-sizing這個屬性，但實際上它非常重要。
box-sizing屬性有兩個值：
content-box（默認） - 當我們設(shè)置一個元素的寬度或高度時，就是設(shè)置它的內(nèi)容的大小。所有的padding和邊框值都不包含。例如，一個div的寬度設(shè)置為100，padding為10，于是這個元素將占用120像素（100+2*10）。
border-box - padding與邊框包含在元素的寬度或高度中，一個設(shè)置為width: 100px和box-sizing:
border-box的div元素，他的總寬度就是100px，無論它的內(nèi)邊距和邊框有多少。
將所有元素都設(shè)置為border-box，可以更輕松的改變元素的大小，而不必擔心padding或者border值會將元素撐開變形或者換行顯示。
5、將圖片作為背景
當給頁面添加圖片時，尤其需要圖片是響應(yīng)式的時候，最好使用background屬性來引入圖片，而不是<img>標簽。
這看起來使用圖片會更復(fù)雜，但實際上它會使設(shè)置圖片的樣式變得更加容易。
有了background-size, background-position和其它的屬性，保持或改變圖片原始尺寸和寬高比會更方便。
舉個例子：
HTML
<section>
<p>Img element</p>
<img src="https://tutorialzine.com/media/2016/08/bicycle.jpg" alt="bicycle">
</section>
<section>
<p>Div with background image</p>
<div></div>
</section>
CSS
img {
width: 300px;
height: 200px;
}
div {
width: 300px;
height: 200px;
background: url('https://tutorialzine.com/media/2016/08/bicycle.jpg');
background-position: center center;
background-size: cover;
}
section{
float: left;
margin: 15px;
}
background引入圖片的一個缺點是頁面的Web可訪問性會受到輕微的影響，因為屏幕閱讀器和搜索引擎無法正確地獲取到圖像。
這個問題可以通過CSS object-fit屬性解決，到目前為止除了IE瀏覽器其他的瀏覽器都可以使用object-fit。
6、更好的表格邊框
HTML中的表格總是很難看的。它們很難做成響應(yīng)式的，而且總體上很難改變樣式。
例如，如果要向表格及其單元格添加簡單的邊框，則最可能的結(jié)果是：
如你所見，有很多重復(fù)的邊框，看起來很不好看。
這里有一個快速的方法來刪除所有的雙倍邊框：border-collapse: collapse，只需設(shè)置這個屬性后，表格的邊框看起來就順眼多了：
7、更友好的注釋
CSS也許不是一種編程語言，但其代碼仍然需要文檔化。
添加一些簡單的注釋可以將代碼分類區(qū)分，方便自己和同事后期維護。
對于大的區(qū)域劃分或者重要的組件可以使用下面的注釋樣式：
/*---------------
#Header
---------------*/
header { }
header nav { }
/*---------------
#Slideshow
---------------*/
.slideshow { }
對于細節(jié)和不太重要的樣式可以使用單行的注釋方式：
/* Footer Buttons */
.footer button { }
.footer button:hover { }
另外，請記住，CSS中沒有//注釋，只有/**/注釋：
/* 正確 */
p {
padding: 15px;
/*border: 1px solid #222;*/
}
/* 錯誤 */
p {
padding: 15px;
// border: 1px solid #222;
}
8、短橫線命名
當class或者ID包含多個單詞時，應(yīng)使用連字符（-），CSS不區(qū)分大小寫，因此不能使用駝峰式命名。
同樣，CSS中也不建議使用下劃線連接的命名方式。
/* 正確 */
.footer-column-left { }
/* 錯誤 */
.footerColumnLeft { }
.footer_column_left { }
當涉及到命名時，您還可以考慮BEM，它遵循一組原則，提供基于組件并增加一致性的開發(fā)方法。
9、不要重復(fù)設(shè)置
大多數(shù)CSS屬性的值都是從DOM樹中向上一級的元素繼承的，因此才被命名為級聯(lián)樣式表。
以font屬性為例-它總是從父級繼承的，您不必為頁面上的每個元素都單獨設(shè)置。
只需將要設(shè)置的字體樣式添加到<html>或<body>元素中，然后讓它們自動向下繼承。
html {
font: normal 16px/1.4 sans-serif;
}
然后我們就可以統(tǒng)一的一次改變頁面上所有的文字樣式了。
當然，CSS中并不是所有的屬性都是可繼承的，對于這些屬性我們?nèi)匀恍枰诿總€元素上單獨設(shè)置。
10、使用transform屬性來創(chuàng)建動畫
最好使用transform()函數(shù)來創(chuàng)建元素的位移或大小動畫，盡量不要直接改變元素的width，height以及l(fā)eft/top/bottom/right屬性值。
下面的例子中，我們給.ball元素添加了一個從左向右的移動動畫。
推薦使用transform: translateX()函數(shù)來代替left屬性。
.ball {
left: 50px;
transition: 0.4s ease-out;
}
/* 不建議 */
.ball.slide-out {
left: 500px;
}
/* 建議 */
.ball.slide-out {
transform: translateX(450px);
}
transform以及它的所有函數(shù)（translate, rotate, scale等）幾乎沒有瀏覽器兼容性問題，可以隨意使用。
11、不要DIY，多使用代碼庫
CSS社區(qū)非常龐大，不斷有新的代碼庫出現(xiàn)。
它們有各種用途，從微小的片段到構(gòu)建響應(yīng)式應(yīng)用程序的整體框架。其中大多數(shù)也是開源的。
下一次當你面對一個CSS問題時，在你試圖費盡全力解決它之前，檢查一下Github或Codepen上是否已經(jīng)有了一個可用的解決方案。
12、保持選擇器的低權(quán)重
css的選擇器并不都是平等的。
當初學習CSS時，我總是認為選擇器會覆蓋它上面的所有內(nèi)容。
然而，情況并非如此，就如我們在下面的示例中所說明的：
HTML
<a href='#' id='blue-btn' class="active">按鈕</a>
CSS
a{
color: #fff;
padding: 15px;
}
a#blue-btn {
background-color: blue;
}
a.active {
background-color: red;
}
我們希望.active類中設(shè)置的樣式會生效使按鈕變?yōu)榧t色。
但是它并不會起作用，因為按鈕在上面有一個ID選擇器，它同樣設(shè)置了background-color，ID選擇器具有更高的權(quán)重，所以按鈕的顏色是藍色的。
選擇器的權(quán)重大小規(guī)格如下：
ID (#id) > Class (.class) > Type (例如 header)
權(quán)重也會疊加，于是a#button.active的權(quán)重要比a#button的高。
一開始就使用高權(quán)重的選擇器會導(dǎo)致你在后面的維護中不斷的使用更高權(quán)重的選擇器，最終選擇使用!important，這是非常不推薦的，具體的原因緊接著就會講到。
13、不要使用!important
說真的，不要使用!important。現(xiàn)在看起來可以快速的解決問題，但最終可能會導(dǎo)致大量的重寫。
相反，我們應(yīng)該花點時間找到CSS選擇器不工作的原因并更改它。
唯一可以使用的!important的地方是當您想要覆蓋HTML中的內(nèi)聯(lián)樣式時，但是內(nèi)聯(lián)樣式同樣也是一個壞的習慣，應(yīng)該盡量的避免。
14、使用text-transform轉(zhuǎn)換字母為大寫
本條適用于英文環(huán)境，不適合中文
在HTML中，可以將某個單詞全部寫為大寫字母來表達強調(diào)的含義。
比如：
<h3>Employees MUST wear a helmet!</h3>
如果你需要將某段文字全部轉(zhuǎn)化為大寫，我們可以在HTML中正常書寫，然后通過CSS來轉(zhuǎn)化。這樣可以保持上下文內(nèi)容的一致性。
<div class="movie-poster">Star Wars: The Force Awakens</div>
.movie-poster {
text-transform: uppercase;
}
15、em, rem與px
設(shè)置元素與文本的大小應(yīng)該用哪種單位，em，rem，還是px？
一直以來都有很多的爭論。事實是，這三種選擇都是可行的，都有其利弊。
在什么時候在什么項目使用哪種單位是沒有一個定論的，開發(fā)人員的習慣不同，項目的要求不同，都可能會使用不同的單位。
然而，雖然沒有固定的規(guī)則，但是每種單位還是有一些要注意的地方的：
em - 設(shè)置元素為1em，其大小與父元素的font-size屬性有關(guān)。這個單位用于媒體查詢中，特別適用于響應(yīng)式開發(fā)，但是由于em單位在每一級中都是相對于父元素進行計算的，所以要得出某個子元素em單位對應(yīng)的px值，有時候是很麻煩的。
rem - 相對于<html>元素的font-size大小計算，rem使得統(tǒng)一改變頁面上的所有標題和段落文本大小變得非常容易。
px - 像素單位是最精確的，但是不適用于自適應(yīng)的設(shè)計。px單位是可靠的，并且易于理解，我們可以精細的控制元素的大小和移動到1px。
最重要的是，不要害怕嘗試，嘗試所有方法，看看最適合什么。
有時候，em和rem可以節(jié)省很多工作，尤其是在構(gòu)建響應(yīng)式頁面時。
16、對于大型項目使用預(yù)處理器
你一定聽說過它們 - Sass, Less, PostCSS, Stylus。
預(yù)處理器是CSS的未來。它們提供諸如變量、CSS函數(shù)、選擇器嵌套和許多其他很酷的功能，使CSS代碼更易于管理，特別是在大型項目中。
舉個簡單的例子，下面是一個SASS代碼的片段，它使用到了一些CSS變量和函數(shù)：
$accent-color: #2196F3;
a {
padding: 10px 15px;
background-color: $accent-color;
}
a:hover {
background-color: darken($accent-color,10%);
}
預(yù)處理器的唯一的不足之處是它們?nèi)稳恍枰幾g成普通的CSS。而CSS推出的自定義屬性則是真正意義上的預(yù)處理。
17、使用AutoPrefixer達到更好的兼容性
瀏覽器前綴是CSS中最煩人的事情之一，每個屬性需要的前綴是不一致的，你永遠不知道到底需要哪一個，如果真的要把它一個一個手動添加到樣式表中，那無疑是一個無聊的噩夢。
值得慶幸的是，有工具可以自動為我們提供添加瀏覽器前綴的功能，甚至可以決定需要支持哪些瀏覽器：
在線工具：Autoprefixer
文本編輯器插件：Sublime Text, Atom
代碼庫：Autoprefixer (PostCSS)
18、壓縮CSS文件
為了提高網(wǎng)站和應(yīng)用程序的加載速度和頁面負載，您應(yīng)該使用壓縮后的資源。
壓縮版本的文件將刪除所有空白和重復(fù)，從而減少總文件的體積。
當然，這個過程也會使樣式表完全不可讀，所以要在生產(chǎn)環(huán)境中使用.min版本，同時為開發(fā)保留常規(guī)版本。
有許多不同的方法來壓縮CSS代碼：
在線工具：CSS Minifier, CSS Compressor
文本編輯器插件：Sublime Text, Atom
代碼庫：Minfiy (PHP), CSSO, CSSNano (PostCSS, Grunt, Gulp)
根據(jù)您的工作流程，可以使用上述任何一種方式。
19、Caniuse
對于CSS的屬性Web瀏覽器仍然存在許多兼容性不一致的地方。
使用caniuse來檢查您使用的屬性是否得到了廣泛的支持？
是否需要前綴？
或者是否在某個瀏覽器中使用有要注意的地方？
有了caniuse你在寫CSS時就會更得心應(yīng)手了。
20、驗證
驗證CSS可能不像驗證HTML或JavaScript代碼那么重要，但是通過工具運行一下你的代碼仍然非常有用。
它會告訴你是否犯了任何錯誤，警告錯誤的用法，并為您提供改進代碼的提示。
就像壓縮和Autoprefixer一樣，有免費的工具可以利用：
在線工具：W3 Validator, CSS Lint
文本編輯器插件：Sublime Text, Atom
代碼庫：stylelint (Node.js, PostCSS), css-validator (Node.js)
