CSS的class與id常用的命名規(guī)則
發(fā)布時(shí)間：2021-05-18 16:42:06 作者：吳迪軟件開(kāi)發(fā) 
我要評(píng)論
我要評(píng)論 網(wǎng)頁(yè)制作中規(guī)范使用DIV+CSS命名規(guī)則，可以改善優(yōu)化功效特別是團(tuán)隊(duì)合作時(shí)候可以提供合作制作效率，本文主要介紹了CSS的class與id常用的命名規(guī)則，感興趣的可以了解一下
網(wǎng)頁(yè)公共命名：
- #wrapper - - 頁(yè)面外圍控制整體布局寬度
- #container或#content - - 容器，用于最外層
- #layout - - 布局
- #head，#header - - 頁(yè)頭部分
- #foot，#footer - - 頁(yè)腳部分
- #nav - - 主導(dǎo)航
- #subnav - - 二級(jí)導(dǎo)航
- #menu - - 菜單
- #submenu - - 子菜單
- #sidebar - - 側(cè)欄
- #sidebar_a,#sidebar_b - - 左邊欄或右邊欄
- #main - - 頁(yè)面主體
- #tag - - 標(biāo)簽
- #msg，#message - - 提示信息
- #tips - - 小技巧
- #vote - - 投票
- #friendlink - - 友情鏈接
- #title - - 標(biāo)題
- #summary - - 摘要
- #loginbar - - 登錄條
- #searchInput - - 搜索輸入框
- #hot - - 熱門(mén)熱點(diǎn)
- #search - - 搜索
- #search_output - - 搜索輸出和搜索結(jié)果相似
- #searchBar - - 搜索條
- #search_results - - 搜索結(jié)果
- #copyright - - 版權(quán)信息
- #branding - - 商標(biāo)
- #logo - - 網(wǎng)站LOGO標(biāo)志
- #siteinfo - - 網(wǎng)站信息
- #siteinfoLegal - - 法律聲名
- #siteinfoCredits - - 信譽(yù)
- #joinus - - 加入我們
- #partner - - 合作伙伴
- #service - - 服務(wù)
- #regsiter - - 注冊(cè)
- arr/arrow - - 箭頭
- #guild - - 指南
- #sitemap - - 網(wǎng)站地圖
- #list - - 列表
- #homeepage - - 首頁(yè)
- #subpage - - 二級(jí)頁(yè)面子頁(yè)面
- #tool，#toolbar - - 工具條
- #drop - - 下拉
- #dorpmenu - - 下拉菜單
- #status - - 狀態(tài)
- #scroll - - 滾動(dòng)
- .tab - - 標(biāo)簽頁(yè)
- .left,.right,.center - - 居中、左、右
- .news - - 新聞
- .download - - 下載
- .banner - - 廣告條（頂部廣告條）
- 電子貿(mào)易相關(guān)：
- .products - - 產(chǎn)品
- .products_prices - - 產(chǎn)品價(jià)格
- .products_description - - 產(chǎn)品描述
- .products_review - - 產(chǎn)品評(píng)論
- .editor_review - - 編輯評(píng)論
- .news_release - - 最新產(chǎn)品
- .publisher - - 生產(chǎn)商
- .screenshot - - 縮略圖
- .faqs - - 常見(jiàn)問(wèn)題
- .keyword - - 關(guān)鍵詞
- .blog - - 博客
- .forum - - 論壇
基礎(chǔ)的命名：
- 外套 wrap - - 用于最外層
- 頭部 header - - 用于頭部
- 主要內(nèi)容 main - - 用于主體內(nèi)容（中部）
- 左側(cè) main-left - - 左側(cè)布局
- 右側(cè) main-right - - 右側(cè)布局
- 導(dǎo)航條 nav - - 網(wǎng)頁(yè)菜單導(dǎo)航條
- 內(nèi)容 content - - 用于網(wǎng)頁(yè)中部主體
- 底部 footer - - 用于底部
CSS文件命名：
- master.css,style.css - - 主要的
- module.css - - 模塊
- base.css - - 基本共用
- layout.css - - 布局，版面
- themes.css - - 主題
- columns.css - - 專(zhuān)欄
- font.css - - 文字、字體
- forms.css - - 表單
- mend.css - - 補(bǔ)丁
- print.css - - 打印
命名建議：
無(wú)論是使用"."(小寫(xiě)句號(hào))選擇符開(kāi)頭命名，還是使用"#"(井號(hào))選擇符號(hào)開(kāi)頭命名，我們最后都遵循，主要的，重要的，特殊的，最外層的盒子用“#”（井號(hào)）選擇符號(hào)開(kāi)頭命名，其他都用"."(小寫(xiě)句號(hào))開(kāi)頭命名，同時(shí)考慮命名的CSS選擇器在HTML中重復(fù)使用調(diào)用。
到此這篇關(guān)于CSS的class與id常用的命名規(guī)則的文章就介紹到這了,更多相關(guān)CSS class與id命名規(guī)則內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(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ī)?lái)一篇常用的 css 命名規(guī)則(推薦)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧，祝大家游戲愉快哦2016-08-18
- 下面小編就為大家?guī)?lái)一篇淺談css命名規(guī)則(新手必看)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-06-29
- 本文搜集了一些CSS語(yǔ)義化命名方式以及命名規(guī)則。如有錯(cuò)誤或不妥之處，敬請(qǐng)指出，歡迎你提出更好的建議，加插更多的命名規(guī)范。2014-11-19
CSS書(shū)寫(xiě)規(guī)范、順序和命名規(guī)則
寫(xiě)了這么久的CSS，但大部分前端er都沒(méi)有按照良好的CSS書(shū)寫(xiě)規(guī)范來(lái)寫(xiě)CSS代碼，這樣會(huì)影響代碼的閱讀體驗(yàn)，這里總結(jié)一個(gè)CSS書(shū)寫(xiě)規(guī)范、CSS書(shū)寫(xiě)順序供大家參考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編寫(xiě)CSS代碼時(shí)樣式的命名規(guī)則
命名一直是個(gè)讓我頭痛的問(wèn)題，特別是那些看上去差不多的模塊，所以就得想辦法啦，我總結(jié)了下面的方法，雖然還在試驗(yàn)中。希望對(duì)大家有幫助。歡迎大家提出改進(jìn)的意見(jiàn)。2009-09-09- 相信大家對(duì)樣式命名都多少感到困難，特別是想起一個(gè)有意義的名，更難?；仡櫫艘幌轮皩?xiě)的《 樣式命名規(guī)則 》（不知道大家使用后有什么感想）結(jié)合這段時(shí)間使用上發(fā)現(xiàn)的一些2009-09-09
- 遇到一個(gè)很實(shí)際的問(wèn)題：由于不想增加目錄的深度，減少磁盤(pán)尋址的時(shí)間，需要減少一些目錄層級(jí)。2009-09-09