CSS 常用命名
在前端開發(fā)中，規(guī)范使用 DIV+CSS 命名，可以增強團隊合作提高開發(fā)效率，有利于頁面后期的維護和優(yōu)化。
(1) 頁面結(jié)構(gòu)
| wrap | 外套、包裹，用于最外層 |
| wrapper | 外套，用于頁面外圍控制整體布局寬度 |
| box | 盒子，容器 |
| header | 頭部，用于頁頭部分 |
| nav | 導航，主導航 |
| main | 主要區(qū)域，內(nèi)容主體 |
| content/container | 內(nèi)容，內(nèi)容容器 |
| sidebar | 側(cè)邊欄 |
| footer | 底部，用于頁腳部分 |
(2) 功能區(qū)塊
| left center right | 左中右 |
| main-left | 左側(cè)主要布局 |
| main-right | 右側(cè)主要布局 |
| logo | 網(wǎng)站 LOGO 標志。 |
| search | 搜索輸入框。 |
| loginbar | 登錄條。 |
| regsiter | 注冊模塊。 |
| banner | 廣告，用于橫幅廣告條。 |
| menu | 菜單。 |
| submenu | 子菜單，二級菜單。 |
| top | 頂部。 |
| topnav | 頂導航。 |
| mainnav | 主導航。 |
| subnav | 子導航，二級導航。 |
| leftsideBar | 左導航。 |
| rightsideBar | 右導航。 |
| topbar | 頂部工具/菜單。 |
| bottom | 底部。 |
| bottombar | 底部工具欄。 |
| tool | 工具條。 |
| shop | 功能區(qū)，如購物車、收銀臺。 |
(3) 其他常用命名
| title | 欄目標題。 |
| summary | 摘要。 |
| hot | 熱門熱點信息，推薦。 |
| msg | 提示信息。 |
| news | 新聞。 |
| list | 列表，文章列表。 |
| piclist | 圖片列表。 |
| newslist | 新聞列表。 |
| search-output | 搜索輸出。 |
| search-results | 搜索結(jié)果。 |
| drop/dropdown | 下拉。 |
| dropmenu/dorpdown-content | 下拉菜單。 |
| scroll | 滾動。 |
| homepage | 首頁。 |
| subpage | 子頁面，二級頁面。 |
| tag | 標簽。 |
| tab | 標簽頁。 |
| tips | 小技巧。 |
| ranking | 排行。 |
| vote | 投票。 |
| bth | 按鈕。 |
| icon | 圖標。 |
| arr/arrow | 箭頭。 |
| status | 狀態(tài)。 |
| note | 注釋。 |
| skin | 皮膚。 |
| current | 當前的。 |
| active | 活躍的，有效的。 |
| download | 下載。 |
| friendLink | 友情鏈接。 |
| copyright | 版權(quán)信息。 |
| partner | 合作伙伴。 |
| joinus | 加入我們。 |
| sitemap | 網(wǎng)站地圖。 |
| siteinfo | 網(wǎng)站信息。 |
| siteinfoLegar | 法律聲明。 |
| announcement | 公告。 |
| guild | 指南。 |
| service | 服務。 |
| promotion | 推廣。 |
| blog | 博客。 |
| forum | 論壇。 |
(4) 產(chǎn)品相關(guān)命名
| keyword | 關(guān)鍵詞。 |
| products | 產(chǎn)品。 |
| products-prices | 產(chǎn)品價格。 |
| products-description | 產(chǎn)品描述。 |
| products-review | 產(chǎn)品評論。 |
| editor-review | 編輯評論。 |
| news-products | 最新產(chǎn)品。 |
| publisher | 生產(chǎn)商。 |
| screenshot | 縮略圖。 |
| faqs | 常見問題。 |
| barnding | 商標。 |
| pay | 充值。 |
| reputation | 信譽。 |
(5) 常用的文件命名
| 全局樣式 | global.css |
| 布局結(jié)構(gòu) | layout.css |
| 基本共用 | base.css |
| 綜合樣式 | style.css |
| 主要的 | master.css |
| 模塊 | module.css |
| 表單 | forms.css |
| 主題/網(wǎng)頁換膚 | themes.css |
| 字體 | font.css |
| 打印 | print.css |
| 補丁 | mend.css |
(6) ID 和 Class 命名規(guī)范
主要的、重要的、特殊的、最外層的盒子使用 ID 屬性命名，其他的都使用 class 屬性命名。
命名規(guī)則須以內(nèi)容優(yōu)先，表現(xiàn)為輔。首先根據(jù)所要呈現(xiàn)的內(nèi)容、功能來命名，如果內(nèi)容實在無法找到合適的命名，可以再根據(jù)表現(xiàn)命名。
大多數(shù)情況下，命名都使用英文單詞，可以增加代碼的可讀性，但特殊情況下，實在找不到合適的單詞時，可以使用拼音命名，但必須簡明，結(jié)構(gòu)清晰。
ID 和 Class 命名盡量全部都使用小寫，多個單詞可以使用連字符（-）鏈接，命名可以使用數(shù)字，但不能以數(shù)字開頭。
命名可以使用單詞縮寫，但必須確保是有效的縮寫，即別人能看懂，不能自定義縮寫。
轉(zhuǎn)載于:https://www.cnblogs.com/yinxiaofei/p/11194037.html
總結(jié)
- 上一篇： Linux常用20个命令
- 下一篇： react多选框