CSS語義化命名方式及常用命名規(guī)則的方法，相信很多沒有經(jīng)驗(yàn)的人對此束手無策，為此本文總結(jié)了問題出現(xiàn)的原因和解決方法，通過這篇文章希望你能解決這個問題。

10年的奉節(jié)網(wǎng)站建設(shè)經(jīng)驗(yàn)，針對設(shè)計、前端、開發(fā)、售后、文案、推廣等六對一服務(wù)，響應(yīng)快，48小時及時工作處理。營銷型網(wǎng)站建設(shè)的優(yōu)勢是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動調(diào)整奉節(jié)建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計，從而大程度地提升瀏覽體驗(yàn)。創(chuàng)新互聯(lián)公司從事“奉節(jié)網(wǎng)站設(shè)計”,“奉節(jié)網(wǎng)站推廣”以來，每個客戶項(xiàng)目都認(rèn)真落實(shí)執(zhí)行。

CSS語義化命名

從上圖我們可以大概看出這里有兩種CSS的命名方式：1、結(jié)構(gòu)化命名法；2、語義化命名法。

結(jié)構(gòu)化命名法：根據(jù)頁面中板塊的位置而命名，如上圖中的content-left,這時如果我們想把側(cè)邊欄sidebar放在左邊，那么這時content-left板塊卻在右邊，板塊位置與其命名完全不符，那么我們這時就要修改頁面中的以及CSS樣式中的選擇器名字了，這樣會很不方便，尤其是當(dāng)頁面結(jié)構(gòu)復(fù)雜時，一會兒left,一會兒right，這樣會很不容易維護(hù)。

語義化命名法：根據(jù)頁面中模塊的功能而命名，如頁面頭部header、導(dǎo)航欄nav、主體main、側(cè)邊欄sidebar、底部footer、新聞列表newsList等等，這樣整個頁面看起來就比較清晰了，維護(hù)起來也比較方便。

那么具體來說，應(yīng)該怎么命名呢，駝峰命名法？下劃線命名法？中華線命名法？首先我們需要做到的是要見名知義，最好是用英文單詞或通用的縮寫來命名，對于是用駝峰命名法還是劃線命名法，筆者建議兩種都使用，駝峰命名法用來區(qū)別不同的單詞，劃線用來表示從屬關(guān)系，如主導(dǎo)航欄，我們可以這樣命名，mainNav代表這個導(dǎo)航，mainNav-current表示導(dǎo)航處于焦點(diǎn)狀態(tài)，

html代碼如下：

</p>
<p><ulclass="mainNav"> </p>
<p><liclass="mainNav-current"><ahref="#"title="首頁">首頁</a></li> </p>
<p><li><ahref="#"title="HTML5">HTML5</a></li> </p>
<p><li><ahref="#"title="CSS3">CSS3</a></li> </p>
<p><li><ahref="#"title="Javascript">Javascript</a></li> </p>
<p>... </p>
<p></ul>

另外，命名講求的就是見名知義，并且還要注意避免命名沖突，尤其是一個項(xiàng)目由多個人完成時，對于這個問題我們可以通過在命名前面加組員代號或姓名簡稱來解決，具體還應(yīng)根據(jù)不同團(tuán)隊(duì)的規(guī)范來實(shí)施。

常用的CSS命名規(guī)則

[1、文件命名]

主要的：main.css

模塊：module.css

基本共用：base.css

布局，版面：layout.css

主題：themes.css

專欄：columns.css

文字：font.css

表單：forms.css

補(bǔ)?。簃end.css

打?。簆rint.css

[2、注釋的寫法]

/*Footer*/

內(nèi)容區(qū)

/*EndFooter*/

[3、id的命名]

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

容器:container

頁頭：header

內(nèi)容：content/container

頁面主體：main

頁尾：footer

導(dǎo)航：nav

側(cè)欄：sidebar

欄目：column

頁面外圍控制整體布局寬度：wrapper

(2)導(dǎo)航

導(dǎo)航：nav

主導(dǎo)航：mainNav

子導(dǎo)航：subNav

頂導(dǎo)航：topNav

邊導(dǎo)航：sideNav

菜單：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

熱點(diǎn)：hot

新聞：news

下載：download

投票：vote

合作伙伴：partner

友情鏈接：friendLink

版權(quán)：copyright

[4、class的命名]

(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)的英文名稱或單詞縮寫,如

.fl{float:left;}

.mt20{margin-top:20px;}

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

.titleBar-news{}/*新聞標(biāo)題欄*/

.titleBar-product{}/*產(chǎn)品標(biāo)題欄*/

看完上述內(nèi)容，你們掌握CSS語義化命名方式及常用命名規(guī)則的方法的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

當(dāng)前標(biāo)題：CSS語義化命名方式及常用命名規(guī)則的方法
標(biāo)題URL：http://aaarwkj.com/article42/iggcec.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供面包屑導(dǎo)航、網(wǎng)站內(nèi)鏈、虛擬主機(jī)、小程序開發(fā)、網(wǎng)站策劃、ChatGPT

廣告

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