CSS代碼命名規(guī)則的示例分析

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

成都創(chuàng)新互聯(lián)是一家專注于成都做網(wǎng)站、網(wǎng)站制作、成都外貿(mào)網(wǎng)站建設(shè)與策劃設(shè)計(jì),海州網(wǎng)站建設(shè)哪家好?成都創(chuàng)新互聯(lián)做網(wǎng)站,專注于網(wǎng)站建設(shè)10余年,網(wǎng)設(shè)計(jì)領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:海州等地區(qū)。海州做網(wǎng)站價(jià)格咨詢:13518219792

1. 技倆屬性軌范

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

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

2. CSS選擇器定名規(guī)則

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

構(gòu)造（grid）（.g-）：將頁面瓜分為幾個(gè)大塊，通常有頭部、主體、主欄、側(cè)欄、尾部等！
模塊（module）（.m-）：一樣平常是一個(gè)語義化的可以反復(fù)運(yùn)用的較大的整體！比方導(dǎo)航、登錄、注冊等
元件（unit）（.u-）：通常是一個(gè)不成再分的較為小巧的個(gè)別，一般被重復(fù)用于種種模塊中！例如按鈕、輸 入框、loading等！
違抗（function）（.f-）：為方便一些經(jīng)常使用名目的應(yīng)用，咱們將這些使用率較高的樣式剝離出來，按需運(yùn)用，通常這些決意器具有靜止花色顯示，譬喻肅除浮動(dòng)等！不行濫用！
形態(tài)（.z-）：為狀態(tài)類樣式問鼎前綴，統(tǒng)一標(biāo)識，利便識別，她只能組合運(yùn)用或作為后裔呈現(xiàn)（.u-ipt.z-dis{}，.m-list li.z-sel{}）
javascript(.j-)：.j-將被專用于JS失掉節(jié)點(diǎn)，請勿應(yīng)用.j-定義格局
不要應(yīng)用 " _ " 下劃線來命名css
能良好的分辨javascript變量名
輸入的時(shí)辰少按一個(gè)shift鍵
涉獵器兼容性問題（比如運(yùn)用_tips的選擇器定名，在IE6是無效的）
id采用駝峰式命名(不要亂花id)
scss中的變量、函數(shù)、夾雜、placeholder采用駝峰式命名
相斥語義的不同類定名辦法：
直接加數(shù)字或字母區(qū)分便可（如：.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{}）注：尊長抉擇器不要在頁面組織中應(yīng)用，因?yàn)閮艋目赡苄暂^大；

3. 最好寫法

/* 這是某個(gè)模塊 */ .
m-nav{}/* 模塊容器 */ .
m-nav li,.m-nav a{}/* 先共性 美化組合 */ .
m-nav li{}/* 后共性 語義化標(biāo)簽決意器 */ .
m-nav a{}/* 后特點(diǎn)中的共性 按結(jié)構(gòu)法度模范 */ .
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{}/* 楷模前輩決意器擴(kuò)大 */ 
.m-nav .btn-dis{}/* 楷模后世抉擇器擴(kuò)大（形態(tài)） */ 
.m-nav .btn.z-dis{}/* 感導(dǎo)同上，請二選一（假定可以不兼容IE6時(shí)運(yùn)用） */ 
.m-nav .m-sch{}/* 牽制外部另外模塊身分 */ 
.m-nav .u-sel{}/* 管教外部此外元件位置 */ 
.m-nav-1{}/* 模塊精簡 */ 
.m-nav-1 li{} .m-nav-dis{}/* 模塊精簡（形態(tài)） */ .
m-nav.z-dis{}/* 勸化同上，請二選一（假設(shè)可以不兼容IE6時(shí)應(yīng)用） */

4. 匹敵語義明白和命名

構(gòu)造(.g-)

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

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

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

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

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

5. 把穩(wěn)事宜

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

以上是“CSS代碼命名規(guī)則的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

標(biāo)題名稱：CSS代碼命名規(guī)則的示例分析
網(wǎng)頁地址：http://bm7419.com/article38/jdijpp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供服務(wù)器托管、自適應(yīng)網(wǎng)站、網(wǎng)站設(shè)計(jì)、商城網(wǎng)站、動(dòng)態(tài)網(wǎng)站、網(wǎng)站排名

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)