1 注釋規(guī)范
2 縮進/空格/換行規(guī)范
- 每個縮進使用4個空格嫁佳，不允許使用 2 個空格 或 tab
//正確 .sample { display: flex; } //錯誤 .sample { display: flex; } - 選擇器 與 花括號 之間必須包含空格
//正確 .sample { display: flex; } //錯誤 .sample{ display: flex; } - 每條規(guī)則之間必須包含空行
//正確 .sample { display: flex; } .sample1 { display: block; } //錯誤 .sample { display: flex; } .sample1 { display: block; } - 屬性名與冒號之間不允許包含空格紫岩， 冒號與屬性值之間必須包含空格
//正確 display: flex; //錯誤 display:flex display : flex display :flex - 逗號前不允許有空格抬伺，逗號后必須跟一個空格
//正確 font-family: Helvetica, Arial //錯誤 font-family: Helvetica , Arial font-family: Helvetica ,Arial font-family: Helvetica, Arial - SCSS mixin的方法參數(shù)括號與 { 之間必須包含一個空格, 各參數(shù)間必須有一個空格
//正確 @mixin color-box($bg-color: $grey-light, $border-color: $grey) { background-color: $bg-color; border: 1px solid $border-olor; } //錯誤 @mixin color-box($bg-color:$grey-light,$border-color:$grey) { background-color: $bg-color; border: 1px solid $border-olor; } - '+' '~' '>'選擇器前后必須跟一個空格
//正確 .radio-label + .radio-box { } //錯誤 .radio-label+.radio-box { } - 引用mixin和多層嵌套必須有一個空行
//正確 .sample { @include color-box; margin: 15px; &:hover { display: block; } } //錯誤 .sample { @include color-box; margin: 15px; &:hover { display: block; } } - 一組變量的定義肋杖，盡量以冒號對齊
//推薦 $link-hover-color : #29e; $hover-color-gray : #ebebeb; $icon-hover-color : #4d4d4d; $btn-hover-color : #f0f0f0; $btn-hover-color-form : #f9f9f9; $btn-hover-color-cancel : #f63737; //不推薦 $link-hover-color : #29e; $hover-color-gray : #ebebeb; $icon-hover-color : #4d4d4d; $btn-hover-color : #f0f0f0; $btn-hover-color-form : #f9f9f9; $btn-hover-color-cancel : #f63737; - 多個并行選擇器使用同一規(guī)則原朝，必須換行
//正確 .a, .b, .c { box-sizing: border-box; } //錯誤 .a, .b, .c { box-sizing: border-box; }
3 選擇器
- 禁止使用ID應(yīng)用于樣式燎竖，應(yīng)該使用class
//正確 .content { display: flex; } //錯誤 #content { display: flex; } - CSS選擇器中避免標(biāo)簽名
選擇器應(yīng)該是準(zhǔn)確和有語義的class(類)名址芯，不推薦使用標(biāo)簽選擇器彰居。這樣會更容易維護, 只需要修改你的標(biāo)簽名诚纸，而不是你的class
從分離的角度考慮,在表現(xiàn)層中不應(yīng)該分配html標(biāo)記/語義。//推薦 .content { display: flex; > .nav { flex: 1; } } //不推薦 .content { display: flex; > nav { flex: 1 } } - 盡量精準(zhǔn)的選擇
//推薦 .content { display: flex; > .nav { flex: 1; } } //不推薦 .content { display: flex; .nav { flex: 1 } } - 選擇器嵌套
正常的情況下陈惰，我們不推薦使用嵌套畦徘，如果需要使用嵌套，我們不推薦嵌套超過三層, 如果嵌套超過三層奴潘，應(yīng)該考慮是不是哪里可以使用更精準(zhǔn)更語義化的class旧烧。不推薦直接使用css的嵌套，而是使用SCSS的嵌套画髓。//推薦 .content { display: flex; > .nav { flex: 1; > .item { text-align: center; } } } //不推薦 .content .nav .item a { text-align: center; } - 在CSS預(yù)處理器如LESS 和 SASS 里 media query 推薦直接在選擇器的嵌套中使用掘剪，有助于保持媒體查詢屬于的上下文
//推薦 .content { font-size: 1.2rem; @media screen and (min-width: 767px) { font-size: 1rem; } } //不推薦 .content { font-size: 1.2rem; } @media screen and (min-width: 767px) { .content { font-size: 1rem; } } - 屬性選擇器必須使用雙引號
//正確 [class="icon-"] { font-size: 1rem; } //錯誤 [class='icon-'] { font-size: 1rem; }
4 屬性規(guī)范
-
屬性定義必須另起一行
// 正確 .selector { margin: 0; padding: 0; } // 錯誤 .selector { margin: 0; padding: 0; } -
屬性必須以分號結(jié)尾
// 正確 .selector { margin: 0; padding: 0; } // 錯誤 .selector { margin: 0; padding: 0 } -
屬性值為0時，省略單位
// 正確 .box { padding: 0; } // 錯誤 .box { padding: 0px; } -
使用16進制表示顏色奈虾，顏色值采用小寫夺谁，#rrggbb的情況簡寫為#rgb廉赔，有透明度的情況使用rgba表示
// 正確 .box { background: rgba(0, 0, 255, .5); color: #3ec; } // 錯誤 .box { background: white; opacity: 0.5; color: #33eecc; } -
同一組屬性盡量按照功能順序書寫，以 Formatting Model（布局方式匾鸥、位置） > Box Model（尺寸） > Typographic（文本相關(guān)） > Visual（視覺效果） 的順序書寫蜡塌，以提高代碼的可讀性
- Formatting Model 相關(guān)屬性包括：display / position / top / right / bottom / left / float / overflow 等
- Box Model 相關(guān)屬性包括：margin / border / padding / width / height 等
- Typographic 相關(guān)屬性包括：font / line-height / text-align / word-wrap 等
- Visual 相關(guān)屬性包括：background / color / transition / list-style 等
// 推薦 .sidebar { // formatting model position: absolute; top: 50px; left: 0; overflow-x: hidden; // box model width: 200px; padding: 5px; border: 1px solid #ddd; // typographic font-size: 14px; line-height: 20px; // visual background: #f5f5f5; color: #333; transition: color 1s; } -
font-family 屬性
- font-family 屬性中的字體族名稱應(yīng)使用字體的英文 Family Name，其中如有空格勿负，須放置在引號中馏艾。
// 示例 h1 { font-family: "Microsoft YaHei"; } - font-family 不區(qū)分大小寫，但在同一個項目中奴愉，同樣的 Family Name 大小寫必須統(tǒng)一琅摩。
// 正確 body { font-family: Arial, sans-serif; } h1 { font-family: Arial, "Microsoft YaHei", sans-serif; } // 錯誤 body { font-family: arial, sans-serif; } h1 { font-family: Arial, "Microsoft YaHei", sans-serif; } - font-family 按「西文字體在前、中文字體在后」锭硼、「效果佳 (質(zhì)量高/更能滿足需求) 的字體在前房资、效果一般的字體在后」的順序編寫，最后必須指定一個通用字體族( serif / sans-serif )
// 示例 body { font-family: "Helvetica Neue", Helvetica, Arial, PingFangSC-Regular, "Microsoft Yahei", Verdana, sans-serif; } - 不推薦在業(yè)務(wù)中重寫font-family
- font-family 屬性中的字體族名稱應(yīng)使用字體的英文 Family Name，其中如有空格勿负，須放置在引號中馏艾。
-
url()中的路徑不添加引號
// 推薦 .box { background-image: url(../imgs/banner.jpg); } // 不推薦 .box { background-image: url('../imgs/banner.jpg'); } -
推薦并適當(dāng)縮寫值
“適當(dāng)”是因為縮寫總是會包含一系列的值檀头，而有時候我們并不希望設(shè)置某一值轰异，反而造成了麻煩，那么這時候你可以不縮寫暑始，而是分開寫搭独。// 有時我們只想設(shè)置一個容器水平居中，那么設(shè)置left蒋荚，right就好戳稽，而top和bottom不是這個樣式要關(guān)心的（如果設(shè)置了反倒會影響其他樣式在這個容器上的使用） // 示例 <div class="box center"></div> .box { margin-top: 10px; } // 這種簡寫將會覆蓋.box里的設(shè)置 .center { margin: 0 auto; } // 比如下面這個模塊的樣式設(shè)置馆蠕，我們確實需要設(shè)置padding的所有項期升，于是我們就可以采用縮寫 .footer { padding: 12px 3px; }
- 對于屬性值或顏色參數(shù)，省略小于 1 的小數(shù)前面的 0 （例如互躬，.5 代替 0.5播赁；-.5px 代替 -0.5px）
- 無邊框設(shè)置
// 正確 .box { border: none; } // 錯誤 .box { border: 0; // 瀏覽器會進行多余的渲染，性能不佳 } - 層級(z-index)禁止隨意設(shè)置吼渡，頁面彈窗容为、氣泡為最高級（最高級為999）；普通區(qū)塊為10-90內(nèi)10的倍數(shù)寺酪；同層的多個元素坎背，在該層級內(nèi)使用相同的 z-index 或遞增。
- 禁止使用 !important (特殊情況除外寄雀，如覆蓋第三方插件中的樣式等)
- 禁止使用 filter
- 多個class里有一個或多個公共屬性得滤，應(yīng)該將屬性抽取到一個單獨的class中或者使用泛選擇器([attribute~=value], [attribute^=value],[attribute$=value],[attribute*=value])，泛選擇器應(yīng)確保不會有全局污染盒犹，避免多次書寫重復(fù)代碼
// 正確 <div> <span class="icon-book"></span> <span class="icon-pen"></span> </div> [class^="icon-"] { background-image: url(../imgs/sprite.png) no-repeat; } .icon-book { background-positon: 0 -16px; } .icon-pen { background-positon: -16px -16px; } // 錯誤 <div> <span class="icon-book"></span> <span class="icon-pen"></span> </div> .icon-book { background-image: url(../imgs/sprite.png) no-repeat; background-positon: 0 -16px; } .icon-pen { background-image: url(../imgs/sprite.png) no-repeat; background-positon: -16px -16px; }
5 Hack規(guī)范
通常我們禁止在CSS的一個選擇器中使用hack混編懂更，如果你確實需要寫hack, 我們應(yīng)該有一個class： xxx-fix, 最好把所有的hack放在一個獨立的文件, 通過JS特性檢測或者直接添加到dom中眨业。
// 錯誤
.selector {
key: value;
key: fix-value\0; //ie 9-11
}
// 正確
.selector {
key: value;
}
.selecor-ie-fix {
key: fix-value\0; //ie 9-11
}
6 命名規(guī)范
-
文件夾命名
- css文件夾命名應(yīng)參照項目文件夾命名規(guī)則，命名總是以字母開頭而不是數(shù)字沮协，且字母一律小寫龄捡，以中劃線連接多個單詞且不帶其他標(biāo)點符號。
如：input-number
有復(fù)數(shù)結(jié)構(gòu)時慷暂，采取復(fù)數(shù)命名法聘殖。
如： style styles
|- components
|- input-number
|- inputNumber.html
|- inputNumber.js
|- styles
|- input_number.scss
|- images
|- menu
- css文件夾命名應(yīng)參照項目文件夾命名規(guī)則，命名總是以字母開頭而不是數(shù)字沮协，且字母一律小寫龄捡，以中劃線連接多個單詞且不帶其他標(biāo)點符號。
-
文件命名
- 全站架構(gòu)：(以下文件放在跟路徑下的styles目錄中)
基本共用 base.scss 布局、版面 layout.scss 主題 themes.scss 專欄 columns.scss 文字 font.scss 主要的 main.scss 表單 forms.scss 補丁 mend.scss 打印 print.scss 變量 variables.scss 功能函數(shù) mixins.scss 色值 colors.scss 動畫 animations.scss 字體 iconfont.scss- 組件級 / 應(yīng)用級：（放在組件/應(yīng)用目錄中）
css模塊文件行瑞，其文件名必須與模塊名一致就斤。 css頁面文件，其文件名必須與HTML文件名一致蘑辑。 目的是讓開發(fā)人員快速找到該頁面或組件對應(yīng)的css文件洋机。 文件命名總是以字母開頭而不是數(shù)字，且字母一律小寫洋魂，以下劃線連接且不帶其他標(biāo)點符號绷旗。 radio.scss main-list.scss main-detail.scss -
變量命名
- 命名變量的最佳方式就是使用抽象名詞，盡量取消名字和值之間的直接關(guān)系副砍。
- 使用'$'開頭+ 語義化的變量名衔肢。
- 避免使用無意義的詞，如:
calendar
- 推薦變量的意義在前面豁翎，功能在后面
// 不推薦 $red: #F50707; $yellow: #B3F724; // 推薦 $brand-color: #F50707; $accent-color: #B3F724; // 你可能會使用名稱加-color的后綴來命名顏色的變量: // Base colors $base-color: #333; $brand-color: #F50707; $brand-80-color: rgba($color-brand, 0.8); $accent-color: #B3F724; // 或者使用header-或者footer-來命名一些特殊的區(qū)域： // Header $header-height: 100px; $header-background-color: $color-brand; // Footer $footer-height: 200px; $footer-background-color: #aaa; // 不推薦 $z-index-modal $padding-body // 推薦 $modal-z-index $body-padding -
選擇器命名
推薦采用BEM方式命名 // BE模式 block__element：塊里的元素角骤，如：nav（block）里的 a 標(biāo)簽(element) <nav class="g-nav"> <a href="#" class="g-nav__item">工作動態(tài)</a> </nav> .g-nav__item { } // BM模式 block--modifier: 塊元素加修飾符 // g-nav表示導(dǎo)航的通用樣式，g-nav-top表示該導(dǎo)航特有的樣式心剥，g-nav--active表示激活的nav <nav class="g-nav g-nav-top g-nav--active"> </nav> .g-nav--active { } // BEM模式 block__element--modifier nav塊里的a元素加上active狀態(tài) <nav class="g-nav"> <a href="#" class="g-nav__item g-nav__item--active">當(dāng)前狀態(tài)</a> </nav> .g-nav__item--active { } BEM只允許出現(xiàn)B__E--M,不允許出現(xiàn)B__B__B__E--M B__E__E__E--M B__E--M--M--M 如果層級過多邦尊，可以使用以下方式： B__E--M > B__E--M > B__E--M(最多3層B__E--M嵌套) // 推薦 <div class="c-card"><!-- B --> <div class="c-card__header"><!-- B__E --> <h2 class="c-card-title"><!-- B__E > B --> <i class="c-card-title__icon--small"></i><!-- B__E > B__E--M --> <i class="c-card-title__icon--big"></i><!-- B__E > B__E--M --> <span class="c-card-title__text-wrap">Title text here</span><!-- B__E > B__E --> </h2> </div> </div> // 推薦 .c-card { // B &__header { // B__E > .c-card-title { // B__E > B &__icon--small { // B__E > B__E--M } &__icon--big { // B__E > B__E--M } &__text-wrap { // B__E > B__E } } } } // 不推薦 <div class="c-card"> <div class="c-card__header"> <h2 class="c-card__header__title"> <i class="c-card__header__title__icon"></i> <span class="c-card__header__title__text">Title text here</span> </h2> </div> </div> // 不推薦 .c-card { &__header{ &__title { &__icon { } &__text { } } } } - 注意到以上示例中使用了c- 前綴。這個c代表'component'优烧，給組件加上命名空間蝉揍，它提高了代碼的可讀性。 類型 | 前綴 | 例子 | 描述 布局 | (g-) | g-header | (global)例如頭部畦娄，尾部又沾，主體，側(cè)欄等 組件 | (c-) | c-card | (component)較大整體熙卡，如登錄注冊杖刷，搜索等 元件 | (u-) | u-btn | 不可再分個體，例如按鈕驳癌，input框等 功能 | (f-) | f-clear | (function)使用頻率較高樣式滑燃，例如清除浮動 皮膚 | (s-) | s-nav | (skin) 只包含皮膚的樣式 主線 | (ig-) | ig-header | (igoal)主線模塊中組件Block的前綴 審批 | (ap-) | ap-header | (approve)審批模塊中組件Block的前綴 ...
命名時需要注意的點：
- 規(guī)則命名中，一律采用小寫加中劃線的方式喂柒，不允許使用大寫字母或_
- 命名避免使用中文拼音不瓶，應(yīng)該采用更簡明有語義的英文單詞進行組合
- 命名注意縮寫禾嫉，但是不能盲目縮寫
- 不允許通過1、2蚊丐、3等序號進行命名
- 避免class與id重名
- class用于標(biāo)識某一個類型的對象熙参，命名必須言簡意賅
- 盡可能提高代碼模塊的復(fù)用，樣式盡量用組合的方式
- 公共樣式名不得包含業(yè)務(wù)名稱
-
mixins命名
- 見名知義
- 小寫加中劃線麦备，不允許出現(xiàn)大小字母或_
// 不推薦 @mixin button($background: green) { } // 不推薦 @mixin buttonBg($background: green) { } // 不推薦 @mixin button_bg($background: green) { } // 推薦 @mixin button-bg($background: green) { }多個參數(shù)之間用逗號分隔孽椰，給參數(shù)設(shè)置默認值
7 重寫規(guī)范
我們不允許直接使用公共庫的選擇器進行重寫，如果要進行重寫凛篙，必須自己重新加一個新的選擇器黍匾，并且，這個選擇器不能對公共庫有影響呛梆。
// 錯誤
.qf-xxx .qf-btn {
//some rewriting code
}
// 正確
.qf-xxx__qf-btn {
//some rewriting code
}
//使用的時候用qf-btn 和 qf-xxx__qf-btn兩個class, 所以在寫組件的時候锐涯，為了考慮組件的通用性和可重寫性，建議組件開發(fā)人員填物，都提供一個外部的樣式輸入接口
