less編碼規範

Less 編碼規範

簡介

由於本身最近寫css用的比較多仍是less，整理了一份less規範， 

代碼組織

代碼按以下形式按順序組織：

1. @import
2. 變量聲明
3. 樣式聲明

1 // ✓
2 @import "est/all.less";
3 
4 @default-text-color: #333;
5 
6 .page {
7     width: 960px;
8     margin: 0 auto;
9 }

 

---

@import 語句

@import 語句引用的文件寫在一對引號內，.less 後綴不省略（與引入 CSS 文件時的路徑格式一致）。引號使用 ' 和 " 都可。

// ✗
@import 'est/all';
@import "my/mixins.less";

// ✓
@import "est/all.less";
@import "my/mixins.less";

 

---

空格

屬性、變量

選擇器和 { 之間保留一個空格。

屬性名後的冒號（:）與屬性值之間保留一個空格，冒號前不保留空格。

定義變量時冒號（:）與變量值之間保留一個空格，冒號前不保留空格。

在用逗號（,）分隔的列表（Less 函數參數列表、以 , 分隔的屬性值等）中，逗號後保留一個空格，逗號前不保留空格。

// ✗
.box{
    @w:50px;
    @h :30px;
    width:@w;
    height :@h;
    color: rgba(255,255,255,.3);
    transition: width 1s,height 3s;
}

// ✓
.box {
    @w: 50px;
    @h: 30px;
    width: @w;
    height: @h;
    transition: width 1s, height 3s;
}

 

運算

+ / - / * / / 四個運算符兩側保留一個空格。+ / - 兩側的操做數有相同的單位，若是其中一個是變量，另外一個數值書寫單位。

// ✗
@a: 200px;
@b: (@a+100)*2;

// ✓
@a: 200px;
@b: (@a + 100px) * 2;

 

混入（Mixin）

Mixin 和後面的空格之間不包含空格。在給 mixin 傳遞參數時，在參數分隔符（, / ;）後保留一個空格：

// ✗
.box {
    .size(30px,20px);
    .clearfix ();
}

// ✓
.box {
    .size(30px, 20px);
    .clearfix();
}

 

---

選擇器

當多個選擇器共享一個聲明塊時，每一個選擇器聲明獨佔一行。

// ✗
h1, h2, h3 {
    font-weight: 700;
}

// ✓
h1,
h2,
h3 {
    font-weight: 700;
}

 

Class 命名不得以樣式信息進行描述，如 .float-right、text-red 等。

---

省略與縮寫

縮寫

多個屬性定義能夠使用縮寫時， 儘可能使用縮寫。縮寫更清晰字節數更少。常見縮寫有 margin、border、padding、font、list-style 等。在書寫時考量縮寫展開後是否有不須要覆蓋的屬性內容被修改，從而帶來反作用。

數值

對於處於 (0, 1) 範圍內的數值，小數點前的 0 能夠（MAY）省略，同一項目中保持一致。

// ✗
transition-duration: 0.5s, .7s;

// ✓
transition-duration: .5s, .7s;

 

0 值

當屬性值爲 0 時，省略可省的單位（長度單位如 px、em，不包括時間、角度等如 s、deg）。

// ✗
margin-top: 0px;

// ✓
margin-top: 0;

 

顏色

顏色定義使用 #rrggbb 格式定義，並在可能時儘可能縮寫爲 #rgb 形式，且避免直接使用顏色名稱與 rgb() 表達式。

// ✗
border-color: red;
color: rgb(254, 254, 254);

// ✓
border-color: #f00;
color: #fefefe;

 

私有屬性前綴

同一屬性有不一樣私有前綴的，儘可能（按前綴長度降序書寫，標準形式寫在最後。且這一組屬性以第一條的位置爲準，儘可能按冒號的位置對齊。

// ✓
.box {
    -webkit-transform: rotate(30deg);
       -moz-transform: rotate(30deg);
        -ms-transform: rotate(30deg);
         -o-transform: rotate(30deg);
            transform: rotate(30deg);
}

其餘

能夠在無其餘更好解決辦法時使用 CSS hack，而且儘可能使用簡單的屬性名 hack 如 _zoom、*margin。

能夠但謹慎使用 IE 濾鏡。須要注意的是，IE 濾鏡中圖片的 URL 是以頁面路徑做爲相對目錄，而不是 CSS 文件路徑。

---

嵌套和縮進

嵌套的聲明塊前增長一次縮進，有多個聲明塊共享命名空間時儘可能嵌套書寫，避免選擇器的重複。

可是需注意的是，儘可能僅在必須區分上下文時才引入嵌套關係（在嵌套書寫前先考慮若是不能嵌套，會如何書寫選擇器）。

// ✗
.main .title {
  font-weight: 700;
}

.main .content {
  line-height: 1.5;
}

.main {
.warning {
  font-weight: 700;
}

  .comment-form {
    #comment:invalid {
      color: red;
    }
  }
}

// ✓
.main {
    .title {
        font-weight: 700;
    }

    .content {
        line-height: 1.5;
    }

    .warning {
        font-weight: 700;
    }
}

#comment:invalid {
    color: red;
}

 

---

變量

Less 的變量值老是以同一做用域下最後一個同名變量爲準，務必注意後面的設定會覆蓋全部以前的設定。

變量命名）採用 @foo-bar 形式，不使用 @fooBar 形式。

// ✗
@sidebarWidth: 200px;
@width:800px;

// ✓
@sidebar-width: 200px;
@width: 800px;

 

---

繼承

使用繼承時，若是在聲明塊內書寫 :extend 語句，寫在開頭：

// ✗
.sub {
    color: red;
    &:extend(.mod all);
}

// ✓
.sub {
    &:extend(.mod all);
    color: red;
}

 

---

混入（Mixin）

在定義 mixin 時，若是 mixin 名稱不是一個須要使用的 className，加上括號，不然即便不被調用也會輸出到 CSS 中。

// ✗
.big-text {
    font-size: 2em;
}

h3 {
    .big-text;
}

// ✓
.big-text() {
    font-size: 2em;
}

h3 {
    .big-text();
}

 

若是混入的是自己不輸出內容的 mixin，在 mixin 後添加括號（即便不傳參數），以區分這是不是一個 className（修改之後是否會影響 HTML）。

// ✗
.box {
    .clearfix;
    .size (20px);
}

// ✓
.box {
    .clearfix();
    .size(20px);
}

 

Mixin 的參數分隔符使用 , 和 ; 都可，但在同一項目中保持統一。

---

命名空間

變量和 mixin 在命名時遵循以下原則：

• 一個項目只能引入一個無命名前綴的基礎樣式庫（如 est）
• 業務代碼和其餘被引入的樣式代碼中，變量和 mixin 必須有項目或庫的前綴

---

字符串

在進行字符串轉義時，使用 ~"" 表達式與 e() 函數都可，但在同一項目中保持一致。

字符串兩側的引號使用 "。

---

註釋

單行註釋儘可能（SHOULD）使用 // 方式。

// Hide everything
* {
    display: none;
}