劃分CSS的一些方法(不同的劃分方法都有利與弊，要記住，最合適項目的才是最好的)：

①按功能劃分：將字體的CSS存放在font.css。將控制顏色的CSS存放在color.css。將控制布局的CSS存放在layout.css。

?

②按區塊劃分：將頭部的CSS存放在header.css。將底部的CSS存放在footer.css。將側欄存放在sidebar.css。將主題存放在main.css。

?

③base.css+common.css+page.css(一般情況下推薦用這種方法)：將一個網站的所有樣式按職能分成三大類base、common、page，在任何一個網頁最終樣式表現都由這三者完成。base層基本上是不用維護的，common層修改的幅度不會很大，page層代碼可能由多個工程師開發，那要如何避免沖突呢？我們可以通過命名來避免沖突，可以將CSS命名規范為駝峰命名法和劃線命名法。駝峰命名法是從第二個單詞開始，將每個單詞的首字母大寫(className、subMenu)。劃線命名法是用中劃線或者下劃線分隔(class-name、class_name)。如果項目是由多個工程師來完成，我們可以給每個人分配一個獨立的命名ID。如我叫追風，那么我們可以這樣寫(zf-sub-menu或者zf-subMenu)。

1、base層：是網站頁面樣式所需要依賴的最低層，相對穩定基本不用維護。我們一般會在這一層存放以下內容(每個瀏覽都會對一些標簽屬性有默認預設值，所以要把一些標簽屬性統一設置)。

body,div,dl,dt,dd,dl,ol,ul,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td,{margin:0;padding:0;} table{border-collapse:collapse;border-spacing:0;} ol ul{list-style:none;} /*文字排版*/ .f12{font-size:12px;} .f13{font-size:13px;} .f14{font-size:14px;} /*定位*/ .tl{text-algin:left;} .tc{text-algin:center;} .tr{text-algin:right;} /*長度高度*/ .w10{width:10px;} .h10{height:10px;} /*邊距*/ .m10{margin:10px;} .ml10px{margin-left:10px;} .p10{padding:10px;} .pr10{padding-right:10px;}

?

2、common層：是位于中間層，提供組件級的CSS。我們可以將頁面內的元素拆分為一小快一小快的功能和樣式相對獨立的“模板”，這些模板有些很少重復，有些大量重復，我們可以將大量重復的樣式提取出來存放在common.css樣式中。如一個網站要用到很多重復的標題，我們可以這樣編寫。

.h2{font-size: 14px; font-weight: bold;}

?

?

3、page層：是頁面級的，建議所有page層的css都存放在page.css里面，可以根據頁面配上注釋，分快書寫，便于維護。

/*關于我們*/.about-text{font-size:12px;}/*聯系方式*/.contact-text{font-size:14px;}

?

?

轉載于:https://www.cnblogs.com/zhuifeng/p/3758814.html

總結

以上是生活随笔為你收集整理的CSS命名方法(笔记)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。