Less編碼規範

Less 編碼規範

1、代碼書寫規範

1.代碼格式

1.1 文件

• [建議]：採用 UTF-8 編碼，在 CSS 代碼頭部頂格使用：

@charset "utf-8";

1.2 縮進

• [強制]：用兩個空格來代替製表符（tab） -- 這是惟一能保證在全部環境下得到一致展示的方法。

• 1.3 規則聲明塊

• [強制]：爲了得到更準確的錯誤報告，每條聲明都應該獨佔一行。
• [強制]：在規則聲明塊的左大括號 { 前加一個空格。
• [強制]：在樣式屬性的冒號 : 後面加上一個空格，前面不加空格。
• [強制]：在每條樣式後面都以分號 ; 結尾。
• [強制]：規則聲明塊的右大括號 } 獨佔一行。
• [強制]：每一個規則聲明間用空行分隔。
• [強制]：全部最外層引號使用單引號 ‘ 。
• [強制]：當一個屬性有多個屬性值時，以逗號 , 分隔，每一個逗號後添加一個空格，當單個屬性值過長時，每一個屬性值獨佔一行

完整示例以下：

.g-footer,
.g-header {
    position: relative;
}

.g-content {
    background: linear-gradient(135deg,deeppink25%,transparent25%) -50px0,
                linear-gradient(225deg,deeppink25%,transparent25%) -50px0,
                linear-gradient(315deg,deeppink25%,transparent25%),
                linear-gradient(45deg,deeppink25%,transparent25%);
}

.g-content::before {
    content: '';
}

2.語法

2.1 class命名

• [強制]：class命名只能出現小寫英文和破折號 -鏈接 ，不容許下劃線_ 和 駝峯命名法 。(例: anole-btn)緣由以下：

  1.-符合英文語義化，- 標識連子符，_是強調符號；

  2._underline 選擇器命名，在IE6中無效；

  3.駝峯和 都不利於SEO搜索引擎檢索切詞，駝峯沒法切成單詞， 谷歌會切漏關鍵詞；

  4.輸入的時候少按一個shift鍵，且Google、Yahoo、淘寶、豆瓣在他們的新CSS代碼規範中推薦使用 -做爲className分隔符。
  [強制]：class 名稱應當儘量短，而且意義明確。
  [建議]：基於最近的父 class 或基本（base） class 做爲新 class 的前綴。

  2.2 選擇器

• [建議]：少用#，少用*，少用標籤選擇器

  CSS的渲染方式是「從右往左」渲染的，就拿#header a{}舉例，先渲染頁面上全部的a籤，再去尋找id爲header的元素。

• [建議]：避免使用屬性選擇器

#header {
    height: 1rem;  // 推薦用 .header 能夠複用，且#選擇器權重高，應按需使用，不能濫用
}

#header *{
    padding:0 .3rem;  // 會去遍歷全部標籤，影響性能
}

#header a {
    font-size:0.28rem; // 一樣會去遍歷全部<a>標籤，影響性能
}

2.3 CSS權重優先級

• [理解]：!important > 內聯 > # > . > 屬性選擇器 input[name=''] > 標籤選擇器 input > *

2.4 CSS執行順序

• [理解]：行內 > 內聯 > 外部引用

2.5 避免使用 !important

• [強制]：除去某些極特殊的狀況，儘可能不要不要使用 !important。

  !important 的存在會給後期維護以及多人協做帶來噩夢般的影響。
  當存在的樣式覆蓋層疊時，若是你發現新定義的一個樣式沒法覆蓋一箇舊的樣式，只有加上 !important 才能生效時，是由於你新定義的選擇器的優先級不夠舊樣式選擇器的優先級高。因此，合理的書寫新樣式選擇器，是徹底能夠規避一些看似須要使用 !important 的狀況的。

2.6 樣式屬性順序

• [強制]：相關的屬性聲明應當歸爲一組，並按照下面的順序排列：

1.Positioning Model (佈局方式、位置）

2.Box Model (盒模型)

3.Typographic (文本排版)

4. Visual (視覺外觀)

因爲定位（positioning）能夠從正常的文檔流中移除元素，而且還能覆蓋盒模型（box model）相關的樣式，所以排在首位。盒模型排在第二位，由於它決定了組件的尺寸和位置。

其餘屬性只是影響組件的內部（inside）或者是不影響前兩組屬性，所以排在後面。

.declaration-order {
  /* Positioning */
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100;

  /* Box-model */
  display: block;
  float: right;
  margin： 10px;
  padding: 10px;
  overflow: hidden;
  width: 100px;
  height: 100px;

  /* Typography */
  font: normal 13px "Helvetica Neue", sans-serif;
  line-height: 1.5;
  color: #333;
  text-align: center;
  word-wrap: nowrap;

  /* Visual */
  background-color: #f5f5f5;
  border: 1px solid #e5e5e5;
  border-radius: 3px;
  list-style: none;
  transform: translateX(-50%);
  transition: top .4s ease;
  animation:mymove 5s infinite;

  /* Misc */
  opacity: 1;
  cursor: pointer;
}

2.7 縮寫與省略

• [強制]：字體順序：font-style | font-variant |

font-weight | font-size | line-height | font-family
font-style: normal;
font-variant: small-caps;
font-weight: bold;
font-size: 14px;
line-height: 1.5em;
font-family: 'Microsoft YaHei','arial','verdana';
font:normal small-caps bold 14px/1.5em 'Microsoft YaHei','arial','verdana';

• [強制]：背景順序：background-color | background-image | background-repeat | background-attachment | background-position

background-color: #F00;
background-image: url(header_bg.gif);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: left top;
background: #F00 url(header_bg.gif) no-repeat fixed left top;

• [強制]：外邊距和內邊距：margin&padding

margin: 8px;
 
margin: 4px 0 1.5em -12px;

padding: 1px 2px 3px;

• [強制]：列表樣式：list-style-type | list-style-position | list-style-image

list-style-type: square;
list-style-position: outside;
list-style-image: url(bullet.gif);
list-style: square outside url(bullet.gif);

• [強制]：邊框順序：border-width | border-style |
  border-color

border-width :1px;
border-style: solid;
border-color: #CCC;
border: 1px solid #CCC;

• [強制]：當屬性值或顏色參數爲 0 – 1 之間的數時，省略小數點前的 0 。

color: rgba(255, 255, 255, 0.5);
color: rgba(255, 255, 255, .5);

• [強制]：當長度值爲 0 時省略單位。

margin: 0px auto;
margin: 0 auto;

• [強制]：十六進制的顏色屬性值使用小寫和儘可能簡寫。

color: #ffcc00;
color: #fc0;

2.8 合理使用使用引號

在某些樣式中，會出現一些含有空格的關鍵字或者中文關鍵字。

• [強制]：font-family 內使用引號。當字體名字中間有空格，中文名字體及 Unicode 字符編碼表示的中文字體，爲了保證兼容性，都建議在字體兩端添加單引號(或者雙引號)：

body {
    font-family: 'Microsoft YaHei','黑體-簡','\5b8b\4f53';
}

• [強制]：background-image 的 url 內使用引號。若是路徑裏面有空格，舊版 IE 是沒法識別的，會致使路徑失效，建議不論是否存在空格，都添加上單引號(或者雙引號)：

div {
    background-image: url('...');
}

2.9註釋

單行註釋

• [強制]：星號與內容之間必須保留一個空格。

/* 表格隔行變色 */

多行註釋

• [強制]：星號要一列對齊，星號與內容之間必須保留一個空格。

/**
* Sometimes you need to include optional context for the entire component. 
Do that up here if it's important enough.
*/

規則聲明塊內註釋

• [強制]：使用 // 註釋，// 後面加上一個空格，註釋獨立一行。

.g-footer {
    border: 0;
    // ....
}

文件註釋

• [推薦]：文件頂部必須包含文件註釋，用 @name 標識文件說明。星號要一列對齊，星號與內容之間必須保留一個空格，標識符冒號與內容之間必須保留一個空格。

/**
* @name: 文件名或模塊名
* @description: 文件或模塊描述
* @author: author-name(mail-name@domain.com)
*          author-name2(mail-name2@domain.com)
* @update: 2018-08-08 10:08
*/

@description爲文件或模塊描述。

@update爲可選項，建議每次改動都更新一下。

當該業務項目主要由固定的一個或多我的負責時，須要添加@author標識，一方面是尊重勞動成果，另外一方面方便在須要時快速定位責任人

3.less編碼

3.1 文件導入（Importing）

• [強制]：使用 @import (reference) 導入其餘less文件，避免導入的樣式文件foo.less代碼重複打包到最終的css文件中

@import (reference) "foo.less";

咱們用vd生成的項目，已經將CSS公共解決方案文件rework.less集成到node_modules中，以下調用

@import (reference) "~rework.less/rework";
@import "~sprite.less";

.placeholder {
  &-404 {
    h3 {
      .text-replace();  // 調用rework樣式
      .sprite(@404-slogan); 
  }
}

除了提供一些經常使用樣式方案，rework.less中還包含了樣式重置，中文網頁排版樣式，詳情查閱源碼。

rework.less源碼地址：https://github.com/yincw/rework.less3.2

3.2 混合（Mixins）

• [理解]：將一組能夠共用的樣式屬性，在其餘樣式規則中混合調用。

.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}

#menu .list {
  color: #111;
  .bordered;
}

.post {
  color: red;
  .bordered;
}

3.3 命名空間（Namespaces）和訪問器（Accessors）

• [理解]：咱們能夠用Less中的命名空間爲本身封裝一些平常比較經常使用的類名，以便在其餘組件中複用，又不產生衝突。

.bundle() {
    .button(@bg-color) {  // 本樣式支持傳參
        display: block;
        border: 1px solid black;
        background-color: @bg-color;
    }
    .tab {
        background-color: yellow
    }
    .citation {
        background-color: purple
    }
}

.header {
  color: orange;
  .bundle > .button(gray);  // 也能夠寫做 .bundle .button(gray)
}

3.4 嵌套

• [理解]：經過嵌套來實現樣式隔離：保證本身組件的樣式不影響其餘組件的樣式，注意層級不要超過3級（影響性能）。

.product {
    padding-top: .5rem;
    width: e("calc(100% - 0.6rem)");  // 混合計算編譯會忽略單位，解決方案1
    .product-list {
        margin-bottom: .2rem;
        width: calc(~"100% - 0.6rem");  // 混合計算編譯會忽略單位，解決方案2
        &:after {
            content: "";
            display: block;
            visibility: hidden;
            clear: both;
            height: 0;
            line-height: 0;
        }
    }
}

2、代碼組織規範

1.設計模式（方法論）相關

1.1 CSS方法論

引用方法論是爲了讓CSS編碼具備更好的可讀性、維護性、擴展性、複用性。

• [理解]：DRY CSS: Don’t Repeat Your CSS。Less文件內部編碼使用。

.red-btn,
.blue-btn,
.gray-btn {
    width: 100px;
    height: 36px;
    border: 0;
}

• [理解]：OOCSS: Object Oriented CSS。「面向對象的編程」，使樣式的數據抽象化、模塊化和繼承。達到樣式複用。

.f12 {
  font-size:12px
}
.size1of4 {
  width: 25%
}
.bgBlue {
  background:blue
}


<div className="f12 size1of4 bgBlue">OOCSS</div>
<div className="f12 bgBlue">OOCSS</div>

• [理解]：SMACSS：設計架構中推薦有這6類，

1.Base Styles：基礎規範，它的定義不會用到class和ID。包含樣式重置css reset、工具樣式rework。

2.Layout Rules：佈局規範，佈局是一個網站的基本，SMACSS還約定了一個前綴 l-/layout- 來標識佈局的class。

.layout-header {}
.layout-container {}
.layout-sidebar {}
.layout-content {}
.layout-footer {}

3.Module Rules：模塊規範，將樣式模塊化就能達到複用和可維護的目的。SMACSS中的模塊具備本身的一個命名，下屬類皆有同一個前綴。

.todolist{}
.todolist-title{}
.todolist-image{}
.todolist-article{}

4.State Rules：狀態規範，描述的是任一元素在特定狀態下的外觀。

// html
<div class="is-hidden">
    ...
</div>
// css
.is-hidden{
    display: none;
}

5.Theme Rules：主題規範，描述了頁面主題外觀，通常是指顏色、背景圖。Theme Rules 能夠修改前面 4個類別的樣式，且應和前面4個類別分離開來（便於切換，也就是「換膚」）。

咱們引用主題規範的思想，可是沒必要使用它的代碼覆蓋的實現方式。咱們有更適合咱們簡便方式實現主題規範。

6.Changing State: 動態樣式規範，咱們靜態CSS完成後，會有一些動態交互樣式的覆蓋行爲。改變State Rules的樣式屬性。

1.2 vd建立的項目實現方案：

1.在.vd文件夾中，project.json文件有配置主題樣式的對象，配置好後能夠全局引用。

project.json文件中定義主題樣式：

"theme": {
  "hd": "2px",
  "primary-color": "#1890ff",
  "border-radius": "4px",
  "brand-primary": "#0b87fd",
  "brand-primary-tap": "#0b87fd"
}

button.less 文件直接引用，不須要import文件：

.anole {
    &-btn-primary {
        border-radius: @border-radius;
        background-color: @primary-color;
    }
}

2.引用Theme.less中定義的變量樣式。

theme.less 文件定義：

@primary-color: #1890ff;
@title-color: #000;
@title-size: 0.36rem;
@text-color: #333;
@text-size: 0.28rem;
@bg-color: #f6f6f6;

button.less 文件引用：

@import 'theme.less';

.anole {
    &-btn-primary {
        color: @text-color;
        background-color: @primary-color;
    }
}

2.語法檢測

第一步：項目根目錄新建文件stylelint.config.js

module.exports = {
  "extends": "stylelint-config-standard",
  "parser": "babel-eslint",
  "env": {
    "browser": true,
    "node": true,
    "commonjs": true,
    "amd": true,
    "jest": true
  },
  "plugins": [
    // "stylelint-z-index-value-constraint",
  ],
  "rules": {
    // 縮進2個空格
    "indentation": [4, {
      "except": ["value"],
      "severity": "warning",
      "message": "Please use 2 spaces for indentation. Tabs make The Architect grumpy."
    }],
    // 小數前面的 0
    "number-leading-zero": "never",
    // 不容許空規則
    "block-no-empty": true,
    "max-empty-lines": 2,
    "color-no-invalid-hex": true,
    // 註釋空行前
    "comment-empty-line-before": ["always", {
      "ignore": ["stylelint-commands", "between-comments"],
    }],
    // 註釋空行後
    "declaration-colon-space-after": "always",
    // 排除前面空行
    "rule-empty-line-before": ["always", {
      "except": ["first-nested"],
      "ignore": ["after-comment"],
    }],
    // 單位白名單
    "unit-whitelist": ["rem", "%", "s", "deg", "px", "em", "vh", "vm"],
    // z-index 等級範圍
    // "plugin/z-index-value-constraint": {
    //   "min": 0,
    //   "max": 999
    // }
  },
  "root": true
};

第二步：webpack.config.js中配置，安裝依賴包

yarn add stylelint-webpack-plugin

import StyleLintPlugin from 'stylelint-webpack-plugin';

...

plugins：[
    ...,
    new StyleLintPlugin({
      context: "src",
      configFile: join(__dirname, './stylelint.config.js'),
      files: '**/*.less',
      failOnError: false,
      quiet: true,
      syntax: 'less'
    }),
    ...
]

...

參考資料：

史上最全的CSS hack方式一覽：https://blog.csdn.net/freshlover/article/details/12132801

前端工程師手冊：https://leohxj.gitbooks.io/front-end-database/html-and-css-basic/css-write-and-name.html

如何規範 CSS 的命名和書寫？：https://www.zhihu.com/question/19586885

貓哥_kaiye | 編程筆記：http://www.cnblogs.com/kaiye/archive/2011/06/13/3039046.html

肯撲seoz928的博客： http://blog.sina.com.cn/s/blog_89aeb27f0100vk0o.html

參考連接：https://github.com/cssmagic/blog/issues/42

DRY CSS：http://vanseodesign.com/css/dry-principles/

OOCSS: http://oocss.org/

SMACSS：https://smacss.com/

參考Less.js中文網： http://lesscss.cn/features/#import-options-reference

web項目開發 之 前端規範 --- CSS編碼規範：https://blog.csdn.net/xllily_11/article/details/51249120

複雜應用的 CSS 性能分析和優化建議：http://www.orzpoint.com/profiling-css-and-optimization-notes/

精簡高效的CSS命名準則/方法：http://www.zhangxinxu.com/wordpress/2010/09/精簡高效的css命名準則方法

stylelint：https://github.com/stylelint/stylelint/blob/master/docs/user-guide/rules.md

在webpack中使用stylelint（一） Quick Start：https://www.jianshu.com/p/4ed317615152