摘要:功能類和皮膚類樣式為表現(xiàn)化的樣式,請(qǐng)不要濫用以上順序可以按需求適當(dāng)調(diào)整。
CSS內(nèi)部的分類及其順序
1、重置(reset)和默認(rèn)(base)(tags):消除默認(rèn)樣式和瀏覽器差異,并設(shè)置部分標(biāo)簽的初始樣式,以減少后面的重復(fù)勞動(dòng)!你可以根據(jù)你的網(wǎng)站需求設(shè)置!
統(tǒng)一處理:建議在這個(gè)位置統(tǒng)一調(diào)用背景圖(這里指多個(gè)布局或模塊或元件共用的圖)和清除浮動(dòng)(這里指通用性較高的布局、模塊、元件內(nèi)的清除)等統(tǒng)一設(shè)置處理的樣式!
2、布局(grid)(.g-):將頁面分割為幾個(gè)大塊,通常有頭部、主體、主欄、側(cè)欄、尾部等!
3、模塊(module)(.m-):通常是一個(gè)語義化的可以重復(fù)使用的較大的整體!比如導(dǎo)航、登錄、注冊(cè)、各種列表、評(píng)論、搜索等!
4、元件(unit)(.u-):通常是一個(gè)不可再分的較為小巧的個(gè)體,通常被重復(fù)用于各種模塊中!比如按鈕、輸入框、loading、圖標(biāo)等!
5、功能(function)(.f-):為方便一些常用樣式的使用,我們將這些使用率較高的樣式剝離出來,按需使用,通常這些選擇器具有固定樣式表現(xiàn),比如清除浮動(dòng)等!不可濫用!
6、皮膚(skin)(.s-):如果你需要把皮膚型的樣式抽離出來,通常為文字色、背景色(圖)、邊框色等,非換膚型網(wǎng)站通常只提取文字色!非換膚型網(wǎng)站不可濫用此類!
7、狀態(tài)(.z-):為狀態(tài)類樣式加入前綴,統(tǒng)一標(biāo)識(shí),方便識(shí)別,她只能組合使用或作為后代
8、出現(xiàn)(.u-ipt.z-dis{},.m-list li.z-sel{}),具體詳見命名規(guī)則的擴(kuò)展相關(guān)項(xiàng)。
功能類和皮膚類樣式為表現(xiàn)化的樣式,請(qǐng)不要濫用!以上順序可以按需求適當(dāng)調(diào)整。
統(tǒng)一語義理解和命名
布局(.g-)
語義 命名 簡(jiǎn)寫
文檔 doc doc
頭部 head hd
主體 body bd
尾部 foot ft
主欄 main mn
主欄子容器 mainc mnc
側(cè)欄 side sd
側(cè)欄子容器 sidec sdc
模塊(.m-)、元件(.u-)
語義 命名 簡(jiǎn)寫
導(dǎo)航 nav nav
子導(dǎo)航 subnav snav
面包屑 crumb crm
菜單 menu menu
選項(xiàng)卡 tab tab
標(biāo)題區(qū) head/title hd/tt
內(nèi)容區(qū) body/content bd/ct
列表 list lst
表格 table tb
表單 form fm
熱點(diǎn) hot hot
排行 top top
登錄 login log
標(biāo)志 logo logo
廣告 advertise ad
搜索 search sch
幻燈 slide sld
提示 tips tips
幫助 help help
新聞 news news
下載 download dld
注冊(cè) regist reg
投票 vote vote
版權(quán) copyright cprt
結(jié)果 result rst
標(biāo)題 title tt
按鈕 button btn
輸入 input ipt
功能(.f-)
語義 命名 簡(jiǎn)寫
浮動(dòng)清除 clearboth cb
向左浮動(dòng) floatleft fl
向右浮動(dòng) floatright fr
內(nèi)聯(lián)塊級(jí) inlineblock ib
文本居中 textaligncenter tac
文本居右 textalignright tar
文本居左 textalignleft tal
垂直居中 verticalalignmiddle vam
溢出隱藏 overflowhidden oh
完全消失 displaynone dn
字體大小 fontsize fs
字體粗細(xì) fontweight fw
皮膚(.s-)
語義 命名 簡(jiǎn)寫
字體顏色 fontcolor fc
背景 background bg
背景顏色 backgroundcolor bgc
背景圖片 backgroundimage bgi
背景定位 backgroundposition bgp
邊框顏色 bordercolor bdc
狀態(tài)(.z-)
語義 命名 簡(jiǎn)寫
選中 selected sel
當(dāng)前 current crt
顯示 show show
隱藏 hide hide
打開 open open
關(guān)閉 close close
出錯(cuò) error err
不可用 disabled dis
原文地址 http://nec.netease.com/standa...
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://m.hztianpu.com/yun/111968.html
摘要:思考一個(gè)好的架構(gòu)一個(gè)好的架構(gòu)是具有良好的可擴(kuò)展性。定義手風(fēng)琴的展開或收起,鏈接的有效或無效,元素的隱藏或顯示。的命名規(guī)范命名組件的方式是非常流行特別有幫助的規(guī)范。目前該領(lǐng)域最豐富的思想領(lǐng)袖之一。 你有沒有在一個(gè)逐漸膨脹的 CSS 項(xiàng)目中感到混亂呢?保持樣式風(fēng)格統(tǒng)一和 HTML 的影響是比較困難的:盡管修改一個(gè)較小的問題,都可能創(chuàng)建更多丑陋的 hack,也可能 CSS 的小改變會(huì)影響 J...
摘要:官方推薦的風(fēng)格指南個(gè)人筆記最近剛注意到官方多了一個(gè)風(fēng)格指南的推薦。中始終用組件命名因?yàn)楣俜酵扑]風(fēng)格命名,所以能用就用組件命名單詞應(yīng)該是完整的單詞完整單詞帶易讀性的好處,和書寫麻煩的缺點(diǎn)。 Vue官方推薦的風(fēng)格指南-個(gè)人筆記 最近剛注意到vue官方多了一個(gè)vue風(fēng)格指南的推薦。 因?yàn)闃I(yè)務(wù)中一直用的vue,所以梳理學(xué)習(xí)一下,來增加自己代碼的規(guī)范性,效果不錯(cuò)也可以安利到團(tuán)隊(duì)。 文檔沒有對(duì)JS...
摘要:在規(guī)則聲明的左大括號(hào)前加上一個(gè)空格。規(guī)則聲明之間用空行分隔開。根據(jù)屬性的重要性順序書寫。因此私有在前,標(biāo)準(zhǔn)在后的寫法是考慮到了以后可能會(huì)出現(xiàn)的問題。且最好盡量減少?zèng)]有實(shí)際作用的冗余的屬性。 https://csswizardry.com/2013/...https://css-tricks.com/bem-101/https://www.smashingmagazine....htt...
摘要:在寫法上最常見的兩種命名分別為和。下面列出了一些約定成俗的適用例子提交表單處理分頁頁數(shù)改變處理分頁每頁大小改變按下鍵場(chǎng)景二異步處理這里主要是指在寫數(shù)據(jù)層服務(wù)狀態(tài)管理中的命名,以及回調(diào)的命名規(guī)則。 JavaScript作為前端開發(fā)從業(yè)人員必須掌握的3大基礎(chǔ)知識(shí)中最重要的一環(huán),也是平是接觸時(shí)間最長(zhǎng)、寫得最多的。在開發(fā)過程中必然會(huì)遇到命名的問題,你會(huì)詞窮、糾結(jié)、惆悵嗎?本文的出現(xiàn)相信能夠解決...
摘要:基本思路是確保全局空間下一級(jí)域名不沖突,那么子域名就被限定在了獨(dú)立的局部作用域中,從而保證命名的唯一性。將命名對(duì)象劃分為組件和功能。過提高復(fù)用性,減少命名的需要,因?yàn)橛械臉邮街苯佑霉差惷湍軐?shí)現(xiàn),不需要額外命名。 基本思路是確保全局空間下一級(jí)域名不沖突,那么子域名就被限定在了獨(dú)立的局部作用域中,從而保證命名的唯一性。 BEM Block-Element-Modifier SUIT C...
閱讀 2641·2021-09-01 10:41
閱讀 1506·2019-08-30 14:12
閱讀 582·2019-08-29 12:32
閱讀 2915·2019-08-29 12:25
閱讀 2999·2019-08-28 18:30
閱讀 1765·2019-08-26 11:47
閱讀 1072·2019-08-26 10:35
閱讀 2673·2019-08-23 18:06