戲說前端之CSS編碼規範

前言

項目啓動時 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。

JS也是一樣道理，能夠不用type，以下代碼：

<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。代碼裏面縮進了七、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，能夠嘗試用一下。只有你的切圖方式多樣化了，你切起圖來才能比較靈活。