国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

Less 編碼規范 (1.1)

xorpay / 933人閱讀

摘要：代碼的基本規范和原則與編碼規范保持一致。變量的變量值總是以同一作用域下最后一個同名變量為準，務必注意后面的設定會覆蓋所有之前的設定。的參數分隔符使用和均可，但在同一項目中必須保持統一。

轉載：原地址

簡介

該文檔主要的設計目標是提高 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 {
    width: 960px;
    margin: 0 auto;
}
@import 語句

@import 語句引用的文件必須（MUST）寫在一對引號內，.less 后綴不得（MUST NOT）省略（與引入 CSS 文件時的路徑格式一致）。引號使用 " 和 " 均可，但在同一項目內必須（MUST）統一。

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

// ?
@import "est/all.less";
@import "my/mixins.less";
空格 屬性、變量

選擇器和 { 之間必須（MUST）保留一個空格。

屬性名后的冒號（:）與屬性值之間必須（MUST）保留一個空格，冒號前不得（MUST NOT）保留空格。

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

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

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;
}
運算

+ / - / * / / 四個運算符兩側必須（MUST）保留一個空格。+ / - 兩側的操作數必須（MUST）有相同的單位，如果其中一個是變量，另一個數值必須（MUST）書寫單位。

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

// ?
@a: 200px;
@b: (@a + 100px) * 2;
混入（Mixin）

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

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

// ?
.box {
    .size(30px, 20px);
    .clearfix();
}
選擇器

當多個選擇器共享一個聲明塊時，每個選擇器聲明必須（MUST）獨占一行。

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

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

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 值

當屬性值為 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 {
    -webkit-transform: rotate(30deg);
       -moz-transform: rotate(30deg);
        -ms-transform: rotate(30deg);
         -o-transform: rotate(30deg);
            transform: rotate(30deg);
}
其他

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

可以（MAY）但謹慎使用 IE 濾鏡。需要注意的是，IE 濾鏡中圖片的 URL 是以頁面路徑作為相對目錄，而不是 CSS 文件路徑。

嵌套和縮進

必須（MUST）采用 4 個空格為一次縮進， 不得（MUST NOT）采用 TAB 作為縮進。

嵌套的聲明塊前必須（MUST）增加一次縮進，有多個聲明塊共享命名空間時盡量（SHOULD）嵌套書寫，避免選擇器的重復。

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

less// ?
.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 的變量值總是以同一作用域下最后一個同名變量為準，務必注意后面的設定會覆蓋所有之前的設定。

變量命名必須（MUST）采用 @foo-bar 形式，不得（MUST NOT）使用 @fooBar 形式。

less// ?
@sidebarWidth: 200px;
@width:800px;

// ?
@sidebar-width: 200px;
@width: 800px;
繼承

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

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

// ?
.sub {
    &:extend(.mod all);
    color: red;
}
混入（Mixin）

在定義 mixin 時，如果 mixin 名稱不是一個需要使用的 className，必須（MUST）加上括號，否則即使不被調用也會輸出到 CSS 中。

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

h3 {
    .big-text;
}

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

h3 {
    .big-text();
}

如果混入的是本身不輸出內容的 mixin，必須（MUST）在 mixin 后添加括號（即使不傳參數），以區分這是否是一個 className（修改以后是否會影響 HTML）。

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

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

Mixin 的參數分隔符使用 , 和 ; 均可，但在同一項目中必須（MUST）保持統一。

命名空間

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

一個項目只能引入一個無命名前綴的基礎樣式庫（如 est）

業務代碼和其他被引入的樣式代碼中，變量和 mixin 必須有項目或庫的前綴

字符串

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

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

JS 表達式

可以（MAY）使用 JS 表達式（~``）生成屬性值或變量，其中包含的字符串兩側的引號盡量（SHOULD）使用單引號（"）。

注釋

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

less// Hide everything
* {
    display: none;
}

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/110995.html

相關文章

  • 編寫靈活、穩定、高質量的CSS代碼的規范

    摘要：過度使用簡寫形式的屬性聲明會導致代碼混亂，并且會對屬性值帶來不必要的覆蓋從而引起意外的副作用。只有在必要的時候才將限制在最近的父元素內也就是后代選擇器例如，不使用帶前綴的時前綴類似于命名空間。制定一致的注釋規范。 一、語法 1.1 注意 （1）用兩個空格來代替制表符（tab） -- 這是唯一能保證在所有環境下獲得一致展現的方法。 （2）為選擇器分組時，將單獨的選擇器單獨放在一行。 （3...

    psychola 評論0 收藏0

  • 前端編碼規范之：樣式（scss）編碼規范

    摘要：前端編碼規范之使用規范前端編碼規范之樣式編碼規范前端編碼規范之結構規范前端編碼規范之最佳實踐前端編碼規范之編碼規范命名的原則是通俗易懂，盡量保持不重復沖突，盡量不要用。我覺得應該避免出現出現這種方式用預處理器拼接出來的名稱，會生成。 前端編碼規范之：Git使用規范 前端編碼規范之：樣式（scss）編碼規范 前端編碼規范之：HTML結構規范 前端編碼規范之：Vue最佳實踐 前端編碼規范...

    reclay 評論0 收藏0

  • 莫閑前端之路學習markdown使用，html和css的編寫順序以及class命名規范

    摘要：屬性順序標簽標簽標簽必須加上命名命名規范名稱中只能出現小寫字符和破折號使用有意義的名稱，使用有組織的或目的明確的名稱名稱應當盡可能短，并且意義明確，避免過度任意的簡寫。而是一個尚未被改變過的也是屬于的元素。 html屬性順序 class id data-*,name src, for, type, href title, alt aria-*, role /*a標簽*/ Ex...

    mo0n1andin 評論0 收藏0

  • 莫閑前端之路學習markdown使用，html和css的編寫順序以及class命名規范

    摘要：屬性順序標簽標簽標簽必須加上命名命名規范名稱中只能出現小寫字符和破折號使用有意義的名稱，使用有組織的或目的明確的名稱名稱應當盡可能短，并且意義明確，避免過度任意的簡寫。而是一個尚未被改變過的也是屬于的元素。 html屬性順序 class id data-*,name src, for, type, href title, alt aria-*, role /*a標簽*/ Ex...

    Snailclimb 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<