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

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

?

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

?

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

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

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。我們可以將頁面內(nèi)的元素拆分為一小快一小快的功能和樣式相對獨立的“模板”，這些模板有些很少重復，有些大量重復，我們可以將大量重復的樣式提取出來存放在common.css樣式中。如一個網(wǎng)站要用到很多重復的標題，我們可以這樣編寫。

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

?

?

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

/*關(guān)于我們*/.about-text{font-size:12px;}/*聯(lián)系方式*/.contact-text{font-size:14px;}

?

?

轉(zhuǎn)載于:https://www.cnblogs.com/zhuifeng/p/3758814.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。