DIV+CSS命名規(guī)范全記錄
我要評(píng)論我們開(kāi)發(fā)CSS+DIV網(wǎng)頁(yè)（Xhtml）時(shí)候,比較困惑和糾結(jié)的事就是CSS命名，特別是新手不知道什么地方該如何命名，怎樣命名才是好的方法。
命名規(guī)則說(shuō)明：
1）、所有的命名最好都小寫(xiě)
2）、屬性的值一定要用雙引號(hào)("")括起來(lái)，且一定要有值如class="divcss5",id="divcss5"
3）、每個(gè)標(biāo)簽都要有開(kāi)始和結(jié)束，且要有正確的層次，排版有規(guī)律工整
4）、空元素要有結(jié)束的tag或于開(kāi)始的tag后加上"/"
5）、表現(xiàn)與結(jié)構(gòu)完全分離，代碼中不涉及任何的表現(xiàn)元素，如style、font、bgColor、border等
6）、定義，應(yīng)遵循從大到小的原則，體現(xiàn)文檔的結(jié)構(gòu)，并有利于搜索引擎的查詢。
7）、給每一個(gè)表格和表單加上一個(gè)唯一的、結(jié)構(gòu)標(biāo)記id
8）、給圖片加上alt標(biāo)簽
9）、盡量使用英文命名原則
10）、盡量不縮寫(xiě)，除非一看就明白的單詞
相對(duì)網(wǎng)頁(yè)外層重要部分CSS樣式命名：
外套wrap------------------用于最外層頭部header----------------用于頭部主要內(nèi)容main------------用于主體內(nèi)容（中部）左側(cè)main-left-------------左側(cè)布局右側(cè)main-right-----------右側(cè)布局導(dǎo)航條nav-----------------網(wǎng)頁(yè)菜單導(dǎo)航條內(nèi)容content---------------用于網(wǎng)頁(yè)中部主體底部footer-----------------用于底部
DIV+CSS命名參考表：
以下為CSS樣式命名與CSS文件命名參考表，DIV CSS命名集合：
CSS樣式命名 |
說(shuō)明 |
|
網(wǎng)頁(yè)公共命名 |
|
|
#wrapper |
頁(yè)面外圍控制整體布局寬度 |
|
#container或#content |
容器,用于最外層 |
|
#layout |
布局 |
|
#head,#header |
頁(yè)頭部分 |
|
#foot,#footer |
頁(yè)腳部分 |
|
#nav |
主導(dǎo)航 |
|
#subnav |
二級(jí)導(dǎo)航 |
|
#menu |
菜單 |
|
#submenu |
子菜單 |
|
#sideBar |
側(cè)欄 |
|
#sidebar_a,#sidebar_b |
左邊欄或右邊欄 |
|
#main |
頁(yè)面主體 |
|
#tag |
標(biāo)簽 |
|
#msg#message |
提示信息 |
|
#tips |
小技巧 |
|
#vote |
投票 |
|
#friendlink |
友情連接 |
|
#title |
標(biāo)題 |
|
#summary |
摘要 |
|
#loginbar |
登錄條 |
|
#searchInput |
搜索輸入框 |
|
#hot |
熱門(mén)熱點(diǎn) |
|
#search |
搜索 |
|
#search_output |
搜索輸出和搜索結(jié)果相似 |
|
#searchBar |
搜索條 |
|
#search_results |
搜索結(jié)果 |
|
#copyright |
版權(quán)信息 |
|
#branding |
商標(biāo) |
|
#logo |
網(wǎng)站LOGO標(biāo)志 |
|
#siteinfo |
網(wǎng)站信息 |
|
#siteinfoLegal |
法律聲明 |
|
#siteinfoCredits |
信譽(yù) |
|
#joinus |
加入我們 |
|
#partner |
合作伙伴 |
|
#service |
服務(wù) |
|
#regsiter |
注冊(cè) |
|
arr/arrow |
箭頭 |
|
#guild |
指南 |
|
#sitemap |
網(wǎng)站地圖 |
|
#list |
列表 |
|
#homepage |
首頁(yè) |
|
#subpage |
二級(jí)頁(yè)面子頁(yè)面 |
|
#tool,#toolbar |
工具條 |
|
#drop |
下拉 |
|
#dorpmenu |
下拉菜單 |
|
#status |
狀態(tài) |
|
#scroll |
滾動(dòng) |
|
.tab |
標(biāo)簽頁(yè) |
|
.left.right.center |
居左、中、右 |
|
.news |
新聞 |
|
.download |
下載 |
|
.banner |
廣告條(頂部廣告條) |
|
電子貿(mào)易相關(guān) |
|
|
.products |
產(chǎn)品 |
|
.products_prices |
產(chǎn)品價(jià)格 |
|
.products_description |
產(chǎn)品描述 |
|
.products_review |
產(chǎn)品評(píng)論 |
|
.editor_review |
編輯評(píng)論 |
|
.news_release |
最新產(chǎn)品 |
|
.publisher |
生產(chǎn)商 |
|
.screenshot |
縮略圖 |
|
.faqs |
常見(jiàn)問(wèn)題 |
|
.keyword |
關(guān)鍵詞 |
|
.blog |
博客 |
|
.forum |
論壇 |
CSS文件命名 |
說(shuō)明 |
|
master.css,style.css |
主要的 |
|
module.css |
模塊 |
|
base.css |
基本共用 |
|
layout.css |
布局，版面 |
|
themes.css |
主題 |
|
columns.css |
專欄 |
|
font.css |
文字、字體 |
|
forms.css |
表單 |
|
mend.css |
補(bǔ)丁 |
|
print.css |
打印 |
相關(guān)文章
CSS樣式書(shū)寫(xiě)順序和命名規(guī)范及注意事項(xiàng)
這篇文章主要介紹了CSS樣式書(shū)寫(xiě)順序和命名規(guī)范,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-06-04- 這篇文章是腳本之家小編給大家收藏整理的關(guān)于CSS命名規(guī)則和命名方法的一些技巧，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧2018-01-24
好的 CSS 命名規(guī)范可以節(jié)約 Debug 時(shí)間
Debug CSS 是一種很耗時(shí)的操作，如果有良好的命名規(guī)范可以節(jié)約很多的 Debug 時(shí)間。下面通過(guò)本文給大家?guī)?lái)了CSS 命名規(guī)范可以節(jié)約 Debug 時(shí)間的相關(guān)知識(shí)，感興趣的朋友一起2018-01-23- 下面小編就為大家?guī)?lái)一篇常用的 css 命名規(guī)則(推薦)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧，祝大家游戲愉快哦2016-08-18
- 下面小編就為大家?guī)?lái)一篇淺談css命名規(guī)則(新手必看)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-06-29
css 命名：BEM, scoped css, css modules 與 css-in-js詳解
這篇文章主要介紹了css 命名：BEM, scoped css, css modules 與 css-in-js的相關(guān)知識(shí)，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，,需要的朋友2020-08-24
