當前位置：
首頁 >
css书写规范
發布時間：2024/1/17
35
豆豆
在書寫css樣式的時候總是無意中就寫亂了，無論是命名或者是樣式的書寫順序，這里做一個總結，提醒自己在書寫css的時候時刻注意，大家可以參考哈。
1. 樣式屬性順序
單個樣式規則下的屬性在書寫時，應按功能進行分組，組之間需要有一個空行。
同時要以Positioning Model > Box Model > Typographic > Visual 的順序書寫，提高代碼的可讀性。
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 背景顏色 backgroundcolor bgc 邊框顏色 bordercolor bdc -
狀態(.z-)
語義命名簡寫 選中 selected sel 當前 current crt 顯示 show show 隱藏 hide hide 打開 open open 關閉 close vclose 出錯 error err 不可用 disabled dis
5. 注意事項
本文大部分內容參考自網易前端規范：http://nec.netease.com/standard/css-sort.html
轉載于:https://www.cnblogs.com/makai/p/9002898.html
創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎總結
- 上一篇： CRM客户关系管理系统（十三）
- 下一篇： Jenkins搭建Nodejs自动化测试