前言
專案啓動時 css 應該注意哪些問題
檔名規範
檔名建議用小寫字母加中橫線的方式。爲什麼呢？因爲這樣可讀性比較強，看起來比較清爽，像鏈接也是用這樣的方式，例如
// 地址: github的地址
https://github.com/wangjeaf/ckstyle-node
那爲什麼變數名不用小寫字母加小劃線的方式，如：family_tree，而是推薦用駝峯式的familyTree？C語言就喜歡用這種方式命名變數，但是由於因爲下劃線比較難敲(shift + -)，所以一般用駝峯式命名變數的居多。
引入css檔案的link可以不用帶type=「text/css」，如下程式碼：
<link rel="stylesheet" href="test.css">
因爲link裏面最重要的是rel這個屬性，可以不要type，但是不能沒有rel。
<script src="test.js"></script>
沒有相容性問題。
屬性書寫順序
屬性的書寫順序對於瀏覽器來說沒有區別，除了優先順序覆蓋之外。但是如果順序保持一致的話，掃一眼可以很快地知道這個選擇器有什麼型別的屬性影響了它，所以一般要把比較重要的屬性放前面。比較建議的順序是這樣的：
你可能會覺得我平時差不多就是這麼寫的，那麼說明你有一個比較好的素養。並且我覺得規則不是死，有時候可以靈活，就像你可能會用transform寫居中，然後把left/top/transform挨在一起寫了，我覺得這也是無可厚非的，因爲這樣可以讓人一眼看出你要幹嘛。
不要使用樣式特點命名
有些人可能喜歡用樣式的特點命名，例如：
.red-font{
color: red;
}
.p1{
font-size: 18px;
}
.p2{
font-size: 16px;
}
然後你在它的html裏面就會看到套了大量的p1/p2/bold-font/right-wrap之類的類名，這種是不可取的，假設你搞了個red-font，下次UI要改顏色，那你寫的這個類名就沒用了，或者是在響應式裏面在右邊的排版在小屏的時候就會跑到下面 下麪去，那你取個right就沒用了。有些人先把UI整體瞄了一下，發現UI大概用了3種字號18px/16px/14px，於是寫3個類p1/p2/p3，不同的字號就套不同的類。這乍一看，好像寫得挺通用，但是當你看他的html時，你就瘋掉了，這些p1/p2/p3的類加起寫了有二三十個，密密麻麻的。我覺得如果要這樣寫的話還不如藉助標題標籤如下：
.house-info h2{
font-size: 18px;
}
.house-info h3{
font-size: 16px;
}
因爲把它的字號加大了，很可能是一個標題，所以爲什麼不直接用標題標籤，不能僅僅擔心因爲標題標籤會有預設樣式。
類的命名應當使用它所表示的邏輯意義，如signup-success-toast、request-demo、agent-portrait、 company-logo等等。
如果有些樣式你覺得真的特別通用，那可以把它當作一個類，如clearfix，或者有些動畫效果，有幾個地方都要用到，我覺得這種較爲複雜並且通用的可以單獨作爲一個類。但是還是趨向於使用意義命名。
不要使用hack
有些人在寫css的時候使用一些hack的方法註釋，如下：
.agent-name{
float: left;
_margin: 10px;
//padding: 20px;
}
這種方法的原理是由於//或者_開頭的css屬性瀏覽器不認識，於是就被忽略，分號是屬性終止符，從//到分號的內容都被瀏覽器忽略，但是這種註釋是不提倡的，要麼把.css檔案改成.less或者.scss檔案，這樣就可以愉快地用//註釋了。
還有一些專門針對特定瀏覽器的hack，如*開頭的屬性是對IE6的hack。不管怎麼樣都不要使用hack。
選擇器的效能
選擇器一般不要寫超過3個，有些人寫sass或者less喜歡套很多層，如下：
.listings-list{
ul{
li{
.bed-bath{
p{
color: #505050;
}
}
}
}}
一個容器就套一層，一層一層地套下來，最底層套了七八層，這麼長的選擇器的效能比較差，因爲Chrome裏面是用遞回從最後一個選擇器一直匹配到第一個，選擇器越多，匹配的時間就越長，所以時間會比較長，並且程式碼的可讀性也比較差，爲看到最裏面的p標籤的樣式是哪個的我得一層層地往上看，看是哪裏的p。程式碼裏面縮進了7、8層看起來也比較累。
一般只要寫兩三個比較重要的選擇器就好了，不用每個容器都寫進去，重要的目標元素套上class或者id。
最後一個選擇器的標籤的應該少用，因爲如果你寫個.container div{}的話，那麼頁面上所有的div第一次都匹配中，因爲它是從右往左匹配的，這樣的寫的好處是html不用套很多的類，但是擴充套件性不好，所以不要輕易這樣用，如果要用需要仔細考慮，如果合適才使用，最起碼不能濫用。
避免選擇器誤選
有時候會出現自己的樣式受到其他人樣式的影響，或者自己的樣式不小心影響了別人，有可能是因爲類的命名和別人一樣，還有可能是選擇器寫的範圍太廣，例如有人在他自己的頁面寫了：
* {
box-sizing: border-box;
}
結果導致在他個頁面的公用彈框樣式掛了。一方面不要寫*全域性匹配選擇器，不管從效能還是影響範圍來說都太大了，例如在一個有3個子選擇器的選擇器：
.house-info .key-detail .location{}
在三個容器裏面，*都是適用的，並且有些屬性是會繼承的，像font-size，會導致這三個容器都有font-size，然後一層層地覆蓋。
還有一種情況是濫用了:first-child、:nth-of-type這種選擇器，使用這種選擇器的後果是擴充套件性不好，只要html改了，就會導致樣式不管用了，或者影響到了其它無關元素。但是並不是說這種選擇器就不能用，只要用得好還是挺方便的，例如說在所有的li裏面要讓最後一個li的margin-left小一點，那麼可以這麼寫：
.listing-list li:last-child{
margin-left: 10px;
}
這可能比你直接套一個類強。但是不管怎麼樣，不能濫用，合適的時候才使用，而不是僅僅爲了少寫類名。
減少覆蓋
覆蓋是一種常用的策略，也是一種不太優雅的方式，如下程式碼，爲了讓每個house中間的20px的間距，但是第一個house不要有間距：
.house{
margin-top: 20px;
}
.house:first-child{
margin-top: 0;
}
其實可以改成這樣：
.house + .house{
margin-top: 20px;
}
只有前面有.house的.house才能 纔能命中這個選擇器，由於第一個.house前面沒有，所以無法命中，這樣看起來程式碼就簡潔多了。
還有這種情況，如下程式碼所示：
.request-demo input{
border: 1px solid #282828;
}
.request-demo input[type=submit]{
border: none;
}
其實可以藉助一個:not選擇器：
.request-demo input:not([type=sbumit]){
border: 1px solid #282828;
}
這樣看起來程式碼也優雅了很多。
有一種覆蓋是值得的，那就是響應式裏面小屏的樣式覆蓋大屏，如下：
@media (min-width: 1025px){
.container{
width: 1080px;
margin: 0 auto;
}}
我一開始是就是這麼寫的，爲了遵循減少覆蓋原則，但是後來發現這種實踐不好，程式碼容易亂，寫成覆蓋的好處在於可以在瀏覽器明顯地看到，小屏的樣式是覆蓋了哪個大屏的樣式，這個在大屏的時候又是怎麼樣的。
少用!important
important用來覆蓋屬性，特別是在css裏面用來覆蓋style裡的屬性，但是important還是少用爲妙。有時候你爲了偷懶直接寫個!important，以爲這個的優先順序是最高的了，往往螳螂捕蟬，黃雀在後，很可能過不了多久又要再寫一個優先順序更高的覆蓋掉，這樣就略顯尷尬了。所以能少用還是少用。如果要覆蓋還是先通過增加新增選擇器權重的方式。
排版規範
不管是js/css，縮排都調成4個空格，如果你用的sublime，在軟體的右下角有一個Tab Size，選擇Tab Size 4，然後再把最上面的Indent Using Spaces勾上，這樣，當你打一個tab鍵縮排的時候就會自動轉換成4個空格。如果你使用vim，新增或者編輯~/.vimrc檔案新增一行：
:set tabstop=4 也會自動把縮排改成4個空格，其它編輯器自行查詢設定方法。因爲\t在不同的編輯器上顯示長度不一樣，而改成空格可以在不同人的電腦上格式保持一致。
多個選擇器共用一個樣式集，每個選擇器要各佔一行，如下：
.landing-pop,
.samll-pop-outer,
.signup-success{
display: none;
}
每個屬性名字冒號後面要帶個空格，~、>、+選擇器的前後也要帶一個空格：
.listings > li{
float: left;
}
正確使用background和img
顯示一張圖片有兩種方式，可以通過設定CSS的background-image，或者是使用img標籤，究竟什麼時候用哪種呢？
如果是頭圖等直接展示的圖片還是要img標籤，如果是做爲背景圖就使用background，因爲使用img可以寫個alt屬性增強seo，而背景圖那種本身不需要seo。雖然background有一個一個background-position: center center很好，但是頭圖那種還是使用img吧，自己去居中吧，不然做不了seo。
響應式的規範
響應式開發最不好不要雜合使用rem，文字字號要麼全部使用rem，要麼不要用，也不要使用transform: scale去縮小，因爲被縮小的字號看起來會有點奇怪，別人都是14px，而你變成了13.231px，小了一點。響應式的原則一般是保持中間或者兩邊間距不變，然後縮小主體內容的寬度。
少用inline-block佈局
有些人喜歡用inline-block，特別是剛開始學切圖的人，因爲block會換行，而inline-block不會換行還具有盒模型，因此inline-block用得很順手，而float比較複雜，還要處理清除浮動之類的問題。如下佈局：
應該寫li，然後讓li float，如果你讓li display:inline-block也可以達到目的。但是inline-block用得多了可能會有一些奇怪的問題，你通常要在一個inline-block的元素裏面套block的元素，inline-block是行內元素，而block是塊級元素，這兩者終究有點差別。這種應該用float/flex會更自然，如果你float用順手了你會發現比inline-block好多了，並且更加專業。如果你沒怎麼用過flex ，那你可以嘗試換一下使用flex，如果你沒怎麼用過float，可以嘗試用一下。只有你的切圖方式多樣化了，你切起圖來才能 纔能比較靈活。