1、CSS布局命名規范
頁頭：header 如：#header{屬性:屬性值;}或.header{屬性:屬性值;}
登錄條：loginBar
標志：logo
側欄：sideBar
廣告：banner
導航：nav
子導航：subNav
菜單：menu
子菜單：subMenu
搜索：search
滾動：scroll
頁面主體：main
內容：content
標簽頁：tab
文章列表：list
提示信息：msg
小技巧：tips
欄目標題：title
加入：joinus
指南：guild
服務：service
熱點：hot
新聞：news
下載：download
注冊：regsiter
狀態：status
按鈕：btn
投票：vote
合作夥伴：partner
友情鏈接：friendLink
頁腳：footer
版權：copyRight
1.CSS的 ID 的命名
外 套： wrap
主導航：mainNav
子導航：subnav
頁 腳：footer
整個頁面： content
頁 眉：header
頁 腳：footer
商 標：label
標 題：title
主導航：mainNav(globalNav)
頂導航：topnav
邊導航：sidebar
左導航：leftsideBar
右導航：rightsideBar
旗 志：logo
標 語：banner
菜單內容1： menu1Content
菜單容量： menuContainer
子菜單：submenu
邊導航圖標：sidebarIcon
注釋： note
麵包屑：breadCrumb(即頁面所處位置導航提示)
容器： container
內容： content
搜索： search
登陸： login
功能區：shop(如購物車，收銀台)
當前的 current
2.CSS樣式文件命名如下
主要的 master.css
布局，版面 layout.css
專欄 columns.css
文字 font.css
列印樣式 print.css
主題 themes.css
2、網頁DIV+CSS怎麼規范命名.詳細一定把。比如id、css、div、文件名、不要復制的。謝謝！
命名規則主要是要求在同一維度，讓同一個團隊的成員都能明白的。當然，也有公共命名方式的，例如head，body等等的。
例如，我們做一個DIV+CSS，就板塊而言，先劃分好：頭部，通欄，左欄，右欄，內容區，底部等的大區塊。然後，採用統一的命名。
CSS的命名，劃分為：排版性區塊，功能性區塊，列表性區塊等
即：排版性：main_head,main_body,main_left,main_right,main_footer;
功能性區塊：FL(float-left)，FR，將常用的建立類；方便調用；
還有就是列表：list_x(左右排列)，list_y(上下排列的)；
而div的命名也是按上述方式，先排版，再到功能性的；
比如，頭部的<div id="main_head"></div>，如果頭部裡面的logo，那麼main_head_logo等等；
多用類，因為一個div可以同時接受多個類，所以，命名的規則就是需要簡單，明確，可讀。
3、css 給標簽命名的規則？
到底是使用「_」還是「-」,這並沒有嚴格規定，不過推薦使用「-」，
其實所有的css屬性，偽類內等等都是採取容這樣的命名方式，比如first-child, text-indent，text-align,text-decoration等等，
另外好處是有的，可惜目前體現不出來，就是用 「-」 連接可以完全兼容 |= 選擇器。
4、div樣式中如何命名才算規范
容 器：container/box
頭 部：header
主 導 航：mainNav
子 導 航：subNav
頂 導 航：topNav
網站標志：
大 廣 告：banner
頁面中部：mainBody
底 部：footer
菜 單：menu
菜單內容：menuContent
子 菜 單：subMenu
子菜單內容：subMenuContent
搜 索：search
搜索關鍵字：keyword
搜索范圍：range
標簽文字：tagTitle
標簽內容：tagContent
當前標簽：tagCurrent/currentTag
標 題：title
內 容：content
列 表：list
當前位置：currentPath
側 邊 欄：sidebar
圖 標：icon
注 釋：note
登 錄：login
注 冊：register
列 定 義：column_1of3 (三列中的第一列)
column_2of3 (三列中的第二列)
column_3of3 (三列中的第三列)
5、如何規范 css 的命名和書寫
!important firefox IE7 支持； \0 IE8支持 * IE6 IE7支持 _ IE6支持 所以寫兼容「IE7」時 後面 要有 「_」 讓「IE6」讀出。來覆蓋「回IE6」 讀出的「答*」的值； 舉個例子： #hack{ color:#0000FF\9; IE6 IE7 IE8支持; color:#0000FF\0; IE8支持; *color:#FFFF00; IE6 IE7支持; _color:#FF0000; IE6支持; 「這樣寫必須有順序」 } color:#f00!important; IE7 FireFox 支持； *color:#f00!important; 僅僅只有IE7 支持； _color:#f00\9; 僅僅只有IE6 支持； color:#f00\0; 僅僅只有IE8 支持； 你按照這樣寫hack就沒問題了，至於你說的代碼規范，一般注意css的命名，類和id的使用，還有組合標簽，盡量減少冗餘代碼
6、如何組織Html元素與如何進行CSS命名
先給其加上copy樣式display:flex；OK我們也會看到有寫的是display:box/display:flexbox；其實他們只是不同時期的規范：
新規范：2013年最新版本規范的語法 即display:flex/inline-flex;
中間版本：2011年非官方規范的語法 即display:flexbox/inline-flexbox;
老規范：2009年規范的語法 即display:box/inline-/box;
帶inline-的容器渲染為行內元素，沒帶的為塊級元素
可以看到flex近幾年幾種不同的寫法，相應的也帶來很多兼容性問題，所以在開發過程中我們要兼顧所有版本！
7、什麼是web前端開發標准
其實web前端是一個新詞彙，剛開始的時候只有美工和程序，後來隨著web的發展，對回用戶交互的需求越來越答高，就衍生出了ui（用戶交互頁面）這除了視覺效果還要有交互體驗，就需要js去實現，畢竟一個人的精力是有限的，這么多的工作不可能由一個人去實現，於是出圖就成了前端美工，切圖出html css就成了前端切圖，js就成了前端交互。一般情況下出圖和html頁面是一個人完成，而js效果由程序員去寫，因為畢竟都是程序腳本，程序員學起來相對容易一些。
8、css的書寫規范，有哪些注意點
一、「無」的哲學
佛家講究「因果報應」，有果必有應。此段看似與主題沒有血緣關系，實際講的是「因」。
我個人比較喜歡老子的道家思想，並喜歡以其思想解釋學習與工作中遇到的一些問題。例如我之前寫過的「中國古代道家思想與網頁重構的思考」一文。
老子有雲：「天下萬物生於有，有生於無」。具體解釋就是：天下萬物都是由看得見的具體事物（「有」）產生的，而看得見的具體事物（「有」）又是由看不見的，無形無狀的東西（「無」）產生的，這個看不見的「無」也就是「道」，或叫做「根」、「母」。
我們看武俠片，經常聽到「無招勝有招」這句話，這也是道家「無」之思想之體現。因為你心中沒有招式，你才能有無限的可能，生成其他的招式以克敵，即所謂以不變應萬變；相反，如果你心中牢記一套「華山劍法」，當你與人交手時，勢必按照此套路走，要是遇到相剋之劍法，結局就是一敗塗地。「無招」是一種境界，是你功夫修煉到一定程度才能領悟到的。我們這代人應該都看過李連傑主演的《倚天屠龍記魔教教主》，其中張三豐老頭教完張無忌太極拳後問他「記住了沒？」張無忌一句「全忘記了！」讓人印象深刻。這就是「無」的境界。
這種境界我是深有體會的。例如每逢大考之前，我總是把以前做過的題目全部忘掉，這樣，考試時就能思如泉湧；反而是強記題目的做法限制了發揮。這就好比發射炮彈，炮管里提前預裝了重型炸蛋，結果戰斗開始時，發現需要的是煙霧彈，此時，反而被預裝的炸蛋給阻塞限制了。打籃球也有這種體會，如果心中記得的是動作，我要這么走，然後這么做，往往表現不佳。反而是腦中什麼想法也沒有，全靠下意識行動，那真是所向披靡，得分如探囊取物。
可見，要想發揮更大，就需要「無」，把一些「限制的東西」通通去掉。沒有限制才能發揮出最大的潛能。站在最簡單，最原始的那個點上，你才能自由馳騁，應變自如。
二、名字的本質是什麼
我們有沒有思考過這么一個問題：名字的本質是什麼？
這個問題其實不難，名字本質上就是一個符號，用來區分人與人的。與符號一樣，名字本身就蘊含著很多的信息。舉個例子，我的名字：張鑫旭。其中蘊含的信息有：我老爸也姓張，我是上午太陽剛剛升起的時候出生的，我五行缺金。一個名字，如果其蘊含的信息越多，則這個名字就越獨特，也就是說，越不可能被別人使用；相反如果這個名字很普通，例如李娜、張艷之類，就會被大規模的重用，OK，這其實沒什麼大不了的，我們的唯一身份標識不是名字，而是身份證，但是，對於CSS樣式的命名，沖突與否可不是拉便便，擦個屁股就沒事的。
對於CSS，為了避免樣式沖突，我們總會給其賦予相當特殊的命名，或是在選擇符上添加HTML標記，或是使用層級。所謂一朝怕蛇咬，十年怕井繩。一旦我們經歷過樣式沖突帶來的讓人吐血的麻煩後，我們可能就會時時在避免沖突上狠做文章，所謂過猶不及，結果又是一個爛攤子，本如花似玉的黃花小閨女變成個臃腫的肥妞。例如下面人人網的CSS命名：
我想我們都希望寫出精簡高效的CSS代碼，如果CSS重用性越高，想必就越高效。這如人的名字一樣，如果名字越普通，越沒有含義，越容易被重用，所以CSS要想重用性高，就需要命名簡單。但是，簡單的命名越容易造成樣式沖突，例如.more{}。從這點上來說，重用性與樣式沖突時兩個對立的矛盾體。
不過，萬幸的是，這種矛盾並不是不可調和的。記住一些准則/方法，CSS既可以有高度的重用性，又不會有樣式沖突的困擾。下面就將介紹這些命名方法。
三、面向屬性的命名方法
我們習慣在CSS命名的時候摻雜語義，這樣可以讓代碼更易懂。例如淘寶首頁「免費注冊」按鈕上的class名稱：help-guest-regist
上面的class命名語義就很明顯，獨眼龍看告示——一目瞭然，」help-guest-regist」就是」幫助-顧客-注冊」，很nice，很人性化的命名。作為在單一的首頁上使用，我是很難挑出什麼毛病來的。
但是，從道家「無」的哲學思想來看，語義其實是對自身的一種束縛，越是語義強烈的命名越是沒有重用性（尤其是內容語義的）。舉個實際點的例子，例如人人網的右側邊欄的標題：//zxx:一般找這類反例我就喜歡找人人網還有新浪，基本上一找一個准。人人網雖然外表長得跟facebook類似，但是就CSS而言，差距不是一兩個檔次的。
這個標題的class名是」side-item-header」，樣式如下圖所示：
現在一切ok，現在設想下，如果頁面中間的模塊有個標題，其樣式也是：
{padding:0 0 8px; text-align:right;}
那你發現前面已經有一模一樣的CSS樣式後，你會怎麼辦。把中間的標題也用」side-item-header」這個class嗎？這里」side」就是表示「邊」的意思，這就意味著這個樣式用在非側邊欄就是不合理的。你能做的估計即使新命名一個class，就像是」body-item-header」，明明是同樣的CSS屬性，結果卻不能重用（即使使用標識符組合並CSS，這里的命名也是沒有重用的）。
可見命名不合理會大大限制你的CSS重用性。如何命名才能讓CSS發揮最大的重用性潛力呢？答案就是「面向屬性的命名」。這種命名就是要讓你把頁面啊設計啊什麼的通通塞到馬桶里沖走，不要管頁面什麼位置，什麼內容，there is noting, 這兒什麼都沒有，既然什麼都沒有，也就沒有了任何限制，於是CSS可以自由出入於任何地方，無限重用，而且不用擔心沖突，因為「面向屬性的命名」就是針對自身屬性的一種命名方式，只會overwrite，不會沖突。
相比很多同行都用過這樣的命名方式，只是不夠系統，不夠大膽、徹底，多淺嘗輒止，比如像是開心網，還有時光網的CSS代碼的前面一部分樣式命名：
我在「CSS樣式分離之再分離」一文中就展示過這種命名了，分離為什麼可以讓樣式的重用性放大至最大，就是因為分離後樣式的命名就是樣式本身。
就拿上面人人網的標題樣式舉例，人人網的做法是：
.side-item-header{padding:0 0 8px; text-align:right;}
要是我，我會對其進行分離。在實際項目時，text-align:right;這個屬性早就在CSS通用樣式庫裡面了，而padding:0 0 8px;則會以padding-bottom:8px;的形式放在網站通用樣式庫里了（詳細請參見我的「我是如何對網站CSS進行架構的」一文）。最後，CSS命名與樣式會如下：
.tr{text-align:right;}
.pb8{padding-bottom:8px;}
而這里分離出來的樣式又可以被其他地方使用。是不是有點「吸星大法」的感覺。
當然，如果網站本身的架構不是對每個側欄內容進行模塊化處理的話，說實話，這里標題的分離還是有點危險的。想想看，如果那天產品經理說底部padding值要改成10像素，啊哦，如果你的網站架構不合理，含這類標題的模塊到處塞，會改到你急火攻心，吐血三升而亡的。所以，對於分離，我反復強調，「千萬不要對網站通用的元素進行分離」。
所以，記住精簡高效的CSS命名准則之一：對於網站非通用元素，如果樣式簡單(1~2個屬性)，對其分離並使用面向屬性的命名方法。
四、精簡高效CSS命名之「三無原則」
此「三無原則」就是：無ID，無層級，無標簽
CSS命名就應該最簡單、最直接，直搗黃龍。沒有HTML標簽，沒有層級，這些通通滾蛋，不要。為什麼不要，有三大原因：
1. 限制重用
我們會使用層級(#test .test)，會使用標簽(ul.test)，可能是習慣(沒多想)，或是為了避免沖突。但是，我跟你說，從今以後，這種寫法讓他見鬼去吧（如果不是為了改變CSS優先順序的話）。正如開篇論述的哲學觀點，你限制越多，越抑制了CSS的重用性。例如#test .test{}這種寫法，裡面的CSS重用性多大，完全限死在了id為test的元素下，哪有重用性可言；又如ul.test，我勒個去，這個ul標簽十有八九就是裝飾用的，往這兒一放，同樣CSS樣式的div標簽可以用嗎？哭爹喊娘，眼淚汪汪也不管用啊。所以，相信我，層級啊，標簽啊什麼的，通通見鬼去吧。要知道，層級啊，標簽啊作用是什麼，是用來提高CSS優先順序，把那個字母長的讓人發毛的」!important」幹掉的。
2. CSS文件大小
這瓜子雖小，吃多了也是可以填飽肚子的。所以，你的CSS名稱不要像老太太的裹腳布一樣，搞得又臭又長，如下圖所示的人人網那個冗長的CSS命名吧：
你看名稱的位元組數已經比屬性還大了，要是這些名稱都在15字元以內，乖乖，這個CSS文件可以小個1~2K絕對沒有問題的。你看下圖這樣子的命名，這樣子的CSS排版是不是更舒服，更簡潔。
3. 降低了渲染效率
來個例子考考大家（以後我面試別人可能就會考這題），HTML如下：
<div id="test">
<ul class="test"></ul>
</div>
現在要給這里的ul標簽一個樣式，比如說padding-left:25px;那麼下面四種寫法哪個渲染速度最快？
#test .test{}， ul.test{}，#test ul{} 以及.test{}。
如果單純的ul與.test PK，我還真拿不定誰的渲染速度更快些。但是，一旦牽扯到層級與標簽，我100%確定，.test這種最直接的命名方式渲染效率是最高的。要知道，CSS渲染元素和使用JavaScript獲取頁面元素那是完全不一樣的。如果是使用JavaScript獲取DOM元素，則#test ul{}速度是最快的，先id獲取，再tag獲取，這些可都是JavaScript內置的方法。但是，CSS的渲染方式則是屬於外太空系的了，《高性能網站進階指南》一書曾提到CSS的渲染方式是「從右往左」渲染的，就拿#test ul{}舉例，先渲染頁面上所有的ul標簽，再去尋找id為test的元素，所以，出現#test div{}這種寫法的人都是傻×的，頁面先渲染id為test的元素？非也！先渲染頁面上所有的div，再去尋找其老爸有沒有id為test的元素。由於這種渲染差異最大就200~300毫秒（補充：這里的差異不是說單純一個樣式的差異，而是這些寫法泛濫的頁面的全部渲染，其渲染差異數據可以參見「翻譯-不同CSS技術及其CSS性能」一文），我們人一般是感覺不到的。所以，長久以來，也都不以為然。但是，我是絕對容不下這種寫法的，還有，要是讓我看到類似於ul#test{}這樣子的命名，不好意思，面試肯定過不了。
所以，CSS命名，只要出現了層級，出現了標簽，就是一次額外的渲染，層級越多，渲染的開銷也就越大，這就是為什麼一些前輩的文章會建議要盡量避免過深的層級。這也是為什麼要「無層級」，「無標簽」。
對於原則第一條「無ID」，其實與性能沒有多大關系，只是一般ID都與JavaScript有姦情，如果再牽扯到CSS樣式，如此復雜的三角關系，日後不好處理啊。
五、「三無原則」遺留之樣式沖突問題
正如上面講的，層級，標簽可以避免樣式沖突，雖然「面向屬性的命名」不存在沖突問題，但是，頁面上很多樣式是無法分離使用「面向屬性的命名」的，此時，一不能有層級，二不能有標簽，如果避免沖突呢？
首先，規范。項目組所有人的命名方法，習慣都要統一。其次，也是實際的做法，同一內容，使用同一前綴。就如上面的那張圖片所示，所有class同一使用od前綴，這樣，就絕不會與其他頁面的CSS產生沖突了。
現在，還隱藏著一個會讓人心存疑惑的遺留問題。如下：
上圖中，很多個鏈接全部存放在一個標簽中，全部都是a標簽，按照我的「三無原則」，不能使用層級，那麼，我這里的每個a標簽都得附一個.index_list_a{}這樣子的命名嗎，這樣子repeat下來，頁面HTML代碼豈不是很大，直接來個.index_list_box a{}，豈不是頁面HTML更加清爽。確實有理。實際上，按照我個人實踐的經驗，這類細小重復的列表元素的樣式都是比較簡單的，不要忘了，精簡高效的CSS命名准則之一的「分離與面向屬性命名」，所以，對這里的a標簽進行面向屬性的命名，權衡後期的重用性和HTML代碼開銷，還是直接針對a標簽進行簡單命名是最佳解決方案。
但是，不排除這類最內層標簽且重復元素的樣式會很復雜，此時，使用層級與標簽，或許是更好的做法，但這只存在於一些非常特殊的情況。對了，我們看看點評網是如何對最內層且重復的a標簽進行處理的，如下圖：
點評網是使用的一個大寫的」B」作為此樣式，無論這里的」B」是有background之意，還是邪惡的***之意，其命名比「面向屬性命名」更甚一籌，可以說是接近真正意義上的nothing，後面可以跟任意屬性，用在任意頁面，這就是「無」哲學，「無」的境界。//zxx:點評網的這個命名讓我聞到了一點Google的氣息
六、結語
現在，來個簡短的總結，精簡高效的CSS命名的關鍵字有「分離」，「統一前綴」，方法為「面向屬性的命名」，准則為「無層級、無標簽」。其中，「分離」是「面向屬性命名」的基礎。「面向屬性命名」和「無層級、無標簽」屬於兩個不同的系列，一個針對短命名屬性，一個針對長命名屬性。但是，兩個又互相依存。沒有「面向屬性命名」，「無層級、無標簽」命名最後是以不堪重負，HTML膨脹致死結局。而僅僅是「面向屬性命名」，前端開發人員會因維護過勞噴血而死。總之，兩者缺一不可。
上述所有內容，都是根據自己的開發總結出來的東西，個人觀點，經驗之談。每個人的成長不同，工作環境不同，必然在看到一些問題上會有差異，歡迎交流與討論。我資歷尚淺，文中難免會有不準確的地方，歡迎指正。
我的這套准則是建立在自己的一套CSS架構上的，我自己用的是非常開心的，而且效果非常明顯。但是，到底是否適用於其他同行，我不能保證，畢竟優秀的前端人員心中都有自己的那一套准則。我的個人建議是這樣的，如果您還是個CSS新手，或者對我文中提到的一些概念不太理解，我覺得全搬過來不太合適。您可以保留您之前那種一步一趨的寫法，然後在這基礎上做您確定的改進。如果真能對您CSS的學習提供一些幫助與啟示，那真是再好不過了。
其中提供了很好的證據說明，糟糕的命名對渲染性能造成的影響。
這是其中的測試圖：
可以看到，渲染性能最高的選擇器就是 .xxx a 這種形式是最好時的。這說明，「類名+標簽名」這種形式確實耗性能。本文可能戳中了不少自封人士的敏感神經，N多不屑，覺得這性能影響不值一提。OK，數據說話，以下為一段引用：
其實並不存在最快的規則，我們通常做法是把樣式模塊合並到一個文件中試用，這樣會導致其中的一部分樣式並沒有被特定的頁面用到。其實把沒用的樣式規則拿掉是優化 CSS 的最好的方法之一，因為這樣的話就可以省去多餘的樣式匹配，當然合並多個文件到一個大文件還是有好處的，比如說可以減少請求數，但是我們應該只把跟當前頁面有關的樣式打包到一起。
其實這也不算什麼新發現了，Page Speed 早就有過這條建議。不過，我還被它的效果嚇到了，去掉多餘樣式讓我節省了大約 200-300ms的選擇器匹配時間（根據Opera 調試工具的結果）。
200-300毫秒？你唬我吧！人家kangax大神可不會玩虛的~
很多網站CSS模塊都組隊放在一個CSS文件中，比方說你有10個CSS模塊，每個模塊都有一個.mole_a a{} .mole_b a{} ...的CSS命名，然後你訪問只有模塊C的頁面，結果如何？不要天真地以為這個頁面不管模塊a和模塊b的事情。正如文中所說的，CSS從右往左渲染，你的頁面是沒有.mole_a 也沒有.mole_b，到時你頁面有a標簽啊，a標簽大大的多哈！
於是，
.mole_a a{}的時候，頁面上，所有的a標簽掃一遍；
.mole_b a{}的時候，頁面上，所有的a標簽掃一遍；
.mole_b c{}的時候，頁面上，所有的a標簽掃一遍，恩，這個有效果；
.mole_b d{}的時候，頁面上，所有的a標簽掃一遍；
9、css 標准命名可以大寫嗎？？
CSS的定義不是很嚴格,但是如果你要用PHP,JS等來引用的時候最好規范一點比較好!