亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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

  發(fā)布時間:2014-11-19 11:45:28   作者:佚名   我要評論
本文搜集了一些CSS語義化命名方式以及命名規(guī)則。如有錯誤或不妥之處,敬請指出,歡迎你提出更好的建議,加插更多的命名規(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代碼如下:


復制代碼
代碼如下:
</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>

另外,命名講求的就是見名知義,并且還要注意避免命名沖突,尤其是一個項目由多個人完成時,對于這個問題我們可以通過在命名前面加組員代號或姓名簡稱來解決,具體還應根據(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ī)則和命名方法

    這篇文章是腳本之家小編給大家收藏整理的關于CSS命名規(guī)則和命名方法的一些技巧,非常不錯,具有參考借鑒價值,需要的朋友參考下吧
    2018-01-24
  • 常用的 css 命名規(guī)則(推薦)

    下面小編就為大家?guī)硪黄S玫?css 命名規(guī)則(推薦)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧,祝大家游戲愉快哦
    2016-08-18
  • 淺談css命名規(guī)則(新手必看)

    下面小編就為大家?guī)硪黄獪\談css命名規(guī)則(新手必看)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2016-06-29
  • CSS書寫規(guī)范、順序和命名規(guī)則

    寫了這么久的CSS,但大部分前端er都沒有按照良好的CSS書寫規(guī)范來寫CSS代碼,這樣會影響代碼的閱讀體驗,這里總結(jié)一個CSS書寫規(guī)范、CSS書寫順序供大家參考
    2014-03-06
  • 常用的CSS命名規(guī)則 web標準化設計

    常用的CSS命名規(guī)則 web標準化設計,讓你的css更規(guī)范。
    2011-01-18
  • 編寫CSS代碼時樣式的命名規(guī)則

    命名一直是個讓我頭痛的問題,特別是那些看上去差不多的模塊,所以就得想辦法啦,我總結(jié)了下面的方法,雖然還在試驗中。希望對大家有幫助。歡迎大家提出改進的意見。
    2009-09-09
  • CSS 樣式命名規(guī)則

    相信大家對樣式命名都多少感到困難,特別是想起一個有意義的名,更難。回顧了一下之前寫的《 樣式命名規(guī)則 》(不知道大家使用后有什么感想)結(jié)合這段時間使用上發(fā)現(xiàn)的一些
    2009-09-09
  • CSS 文件命名規(guī)則

    遇到一個很實際的問題:由于不想增加目錄的深度,減少磁盤尋址的時間,需要減少一些目錄層級。
    2009-09-09
  • CSS的class與id常用的命名規(guī)則

    網(wǎng)頁制作中規(guī)范使用DIV+CSS命名規(guī)則,可以改善優(yōu)化功效特別是團隊合作時候可以提供合作制作效率,本文主要介紹了CSS的class與id常用的命名規(guī)則,感興趣的可以了解一下
    2021-05-18

最新評論