CSS語(yǔ)義化命名方式及常用命名規(guī)則
我要評(píng)論
CSS語(yǔ)義化命名
從上圖我們可以大概看出這里有兩種CSS的命名方式：1、結(jié)構(gòu)化命名法；2、語(yǔ)義化命名法。
結(jié)構(gòu)化命名法：根據(jù)頁(yè)面中板塊的位置而命名，如上圖中的content-left,這時(shí)如果我們想把側(cè)邊欄sidebar放在左邊，那么這時(shí)content-left板塊卻在右邊，板塊位置與其命名完全不符，那么我們這時(shí)就要修改頁(yè)面中的以及CSS樣式中的選擇器名字了，這樣會(huì)很不方便，尤其是當(dāng)頁(yè)面結(jié)構(gòu)復(fù)雜時(shí)，一會(huì)兒left,一會(huì)兒right，這樣會(huì)很不容易維護(hù)。
語(yǔ)義化命名法：根據(jù)頁(yè)面中模塊的功能而命名，如頁(yè)面頭部header、導(dǎo)航欄nav、主體main、側(cè)邊欄sidebar、底部footer、新聞列表newsList等等，這樣整個(gè)頁(yè)面看起來就比較清晰了，維護(hù)起來也比較方便。
那么具體來說，應(yīng)該怎么命名呢，駝峰命名法？下劃線命名法？中華線命名法？首先我們需要做到的是要見名知義，最好是用英文單詞或通用的縮寫來命名，對(duì)于是用駝峰命名法還是劃線命名法，筆者建議兩種都使用，駝峰命名法用來區(qū)別不同的單詞，劃線用來表示從屬關(guān)系，如主導(dǎo)航欄，我們可以這樣命名，mainNav代表這個(gè)導(dǎo)航，mainNav-current表示導(dǎo)航處于焦點(diǎn)狀態(tài)，如本站的導(dǎo)航：
html代碼如下：
另外，命名講求的就是見名知義，并且還要注意避免命名沖突，尤其是一個(gè)項(xiàng)目由多個(gè)人完成時(shí)，對(duì)于這個(gè)問題我們可以通過在命名前面加組員代號(hào)或姓名簡(jiǎn)稱來解決，具體還應(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ǔ)丁：mend.css
打?。簆rint.css
[2、注釋的寫法]
/*Footer*/
內(nèi)容區(qū)
/*EndFooter*/
[3、id的命名]
(1)頁(yè)面結(jié)構(gòu)
容器:container
頁(yè)頭：header
內(nèi)容：content/container
頁(yè)面主體：main
頁(yè)尾：footer
導(dǎo)航：nav
側(cè)欄：sidebar
欄目：column
頁(yè)面外圍控制整體布局寬度：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
注冊(cè)：regsiter
搜索：search
功能區(qū)：shop
標(biāo)題：title
加入：joinUs
狀態(tài)：status
按鈕：btn
滾動(dòng)：scroll
標(biāo)簽頁(yè)：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)對(duì)齊樣式,使用對(duì)齊目標(biāo)的英文名稱或單詞縮寫,如
.fl{float:left;}
.mt20{margin-top:20px;}
(4)標(biāo)題欄樣式,使用"類別+功能/分類"的方式命名,如
.titleBar-news{}/*新聞標(biāo)題欄*/
.titleBar-product{}/*產(chǎn)品標(biāo)題欄*/
規(guī)范化命名是為了讓其他人更方便的閱讀，希望web前端設(shè)計(jì)師們能夠遵循一下，小伙伴們感激不盡~~
相關(guān)文章
值得收藏的CSS命名規(guī)范(規(guī)則)常用的CSS命名規(guī)則
本文是小編精心給大家收藏的CSS命名規(guī)范(規(guī)則)常用的CSS命名規(guī)則 ，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2018-10-19- 這篇文章是腳本之家小編給大家收藏整理的關(guān)于CSS命名規(guī)則和命名方法的一些技巧，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧2018-01-24
- 下面小編就為大家?guī)硪黄Ｓ玫?css 命名規(guī)則(推薦)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧，祝大家游戲愉快哦2016-08-18
- 下面小編就為大家?guī)硪黄獪\談css命名規(guī)則(新手必看)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-06-29
- 寫了這么久的CSS，但大部分前端er都沒有按照良好的CSS書寫規(guī)范來寫CSS代碼，這樣會(huì)影響代碼的閱讀體驗(yàn)，這里總結(jié)一個(gè)CSS書寫規(guī)范、CSS書寫順序供大家參考2014-03-06
常用的CSS命名規(guī)則 web標(biāo)準(zhǔn)化設(shè)計(jì)
常用的CSS命名規(guī)則 web標(biāo)準(zhǔn)化設(shè)計(jì),讓你的css更規(guī)范。2011-01-18- 命名一直是個(gè)讓我頭痛的問題，特別是那些看上去差不多的模塊，所以就得想辦法啦，我總結(jié)了下面的方法，雖然還在試驗(yàn)中。希望對(duì)大家有幫助。歡迎大家提出改進(jìn)的意見。2009-09-09
- 相信大家對(duì)樣式命名都多少感到困難，特別是想起一個(gè)有意義的名，更難?；仡櫫艘幌轮皩懙摹?樣式命名規(guī)則 》（不知道大家使用后有什么感想）結(jié)合這段時(shí)間使用上發(fā)現(xiàn)的一些2009-09-09
- 遇到一個(gè)很實(shí)際的問題：由于不想增加目錄的深度，減少磁盤尋址的時(shí)間，需要減少一些目錄層級(jí)。2009-09-09
網(wǎng)頁(yè)制作中規(guī)范使用DIV+CSS命名規(guī)則，可以改善優(yōu)化功效特別是團(tuán)隊(duì)合作時(shí)候可以提供合作制作效率，本文主要介紹了CSS的class與id常用的命名規(guī)則，感興趣的可以了解一下2021-05-18