前言
專案啟動時 css 應該注意哪些問題
檔案名規范
檔案名建議用小寫字母加中橫線的方式，為什么呢？因為這樣可讀性比較強，看起來比較清爽，像鏈接也是用這樣的方式，例如
// 地址: github的地址
https://github.com/wangjeaf/ckstyle-node
那為什么變數名不用小寫字母加小劃線的方式，如：family_tree，而是推薦用駝峰式的familyTree？C語言就喜歡用這種方式命名變數，但是由于因為下劃線比較難敲(shift + -)，所以一般用駝峰式命名變數的居多，
引入CSS檔案的link可以不用帶type=“text/css”，如下代碼：
<link rel="stylesheet" href="https://www.cnblogs.com/qidaoxueyuan/p/test.css">
因為link里面最重要的是rel這個屬性，可以不要type，但是不能沒有rel，
JS也是同樣道理，可以不用type，如下代碼：
<script src="https://www.cnblogs.com/qidaoxueyuan/p/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，可以嘗試用一下，只有你的切圖方式多樣化了，你切起圖來才能比較靈活，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/147277.html
標籤：JavaScript
上一篇：JS陣列方法（ES5、ES6）
下一篇：解決React路由URL中hash(#)部分的顯示 、browserHistory打包后瀏覽器重繪頁面出現404的問題