網(wǎng)頁公共命名：

• #wrapper - - 頁面外圍控制整體布局寬度
• #container或#content - - 容器，用于最外層
• #layout - - 布局
• #head，#header - - 頁頭部分
• #foot，#footer - - 頁腳部分
• #nav - - 主導(dǎo)航
• #subnav - - 二級(jí)導(dǎo)航
• #menu - - 菜單
• #submenu - - 子菜單
• #sidebar - - 側(cè)欄
• #sidebar_a,#sidebar_b - - 左邊欄或右邊欄
• #main - - 頁面主體
• #tag - - 標(biāo)簽
• #msg，#message - - 提示信息
• #tips - - 小技巧
• #vote - - 投票
• #friendlink - - 友情鏈接
• #title - - 標(biāo)題
• #summary - - 摘要
• #loginbar - - 登錄條
• #searchInput - - 搜索輸入框
• #hot - - 熱門熱點(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 - - 首頁
• #subpage - - 二級(jí)頁面子頁面
• #tool，#toolbar - - 工具條
• #drop - - 下拉
• #dorpmenu - - 下拉菜單
• #status - - 狀態(tài)
• #scroll - - 滾動(dòng)
• .tab - - 標(biāo)簽頁
• .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 - - 常見問題
• .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)頁菜單導(dǎo)航條
• 內(nèi)容 content - - 用于網(wǎng)頁中部主體
• 底部 footer - - 用于底部

CSS文件命名：

• master.css,style.css - - 主要的
• module.css - - 模塊
• base.css - - 基本共用
• layout.css - - 布局，版面
• themes.css - - 主題
• columns.css - - 專欄
• font.css - - 文字、字體
• forms.css - - 表單
• mend.css - - 補(bǔ)丁
• print.css - - 打印

命名建議：

無論是使用"."(小寫句號(hào))選擇符開頭命名，還是使用"#"(井號(hào))選擇符號(hào)開頭命名，我們最后都遵循，主要的，重要的，特殊的，最外層的盒子用“#”（井號(hào)）選擇符號(hào)開頭命名，其他都用"."(小寫句號(hào))開頭命名，同時(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)文章，希望大家以后多多支持腳本之家！