Less 編碼規範 1 1

該文件主要的設計目標是提高 less 文件的團隊一致性與可維護性。

less **的基本規範和原則與 css 編碼規範保持一致。

erik、顧軼靈、黃後錦、李玉北、趙雷。

本文件由商業運營體系前端技術組審校發布。

在本文件中，使用的關鍵字會以中文+括號包含的關鍵字英文表示：必須（must）。關鍵字"must", "must not", "required", "shall", "shall not", "should", "should not", "recommended", "may", and "optional"被定義在rfc2119中。

使用utf-8編碼。不得（must not）包含bom資訊。

**必須（must）按如下形式按順序組織：

@import變數宣告

樣式宣告

less// ?
@import "est/all.less";
@default-text-color: #333;
.page

@import語句引用的檔案必須（must）寫在一對引號內，.less字尾不得（must not）省略（與引入 css 檔案時的路徑格式一致）。引號使用'和"均可，但在同一專案內必須（must）統一。

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

選擇器和


// ?

.box+/-/*//四個運算子兩側必須（must）保留乙個空格。+/-兩側的運算元必須（must）有相同的單位，如果其中乙個是變數，另乙個數值必須（must）書寫單位。

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

mixin 和後面的空格之間不得（must not）包含空格。在給 mixin 傳遞引數時，在引數分隔符（,/;）後必須（must）保留乙個空格：

less// ? .box // ?

.box

當多個選擇器共享乙個宣告塊時，每個選擇器宣告必須（must）獨佔一行。

less// ? h1, h2, h3 // ? h1,h2,

h3

class 命名不得以樣式資訊進行描述，如.float-right、text-red等。

多個屬性定義可以使用縮寫時，盡量（should）使用縮寫。縮寫更清晰位元組數更少。常見縮寫有margin、border、padding、font、list-style等。在書寫時必須（must）考量縮寫展開後是否有不需要覆蓋的屬性內容被修改，從而帶來***。

對於處於(0, 1)範圍內的數值，小數點前的0可以（may）省略，同一專案中必須（must）保持一致。

less// ?
transition-duration: 0.5s, .7s;
// ?
transition-duration: .5s, .7s;

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

less// ?
margin-top: 0px;
// ?
margin-top: 0;

顏色定義必須（must）使用#rrggbb格式定義，並在可能時盡量（should）縮寫為#rgb形式，且避免直接使用顏色名稱與rgb()表示式。

less// ?
border-color: red;
color: rgb(254, 254, 254);
// ?
border-color: #f00;
color: #fefefe;

同一屬性有不同私有字首的，盡量（should）按字首長度降序書寫，標準形式必須（must）寫在最後。且這一組屬性以第一條的位置為準，盡量（should）按冒號的位置對齊。

less// ?

.box

可以（may）在無其他更好解決辦法時使用 css hack，並且盡量（should）使用簡單的屬性名 hack 如_zoom、*margin。

可以（may）但謹慎使用 ie 濾鏡。需要注意的是，ie 濾鏡中的 url 是以頁面路徑作為相對目錄，而不是 css 檔案路徑。

必須（must）採用 4 個空格為一次縮排，不得（must not）採用 tab 作為縮排。

巢狀的宣告塊前必須（must）增加一次縮排，有多個宣告塊共享命名空間時盡量（should）巢狀書寫，避免選擇器的重複。

但是需注意的是，盡量（should）僅在必須區分上下文時才引入巢狀關係（在巢狀書寫前先考慮如果不能巢狀，會如何書寫選擇器）。

less// ?
.main .title 
.main .content 
.main 
.comment-form 
}}// ?
.main 
.content 
.warning 
}#comment:invalid

less 的變數值總是以同一作用域下最後乙個同名變數為準，務必注意後面的設定會覆蓋所有之前的設定。

變數命名必須（must）採用@foo-bar形式，不得（must not）使用@foobar形式。

less// ?
@sidebarwidth: 200px;
@width:800px;
// ?
@sidebar-width: 200px;
@width: 800px;

使用繼承時，如果在宣告塊內書寫:extend語句，必須（must）寫在開頭：

less// ? .sub // ?

.sub

在定義 mixin 時，如果 mixin 名稱不是乙個需要使用的 classname，必須（must）加上括號，否則即使不被呼叫也會輸出到 css 中。

less// ?
.big-text 
h3 // ?
.big-text() 
h3

如果混入的是本身不輸出內容的 mixin，必須（must）在 mixin 後新增括號（即使不傳引數），以區分這是否是乙個 classname（修改以後是否會影響 html）。

less// ? .box // ?

.box

mixin 的引數分隔符使用,和;均可，但在同一專案中必須（must）保持統一。

變數和 mixin 在命名時必須（must）遵循如下原則：

在進行字串轉義時，使用~""表示式與e()函式均可，但在同一專案中必須（must）保持一致。

字串兩側的引號必須（must）使用"。

可以（may）使用 js 表示式（~``）生成屬性值或變數，其中包含的字串兩側的引號盡量（should）使用單引號（'）。

單行注釋盡量（should）使用//方式。

less// hide everything

*

Less 編碼規範 1 1

php 編碼規範哪些 php編碼規範

php 編碼規範哪些 PHP編碼規範

php 編碼規範哪些 PHP 編碼規範

Less 編碼規範 1 1

php 編碼規範哪些 php編碼規範

php 編碼規範哪些 PHP編碼規範

php 編碼規範哪些 PHP 編碼規範

相關推薦