總結一下前端css樣式規范

• 前端樣式CSS 規范
• 分類的命名方法
• 統一語義理解和命名
• • 模塊（.m-）、元件（.u-）
  • 功能（.f-）
  • 皮膚（.s-）
  • 狀態（.z-）
  • sass 規范
  • • 當前選擇器的樣式屬性
• 特殊規范

前端樣式CSS 規范

通用規范

// bad padding-bottom: 0px; margin: 0em; // good padding-bottom: 0; margin: 0;

如果 CSS 可以做到，就不要使用 JS，建議并適當縮寫值，提高可讀性，特殊情況除外
“建議并適當”是因為縮寫總是會包含一系列的值，而有時候我們并不希望設置某一值，反而造成了麻煩，那么這時候你可以不縮寫，而是分開寫。
當然，在一切可以縮寫的情況下，請務必縮寫，它最大的好處就是節省了字節，便于維護，并使閱讀更加一目了然。

// bad .box{ border-top-style: none; font-family: palatino, georgia, serif; font-size: 100%; line-height: 6; padding-bottom: 2em; padding-left: 1em; padding-right: 1em; padding-top: 0; } // good .box{ border-top: 0; font: 100%/6 palatino, georgia, serif; padding: 0 1em 2em; }

聲明應該按照下表的順序：左到右，從上到下

display width font visibility height text-align position margin text-decoration float padding vertical-align clear border white-space list-style overflow color top min-width background // bad .box {font-family: 'Arial', sans-serif;border: 3px solid #ddd;left: 30%;position: absolute;text-transform: uppercase;background-color: #eee;right: 30%;isplay: block;font-size: 5rem;overflow: hidden;padding: 1em;margin: 1em; }// good .box {display: block;position: absolute;left: 30%;right: 30%;overflow: hidden;margin: 1em;padding: 1em;background-color: #eee;border: 3px solid #ddd;font-family: 'Arial', sans-serif;font-size: 5rem;text-transform: uppercase; }

元素選擇器應該避免在 scoped 中出現
官方文檔說明[1]：在 scoped 樣式中，類選擇器比元素選擇器更好，因為大量使用元素選擇器是很慢的。

分類的命名方法

使用單個字母加上"-"為前綴

布局（grid）（.g-）；
模塊（module）（.m-）；
元件（unit）（.u-）；
功能（function）（.f-）；
皮膚（skin）（.s-）；
狀態（.z-）。

統一語義理解和命名

布局（.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

sass 規范

當使用 Sass 的嵌套功能的時候，重要的是有一個明確的嵌套順序，以下內容是一個 SCSS 塊應具有的順序。

當前選擇器的樣式屬性

父級選擇器的偽類選擇器 (:first-letter, :hover, :active etc)
偽類元素 (:before and :after)
父級選擇器的聲明樣式 (.selected, .active, .enlarged etc.)
用 Sass 的上下文媒體查詢
子選擇器作為最后的部分

.product-teaser { // 1. Style attributes display: inline-block; padding: 1rem; background-color: whitesmoke; color: grey; // 2. Pseudo selectors with parent selector &:hover { color: black; } // 3. Pseudo elements with parent selector &:before { content: ""; display: block; border-top: 1px solid grey; } &:after { content: ""; display: block; border-top: 1px solid grey; } // 4. State classes with parent selector &.active { background-color: pink; color: red; // 4.2. Pseuso selector in state class selector &:hover { color: darkred; } } // 5. Contextual media queries @media screen and (max-width: 640px) {display: block; font-size: 2em; } // 6. Sub selectors > .content > .title { font-size: 2em; // 6.5. Contextual media queries in sub selector @media screen and (max-width: 640px) { letter-spacing: 2em; text-transform: uppercase; } } }

特殊規范

對用頁面級組件樣式，應該是有作用域的
對于公用組件或者全局組件庫，我們應該更傾向于選用基于 class 的 BEM 策略

<style lang='scss'></style> // bad <!-- 使用 scoped 作用域 --> <style lang='scss' scoped></style> // good <!-- 使用 BEM 約定 --> <style> // good .c-Button { border: none; border-radius: 2px; } .c-Button--close { background-color: red; } </style>

References
[1] 官方文檔說明: https://cn.vuejs.org/v2/style-guide/#scoped-中的元素選擇器-謹慎使用
[2] 風格指南: https://cn.vuejs.org/v2/style-guide/
[3] 更好的css方案: http://nec.netease.com/
[4] 前端js規范文檔: https://www.xuanfengge.com/fedoc/

總結

以上是生活随笔為你收集整理的【前端】3.总结一下前端css样式规范的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。