值得收藏的CSS命名規(guī)范(規(guī)則)常用的CSS命名規(guī)則

CSS命名規(guī)范(規(guī)則)常用的CSS命名規(guī)則
頭:header
內容:content/container
尾:footer
導航:nav
側欄:sidebar
欄目:column
頁面外圍控制整體佈局寬度:wrapper
左右中:left right center
登錄條:loginbar
標志:logo
廣告:banner
頁面主體:main
熱點:hot
新聞:news
下載:download
子導航:subnav
菜單:menu
子菜單:submenu
搜索:search
友情鏈接:friendlink
頁腳:footer
版權:copyright
滾動:scroll
內容:content
標簽:tags
文章列表:list
提示信息:msg
小技巧:tips
欄目標題:title
加入:joinus
指南:guide
服務:service
注冊:regsiter
狀態(tài):status
投票:vote
合作伙伴:partner
注釋的寫法:
/* Header */
內容區(qū)
/* End Header */
Id的命名:
1)頁面結構
容器: container
頁頭:header
內容:content/container
頁面主體:main
頁尾:footer
導航:nav
側欄:sidebar
欄目:column
頁面外圍控制整體佈局寬度:wrapper
左右中:left right center
(2)導航
導航:nav
主導航:mainnav
子導航:subnav
頂導航:topnav
邊導航:sidebar
左導航:leftsidebar
右導航:rightsidebar
菜單:menu
子菜單:submenu
標題: title
摘要: summary
(3)功能
標志:logo
廣告:banner
登陸:login
登錄條:loginbar
注冊:register
搜索:search
功能區(qū):shop
標題:title
加入:joinus
狀態(tài):status
按鈕:btn
滾動:scroll
標籤頁:tab
文章列表:list
提示信息:msg
當前的: current
小技巧:tips
圖標: icon
注釋:note
指南:guild
服務:service
熱點:hot
新聞:news
下載:download
投票:vote
合作伙伴:partner
友情鏈接:link
版權:copyright
注意事項::
1.一律小寫;
2.盡量用英文;
3.不加中橫和下劃線;
4.盡量不縮寫,除非一看就明白的單詞。
CSS樣式表文件命名
主要的 master.css
模塊 module.css
基本共用 base.css
布局、版面 layout.css
主題 themes.css
專欄 columns.css
文字 font.css
表單 forms.css
補丁 mend.css
打印 print.css
總結
以上所述是小編給大家介紹的CSS命名規(guī)范(規(guī)則)常用的CSS命名規(guī)則 ,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關文章
- 這篇文章主要介紹了CSS使用BEM命名規(guī)范實踐,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2020-09-28
- 這篇文章主要介紹了CSS樣式書寫順序和命名規(guī)范,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-06-04
好的 CSS 命名規(guī)范可以節(jié)約 Debug 時間
Debug CSS 是一種很耗時的操作,如果有良好的命名規(guī)范可以節(jié)約很多的 Debug 時間。下面通過本文給大家?guī)砹薈SS 命名規(guī)范可以節(jié)約 Debug 時間的相關知識,感興趣的朋友一起2018-01-23css 命名:BEM, scoped css, css modules 與 css-in-js詳解
這篇文章主要介紹了css 命名:BEM, scoped css, css modules 與 css-in-js的相關知識,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,,需要的朋友2020-08-24CSS規(guī)范BEM CSS和OOCSS的示例代碼詳解
這篇文章主要介紹了CSS規(guī)范BEM CSS和OOCSS的示例代碼詳解,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-06-28- BEM的意思就是塊(block)、元素(element)、修飾符(modifier),是由Yandex團隊提出的一種前端命名方法論。本文主要介紹了詳解css BEM書寫規(guī)范,非常具有實用價值,需要的2018-12-17
從QQtabBar看css命名規(guī)范BEM的詳細介紹
這篇文章主要介紹了從QQtabBar看css命名規(guī)范BEM的問題解析,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧2021-08-04