CSS語義化命名方式及常用命名規(guī)則

CSS語義化命名
從上圖我們可以大概看出這里有兩種CSS的命名方式:1、結(jié)構(gòu)化命名法;2、語義化命名法。
結(jié)構(gòu)化命名法:根據(jù)頁面中板塊的位置而命名,如上圖中的content-left,這時如果我們想把側(cè)邊欄sidebar放在左邊,那么這時content-left板塊卻在右邊,板塊位置與其命名完全不符,那么我們這時就要修改頁面中的以及CSS樣式中的選擇器名字了,這樣會很不方便,尤其是當頁面結(jié)構(gòu)復雜時,一會兒left,一會兒right,這樣會很不容易維護。
語義化命名法:根據(jù)頁面中模塊的功能而命名,如頁面頭部header、導航欄nav、主體main、側(cè)邊欄sidebar、底部footer、新聞列表newsList等等,這樣整個頁面看起來就比較清晰了,維護起來也比較方便。
那么具體來說,應該怎么命名呢,駝峰命名法?下劃線命名法?中華線命名法?首先我們需要做到的是要見名知義,最好是用英文單詞或通用的縮寫來命名,對于是用駝峰命名法還是劃線命名法,筆者建議兩種都使用,駝峰命名法用來區(qū)別不同的單詞,劃線用來表示從屬關系,如主導航欄,我們可以這樣命名,mainNav代表這個導航,mainNav-current表示導航處于焦點狀態(tài),如本站的導航:
html代碼如下:
另外,命名講求的就是見名知義,并且還要注意避免命名沖突,尤其是一個項目由多個人完成時,對于這個問題我們可以通過在命名前面加組員代號或姓名簡稱來解決,具體還應根據(jù)不同團隊的規(guī)范來實施。
常用的CSS命名規(guī)則
[1、文件命名]
主要的:main.css
模塊:module.css
基本共用:base.css
布局,版面:layout.css
主題:themes.css
專欄:columns.css
文字:font.css
表單:forms.css
補丁:mend.css
打?。簆rint.css
[2、注釋的寫法]
/*Footer*/
內(nèi)容區(qū)
/*EndFooter*/
[3、id的命名]
(1)頁面結(jié)構(gòu)
容器:container
頁頭:header
內(nèi)容:content/container
頁面主體:main
頁尾:footer
導航:nav
側(cè)欄:sidebar
欄目:column
頁面外圍控制整體布局寬度:wrapper
(2)導航
導航:nav
主導航:mainNav
子導航:subNav
頂導航:topNav
邊導航:sideNav
菜單:menu
子菜單:subMenu
標題:title
摘要:summary
(3)功能
標志:logo
廣告:banner
登陸:login
登錄條:loginBar
注冊:regsiter
搜索:search
功能區(qū):shop
標題:title
加入:joinUs
狀態(tài):status
按鈕:btn
滾動:scroll
標簽頁:tab
文章列表:list
提示信息:msg
當前的:current
小技巧:tips
圖標:icon
注釋:note
指南:guild
服務:service
熱點:hot
新聞:news
下載:download
投票:vote
合作伙伴:partner
友情鏈接:friendLink
版權(quán):copyright
[4、class的命名]
(1)顏色:使用顏色的名稱或者16進制代碼,如
.red{color:red;}
.f60{color:#f60;}
.ff8600{color:#ff8600;}
(2)字體大小,直接使用"font+字體大小"作為名稱,如
.font12px{font-size:12px;}
.font9pt{font-size:9pt;}
(3)對齊樣式,使用對齊目標的英文名稱或單詞縮寫,如
.fl{float:left;}
.mt20{margin-top:20px;}
(4)標題欄樣式,使用"類別+功能/分類"的方式命名,如
.titleBar-news{}/*新聞標題欄*/
.titleBar-product{}/*產(chǎn)品標題欄*/
規(guī)范化命名是為了讓其他人更方便的閱讀,希望web前端設計師們能夠遵循一下,小伙伴們感激不盡~~
相關文章
值得收藏的CSS命名規(guī)范(規(guī)則)常用的CSS命名規(guī)則
本文是小編精心給大家收藏的CSS命名規(guī)范(規(guī)則)常用的CSS命名規(guī)則 ,非常不錯,具有一定的參考借鑒價值,需要的朋友參考下吧2018-10-19- 這篇文章是腳本之家小編給大家收藏整理的關于CSS命名規(guī)則和命名方法的一些技巧,非常不錯,具有參考借鑒價值,需要的朋友參考下吧2018-01-24
- 下面小編就為大家?guī)硪黄S玫?css 命名規(guī)則(推薦)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧,祝大家游戲愉快哦2016-08-18
- 下面小編就為大家?guī)硪黄獪\談css命名規(guī)則(新手必看)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-06-29
- 寫了這么久的CSS,但大部分前端er都沒有按照良好的CSS書寫規(guī)范來寫CSS代碼,這樣會影響代碼的閱讀體驗,這里總結(jié)一個CSS書寫規(guī)范、CSS書寫順序供大家參考2014-03-06
- 常用的CSS命名規(guī)則 web標準化設計,讓你的css更規(guī)范。2011-01-18
- 命名一直是個讓我頭痛的問題,特別是那些看上去差不多的模塊,所以就得想辦法啦,我總結(jié)了下面的方法,雖然還在試驗中。希望對大家有幫助。歡迎大家提出改進的意見。2009-09-09
- 相信大家對樣式命名都多少感到困難,特別是想起一個有意義的名,更難。回顧了一下之前寫的《 樣式命名規(guī)則 》(不知道大家使用后有什么感想)結(jié)合這段時間使用上發(fā)現(xiàn)的一些2009-09-09
- 遇到一個很實際的問題:由于不想增加目錄的深度,減少磁盤尋址的時間,需要減少一些目錄層級。2009-09-09
- 網(wǎng)頁制作中規(guī)范使用DIV+CSS命名規(guī)則,可以改善優(yōu)化功效特別是團隊合作時候可以提供合作制作效率,本文主要介紹了CSS的class與id常用的命名規(guī)則,感興趣的可以了解一下2021-05-18