CSS代碼命名規則的示例分析

小編給大家分享一下CSS代碼命名規則的示例分析，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

1. 技倆屬性軌范

單個名目劃定下的屬性在抄寫時，應按恪守進行分組，組之間需要有一個空行。
同時要以Positioning Model > Box Model > Typographic > Visual 的法式謄寫，提高代碼的可讀性。

Positioning Model 組織方式、地位，相關屬性涵概：position, top, z-index, display, float等
Box Model 盒模子，干系屬性涵概：width, height, padding, margin，border,overflow
Typographic 文本排版，關系屬性包含：font, line-height, text-align
Visual 視覺外面，相關屬性包羅：color, bac千克round, list-style, transform, animation

2. CSS選擇器定名規則

分類式定名法(在前端組件化下很是重要)

構造（grid）（.g-）：將頁面瓜分為幾個大塊，通常有頭部、主體、主欄、側欄、尾部等！
模塊（module）（.m-）：一樣平常是一個語義化的可以反復運用的較大的整體！比方導航、登錄、注冊等
元件（unit）（.u-）：通常是一個不成再分的較為小巧的個別，一般被重復用于種種模塊中！例如按鈕、輸 入框、loading等！
違抗（function）（.f-）：為方便一些經常使用名目的應用，咱們將這些使用率較高的樣式剝離出來，按需運用，通常這些決意器具有靜止花色顯示，譬喻肅除浮動等！不行濫用！
形態（.z-）：為狀態類樣式問鼎前綴，統一標識，利便識別，她只能組合運用或作為后裔呈現（.u-ipt.z-dis{}，.m-list li.z-sel{}）
javascript(.j-)：.j-將被專用于JS失掉節點，請勿應用.j-定義格局
不要應用 " _ " 下劃線來命名css
能良好的分辨javascript變量名
輸入的時辰少按一個shift鍵
涉獵器兼容性問題（比如運用_tips的選擇器定名，在IE6是無效的）
id采用駝峰式命名(不要亂花id)
scss中的變量、函數、夾雜、placeholder采用駝峰式命名
相斥語義的不同類定名辦法：
直接加數字或字母區分便可（如：.m-list、.m-list2、.m-list3等，凡是列表模塊，但是是完全紛歧樣的模塊）。別的舉例：.f-fw0、.f-fw1、.s-fc0、.s-fc1、.m-logo2、.m-logo3、u-btn、u-btn2等等。
定名方式(BEM)：類-體（例：g-head）、類-體-潤飾符（例：u-btn-active）
后裔選擇器：體-潤色符即可（例：.m-page .cut{}）注：尊長抉擇器不要在頁面組織中應用，因為凈化的可能性較大；

3. 最好寫法

/* 這是某個模塊 */ .
m-nav{}/* 模塊容器 */ .
m-nav li,.m-nav a{}/* 先共性 美化組合 */ .
m-nav li{}/* 后共性 語義化標簽決意器 */ .
m-nav a{}/* 后特點中的共性 按結構法度模范 */ .
m-nav a.a1{}/* 后共性中的本色 */ 
.m-nav a.a2{}/* 后賦性中的本性 */ .
m-nav .z-crt a{}/* 交互外形變化 */ .
m-nav .z-crt a.a1{} .m-nav .z-crt a.a2{} 
.m-nav .btn{}/* 楷模子弟決議器 */ 
.m-nav .btn-1{}/* 楷模前輩決意器擴大 */ 
.m-nav .btn-dis{}/* 楷模后世抉擇器擴大（形態） */ 
.m-nav .btn.z-dis{}/* 感導同上，請二選一（假定可以不兼容IE6時運用） */ 
.m-nav .m-sch{}/* 牽制外部另外模塊身分 */ 
.m-nav .u-sel{}/* 管教外部此外元件位置 */ 
.m-nav-1{}/* 模塊精簡 */ 
.m-nav-1 li{} .m-nav-dis{}/* 模塊精簡（形態） */ .
m-nav.z-dis{}/* 勸化同上，請二選一（假設可以不兼容IE6時應用） */

4. 匹敵語義明白和命名

構造(.g-)

語義 命名 簡寫
文檔 doc doc
頭部 head hd
主體 body bd
尾部 foot ft
主欄 main mn
主欄子容器 mainc mnc
側欄 side sd
側欄子容器 sidec sdc
盒容器 wrap/box wrap/box
模塊（.m-）、元件（.u-）

語義 命名 簡寫
導航 nav nav
子導航 subnav snav
面包屑 crumb crm
菜單 menu menu
選項卡 tab tab
問題區 head/title hd/tt
內容區 body/content bd/ct
列表 list lst
表格 table tb
表單 form fm
熱門 hot hot
排行 top top
登錄 login log
標志 logo logo
推廣 advertise ad
搜索 search sch
幻燈 slide sld
提示 tips tips
救助 help help
新聞 news news
下載 download dld
注冊 regist reg
投票 vote vote
版權 vcopyright cprt
后果 result rst
標題問題 title tt
按鈕 button btn
輸出 input ipt
堅守（.f-）

語義 定名 簡寫
肅除浮動 clearboth cb
左浮動 floatleft fl
內聯 inlineblock ib
文本居中 textaligncenter tac
垂直居中 verticalalignmiddle vam
溢出潛伏 overflowhidden oh
純粹消失 displaynone dn
字體大小 fontsize fz
字體粗細 fontweight fs
皮膚（.s-）

語義 定名 簡寫
字體色調 fontcolor fc
配景顏色 bac公斤roundcolor bgc
邊框色彩 bordercolor bdc
形狀(.z-)

語義 命名 簡寫
選中 selected sel
當前 current crt
顯示 show show
潛伏 hide hide
掀開 open open
關閉 close vclose
蛻化 error err
弗成用 disabled dis

5. 把穩事宜

一概大寫，中劃線
盡量無庸縮寫
不要輕易運用id
去掉小數點后頭的0： 0.9rem => .9rem
使用簡寫：margin： 0 1rem 3rem

以上是“CSS代碼命名規則的示例分析”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！