大家在寫css的時候，經(jīng)常會遇到關(guān)于命名的問題。頁面上成百甚至上千的class或者id，我們就會越來越感到困擾。 所以，這樣我們就很有必要整理自己的一套命名規(guī)范。這里我就說說我自己的命

專注于為中小企業(yè)提供成都做網(wǎng)站、網(wǎng)站制作、成都外貿(mào)網(wǎng)站建設(shè)服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)永德免費做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動了1000多家企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設(shè)實現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

  大家在寫css的時候，經(jīng)常會遇到關(guān)于命名的問題。頁面上成百甚至上千的class或者id，我們就會越來越感到困擾。

所以，這樣我們就很有必要整理自己的一套命名規(guī)范。這里我就說說我自己的命名規(guī)范。

類-class
類名，我通常用橫線就像這樣

.head-logo { … } /頁面頭部logo的類名/
.nav-li { … } /導(dǎo)航條上list的類名/
.link-panel-h3 { … } /鏈接模塊的標(biāo)題/

ID
id,我通常用駝峰式命名。在我的理解里駝峰式命名專門用在獨一無二的變量上。所以我也經(jīng)常在javascrpt中采用這個方法來定義變量。

#navLastLi { … } /獲取到導(dǎo)航條的最后一個list/
#panelContent { … } /模塊的正文部分/
#sidebarFooter { … } /側(cè)邊欄底部模塊/

那么，頁面模塊很多，我們可以這樣整理

常用的CSS命名規(guī)則
頭：header??內(nèi)容：content/container??尾：footer??導(dǎo)航：nav??側(cè)欄：sidebar

欄目：column??頁面外圍控制整體布局寬度：wrapper??左右中：left right center

登錄條：loginbar??標(biāo)志：logo??廣告：banner??頁面主體：main??熱點：hot

新聞：news??下載：download??子導(dǎo)航：subnav??菜單：menu

子菜單：submenu??搜索：search??友情鏈接：friendlink??頁腳：footer

版權(quán)：copyright??滾動：scroll??內(nèi)容：content??標(biāo)簽頁：tab

文章列表：list??提示信息：msg??小技巧：tips??欄目標(biāo)題：title

加入：joinus??指南：guild??服務(wù)：service??注冊：regsiter

狀態(tài)：status??投票：vote??合作伙伴：partner

(1)頁面結(jié)構(gòu)

容器: container??頁頭：header??內(nèi)容：content/container

頁面主體：main??頁尾：footer??導(dǎo)航：nav

側(cè)欄：sidebar??欄目：column??頁面外圍控制整體布局寬度：wrapper

左右中：left right center

(2)導(dǎo)航

導(dǎo)航：nav??主導(dǎo)航：mainbav??子導(dǎo)航：subnav

頂導(dǎo)航：topnav??邊導(dǎo)航：sidebar??左導(dǎo)航：leftsidebar

右導(dǎo)航：rightsidebar??菜單：menu??子菜單：submenu

標(biāo)題: title??摘要: summary

(3)功能

標(biāo)志：logo??廣告：banner??登陸：login??登錄條：loginbar

注冊：regsiter??搜索：search??功能區(qū)：shop

標(biāo)題：title??加入：joinus ?狀態(tài)：status??按鈕：btn

滾動：scroll??標(biāo)簽頁：tab??文章列表：list??提示信息：msg

當(dāng)前的: current??小技巧：tips??圖標(biāo): icon??注釋：note

指南：guild?服務(wù)：service??熱點：hot??新聞：news

下載：download??投票：vote??合作伙伴：partner

友情鏈接：link??版權(quán)：copyright

我們在使用腳本進(jìn)行頁面動態(tài)變換的時候，推薦的方法就是修改類名或者修改id名來修改顯示樣式，當(dāng)然，常用的還是類名class。

修改類名-取名規(guī)范
(1)顏色:使用顏色的名稱或者16進(jìn)制代碼,如

.red { color: red; }

.f60 { color: #f60; }

.ff8600 { color: #ff8600; }

(2)字體大小,直接使用’font+字體大小’作為名稱,如

.font12px { font-size: 12px; }

.font9pt {font-size: 9pt; }

(3)對齊樣式,使用對齊目標(biāo)的英文名稱,如

.left { float:left; }

.bottom { float:bottom; }

(4)標(biāo)題欄樣式,使用’類別+功能’的方式命名,如

.barnews { }

.barproduct { }

注意事項::
1.一律小寫;

2.盡量用英文;

3.不加中杠和下劃線;

4.盡量不縮寫，除非一看就明白的單詞.

常用css文件名
主要的 master.css??模塊 module.css??基本共用 base.css

布局，版面 layout.css??主題 themes.css??專欄 columns.css

文字 font.css??表單 forms.css??補(bǔ)丁 mend.css??打印 print.css

根據(jù)頁面分欄結(jié)構(gòu)的命名
CSS代碼的命名慣例一直是大家熱門討論的話題。通過分析一個流行三欄布局中的必要元素，來為大家講解關(guān)于使用語義化方法替代結(jié)構(gòu)化方法來命名CSS類的建議和指導(dǎo)。

  CSS類命名的語義化VS結(jié)構(gòu)化方式

  一般而言，CSS類名的語義化聲明方式應(yīng)當(dāng)考慮你的頁面中某個相對元素的”用意”，獨立于它的”定位”或確切的特性(結(jié)構(gòu)化方式)。像left-bar, red-text, small-title…這些都屬于結(jié)構(gòu)化定義的例子。

讓我們看看下面這個例子:

…而現(xiàn)在我們想把頁面中的元素調(diào)換一下位置，如果你使用的是結(jié)構(gòu)化方式(1)，那么你就要把所有CSS類名重新進(jìn)行定義，因為它們的位置變了。在布局(3)中，我們看到元素都倒轉(zhuǎn)了: right-bar 現(xiàn)在成了 “l(fā)eft-bar”，而 left-content 成了 “right-content”。如果你使用語義化方式則避免了此類問題。

換句話說，使用語義化方式的話，你在修改網(wǎng)站布局的時候可以僅僅修改相關(guān)CSS類的屬性即可，而不用修改它們的類名了，如果網(wǎng)站的代碼很龐大，這將節(jié)省大量的時間。

關(guān)于語義化的一些建議:
在開始之前，我想推薦兩種簡單的編寫較好的CSS代碼的指導(dǎo)方針:

1、為CSS類名定義的時候，盡量使用小寫字母，如果有兩個以上的單詞，在每個單詞之間使用”-”符或單詞首字母大寫(第一個單詞除外)。如:”main-content”或”mainContent”。

2、優(yōu)化CSS代碼，僅創(chuàng)建關(guān)鍵主要的CSS類并重新為子元素使用符合HTML標(biāo)準(zhǔn)的標(biāo)簽(h2, h3, p, ul, li, blockquote,…)，例如,不要使用這種哦你那個方式:

<div class=”main”>
<div class=”main-title”>…</div>
<div class=”main-paragraph”>…</div>
</div>

而要這樣寫:

<div class=“main”>
<h2>…</h2>
<p>…</p>
</div>

三欄布局中使用語義化方式的例子
讓我們來通過這個簡單的例子講解一下如何為經(jīng)典的三欄布局使用語義化方式命名:

使用語義化方式為CSS命名可以像這樣:

#container{…}
/—- Top section —-/
#header{…}
#navbar{…}
/—- Main —-/
#menu{…}
#main{…}
#sidebar{…}
/—- Footer —-/
#footer{…}

Container
“#container“ 就是將你頁面中的所有元素包在一起的部分，這部分你還可以命名為: ”wrapper“, “wrap“, “page“.

Header
“#header” 是網(wǎng)站頁面的頭部區(qū)域，一般來講，它包含網(wǎng)站的logo和一些其他元素。這部分你還可以命名為:”top“, “l(fā)ogo“, “page-header” (或 pageHeader).

Navbar
“#navbar“等同于橫向的導(dǎo)航欄，是最典型的網(wǎng)頁元素。這部分你還可以命名為:“nav”, “navigation”, “nav-wrapper”.

Menu
“#Menu”區(qū)域包含一般的鏈接和菜單，這部分你還可以命名為: ”sub-nav ”, “l(fā)inks“.

Main
“#Main”是網(wǎng)站的主要區(qū)域，如果是博客的話它將包含你的日志。這部分你還可以命名為: ”content“, “main-content” (or “mainContent”)。

Sidebar
“#Sidebar” 部分可以包含網(wǎng)站的次要內(nèi)容，比如最近更新內(nèi)容列表、關(guān)于網(wǎng)站的介紹或廣告元素等…這部分你還可以命名為: ”sub-nav“, “side-panel“, “secondary-content“.

Footer
“#Footer”包含網(wǎng)站的一些附加信息，這部分你還可以命名為: ”copyright“.

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

新聞名稱：CSS命名規(guī)則規(guī)范整理-創(chuàng)新互聯(lián)
網(wǎng)頁地址：http://jinyejixie.com/article34/dipope.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站制作、營銷型網(wǎng)站建設(shè)、面包屑導(dǎo)航、網(wǎng)站建設(shè)、用戶體驗、服務(wù)器托管

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)