css 命名分類排序方法

saucxs 發布于2019-08-29 12:32 / 698人閱讀

摘要：功能類和皮膚類樣式為表現化的樣式，請不要濫用以上順序可以按需求適當調整。

CSS內部的分類及其順序
1、重置（reset）和默認（base）（tags）：消除默認樣式和瀏覽器差異，并設置部分標簽的初始樣式，以減少后面的重復勞動！你可以根據你的網站需求設置！
統一處理：建議在這個位置統一調用背景圖（這里指多個布局或模塊或元件共用的圖）和清除浮動（這里指通用性較高的布局、模塊、元件內的清除）等統一設置處理的樣式！

2、布局（grid）（.g-）：將頁面分割為幾個大塊，通常有頭部、主體、主欄、側欄、尾部等！

3、模塊（module）（.m-）：通常是一個語義化的可以重復使用的較大的整體！比如導航、登錄、注冊、各種列表、評論、搜索等！

4、元件（unit）（.u-）：通常是一個不可再分的較為小巧的個體，通常被重復用于各種模塊中！比如按鈕、輸入框、loading、圖標等！

5、功能（function）（.f-）：為方便一些常用樣式的使用，我們將這些使用率較高的樣式剝離出來，按需使用，通常這些選擇器具有固定樣式表現，比如清除浮動等！不可濫用！

6、皮膚（skin）（.s-）：如果你需要把皮膚型的樣式抽離出來，通常為文字色、背景色（圖）、邊框色等，非換膚型網站通常只提取文字色！非換膚型網站不可濫用此類！

7、狀態（.z-）：為狀態類樣式加入前綴，統一標識，方便識別，她只能組合使用或作為后代

8、出現（.u-ipt.z-dis{}，.m-list li.z-sel{}），具體詳見命名規則的擴展相關項。
功能類和皮膚類樣式為表現化的樣式，請不要濫用！以上順序可以按需求適當調整。

統一語義理解和命名
布局（.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
版權 copyright cprt
結果 result rst
標題 title tt
按鈕 button btn
輸入 input ipt

功能（.f-）
語義命名簡寫
浮動清除 clearboth cb
向左浮動 floatleft fl
向右浮動 floatright fr
內聯塊級 inlineblock ib
文本居中 textaligncenter tac
文本居右 textalignright tar
文本居左 textalignleft tal
垂直居中 verticalalignmiddle vam
溢出隱藏 overflowhidden oh
完全消失 displaynone dn
字體大小 fontsize fs
字體粗細 fontweight fw

皮膚（.s-）
語義命名簡寫
字體顏色 fontcolor fc
背景 background bg
背景顏色 backgroundcolor bgc
背景圖片 backgroundimage bgi
背景定位 backgroundposition bgp
邊框顏色 bordercolor bdc

狀態（.z-）
語義命名簡寫
選中 selected sel
當前 current crt
顯示 show show
隱藏 hide hide
打開 open open
關閉 close close
出錯 error err
不可用 disabled dis

原文地址 http://nec.netease.com/standa...

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://www.hztianpu.com/yun/111968.html

思考 CSS 架構

摘要：思考一個好的架構一個好的架構是具有良好的可擴展性。定義手風琴的展開或收起，鏈接的有效或無效，元素的隱藏或顯示。的命名規范命名組件的方式是非常流行特別有幫助的規范。目前該領域最豐富的思想領袖之一。你有沒有在一個逐漸膨脹的 CSS 項目中感到混亂呢？保持樣式風格統一和 HTML 的影響是比較困難的：盡管修改一個較小的問題，都可能創建更多丑陋的 hack，也可能 CSS 的小改變會影響 J...

yvonne 2019-08-30 13:12 評論0 收藏0
Vue官方推薦的風格指南

摘要：官方推薦的風格指南個人筆記最近剛注意到官方多了一個風格指南的推薦。中始終用組件命名因為官方推薦風格命名，所以能用就用組件命名單詞應該是完整的單詞完整單詞帶易讀性的好處，和書寫麻煩的缺點。 Vue官方推薦的風格指南-個人筆記最近剛注意到vue官方多了一個vue風格指南的推薦。因為業務中一直用的vue，所以梳理學習一下，來增加自己代碼的規范性，效果不錯也可以安利到團隊。文檔沒有對JS...

null1145 2019-08-22 18:28 評論0 收藏0
優雅地寫css

摘要：在規則聲明的左大括號前加上一個空格。規則聲明之間用空行分隔開。根據屬性的重要性順序書寫。因此私有在前，標準在后的寫法是考慮到了以后可能會出現的問題。且最好盡量減少沒有實際作用的冗余的屬性。 https://csswizardry.com/2013/...https://css-tricks.com/bem-101/https://www.smashingmagazine....htt...

Kyxy 2019-08-29 14:06 評論0 收藏0
前端開發變量命名系列 - JavaScript篇

摘要：在寫法上最常見的兩種命名分別為和。下面列出了一些約定成俗的適用例子提交表單處理分頁頁數改變處理分頁每頁大小改變按下鍵場景二異步處理這里主要是指在寫數據層服務狀態管理中的命名，以及回調的命名規則。 JavaScript作為前端開發從業人員必須掌握的3大基礎知識中最重要的一環，也是平是接觸時間最長、寫得最多的。在開發過程中必然會遇到命名的問題，你會詞窮、糾結、惆悵嗎？本文的出現相信能夠解決...

CoXie 2019-08-26 10:42 評論0 收藏0
css名方法-命名的模塊化

摘要：基本思路是確保全局空間下一級域名不沖突，那么子域名就被限定在了獨立的局部作用域中，從而保證命名的唯一性。將命名對象劃分為組件和功能。過提高復用性，減少命名的需要，因為有的樣式直接用公共類名就能實現，不需要額外命名。基本思路是確保全局空間下一級域名不沖突，那么子域名就被限定在了獨立的局部作用域中，從而保證命名的唯一性。 BEM Block-Element-Modifier SUIT C...

vincent_xyb 2019-08-02 15:59 評論0 收藏0