個人CSS架構

寫在前面

都是本身看別人的架構，本身積累下來的一些東西，這裏只是闡述本身的一些觀念。藉此但願同行交流交流下見解，共勉。

不一樣架構的CSS

業務流程不一樣，團隊配員不一樣。會有各類各樣的CSS架構。

有的會分爲：header.css，body.css，footer.css

有的會分爲：reset.css，main.css，content.css

有的會分爲：common.css，而後每一個種類再單獨劃分，好比：首頁（index.css）,分頁（page.css）

有的直接嵌入到HTML代碼中

這些處理方式，只能是適不適合，沒有真正的對錯之分。

以前作的項目CSS架構的一些問題

上一家公司作的是商城網站，最開始剛接手的時候，sAss 編寫的。那會還不是很懂sAss，簡單的瞭解下仍是挺好上手的。

坑1：每次改的小東西樣式，都得先編譯下，雖然說有自動編譯，對小調整開說不夠暢快

坑2：當時編譯後是合成到一個css文件，最終呈現的130K左右（未壓縮）

坑3：看編譯後的css文件，會發現編譯後的css層級有些會特別長，看你寫的代碼耦合程度了。

後來我索性就拋棄的Sass（可能還沒挖掘到Sass的好處吧）

一、當時的程序目錄結構是跟後臺的模塊控制器一一對應建文件夾的。我css也就根據模塊控制器劃分。好比：控制器（home）->首頁（index），分頁（page）...

二、劃分爲基礎的

base.css（包含瀏覽器reset，網站基本的header、footer、paging。。）

public_home.css（模塊home下面通用的樣式）

home_active（模塊home下面active樣式）

三、這麼架構的好處（對於這個項目）

每一個頁面最多隻會引入3個CSS文件，相對體積都比較小

對於以後協同辦公，不一樣的人員改不一樣的模塊，不會衝突

相對以前的，css架構沒有按照模塊劃分，要找到響應的點去修改樣式的並非很容易找，按模塊劃分小塊後，比較容易找到對應的代碼

新增模塊的話，編輯代碼的話比較不會和其餘的衝突

如今我是如何架構的

如今的話換了家公司作遊戲網站，可能比較傾向使用一個css文件，對於class命名規範化，統一標準。

使用單css文件，會不會隨着網站頁面增長，相對的css大小會增長。其實否則。

網站若是規劃好的話，風格一致，css是能夠控制到很是小的。可是相似上面說的商城就不適用了。

CSS內部結構劃分

下面慢慢闡述細節~~

CSS reset

 

CSS reset，爲了是保證各個瀏覽器的統一。可是有些CSS reset是不必的，有時太多的重置代碼反而會正佳頁面的重寫（overwrite）。像*｛margin個:0;padding:0｝更是不可取。像上面的reset,我只是針對該項目下經常使用的標籤簡單的重置下，有些大網站的reset寫的很細，可是不少標籤咱們並非都會用到。因此咱們只要取咱們經常使用的，須要的設置reset就能夠了。樣式精簡，並且也高效。

base 基礎模塊

咱們網站基本的框架，頂部、頭部、底部單獨提取出來，統一base命名。獲取你會以爲用base_前贅不是增長代碼的大小的？

一、我是這麼考慮的統一塊的編寫，方便之後好維護，若是是多人協助，會比較好改動，也比較明確這塊css代碼主要是作什麼用的。

二、減小名字衝突，下面會講到。

三、若是頁面改動的話，方便刪除整塊的代碼。

global公共樣式

主要是單一的一段css代碼，沒有層級。

一、通常咱們網站都會有個主體是要居中顯示就想上面的global_body三個樣式就會常常用。

二、global前綴，不知道是否是有點畫蛇添足。主要思想也是語義話class樣式名。

common經常使用屬性

就是所謂的原子類，以前一直挺排斥這種寫法的。主要緣由也是那時認爲這麼寫的話：有時後改個小樣式，都得來回看，沒辦法找到對應的css塊直接在塊上面修改。如今想這麼寫了主要是精簡代碼：

一、上面的有些樣式是否是有些是挺常常用的，何不有及的結合起來，精簡CSS大小。

二、html嵌套原子類的話，原則上最好不要超過3個，好比html看起來會顯得比較臃腫。

三、實用原子類，有助於統一效果。有時候設計獅設計的 同個色值可能誤差些色系，致使咱們吸收的色值不同。但其實設計的是要統一的。實用原子類，咱們吧經常使用的色值放一塊兒，就比較不會出現整個網站色值不統一...

public公共模塊

像類是的側邊模塊，不少個頁面都會用到，我就會用public_包起來，這個是有層級的。

命名規則

一、命名規則，語義化命名。以後的層級前贅取父級的首字母組合，再下一層級類推；例如：sort_order-》so_class-》soc_active

二、這樣的命名，減小層級（下面會講到少層級的好處）。你可能會問這樣不是會很容易命名衝突？其實只有前綴適合，是不會有這問題。我整一個網站下來，還沒碰到過。

三、層級明確方便修改，也方便加上html。有時後端的程序員可能不當心把咱們的html結構搞亂了，咱們能夠根據css的層級還原。

四、減小命名困難。

小結

準則1：對網站一樣樣式使用global_或者原子類（1~3個屬性）。

準則2：少層級，提升渲染速度。css渲染速度是從右到左的，減小層級對渲染速度是有提高的。

<div id="test">
    <ul class="test"></ul>
</div>

 

#test test{}，ul.test{}，#test ul{}，.test{}哪一個渲染速度最快？

若是單純的ul與.test PK，我還真拿不定誰的渲染速度更快些。可是，一旦牽扯到層級與標籤，我100%肯定，.test這種最直接的命名方式渲染效率是最高的。

準則3：無ID，區分開JS與CSS，寫js中若是忽然想改下ID的名稱，有得改CSS是否是很累。

準則4：少標籤，li.list{}這樣的寫法是很慢的。

多說兩句

上面寫的這些，在我實際項目使用中，暫時還沒發現什麼問題，如今團隊前端只有我一個，代碼也考慮到了多個前端的狀況。以後有啥改動在來探討下經驗。

上面的結論，都是我我的的一些觀點，經驗只談。有什麼詫異之處還忘指點一二...

每一個人的成長環境不一樣，工做環境不一樣，比然會在某些問題的見解上有許不一樣。

歡迎交流討論。

 

小tip：css的渲染速度測試：http://perfectionkills.com/profiling-css-for-fun-and-profit-optimization-notes/