編碼規(guī)范

?xiaoxiao, 發(fā)布于2019-08-30 15:54 / 3647人閱讀

摘要：只有在必須將樣式限制在父元素內(nèi)也就是后代選擇器，并且存在多個需要嵌套的元素時才使用嵌套。只有在必要的時候才將限制在最近的父元素內(nèi)也就是后代選擇器例如，不使用帶前綴的時前綴類似于命名空間。制定一致的注釋規(guī)范。設(shè)置文件編碼為。

黃金定律

不管有多少人共同參與同一項目，一定要確保每一行代碼都像是同一個人編寫的。

HTML 1.語法 1).用兩個空格代表制表符 2).嵌套元素應(yīng)當(dāng)縮進一次（兩個空格） 3).對于屬性的定義，用雙引號 4).不在自閉合元素的尾部加斜線 2.HTML5 doctype

在每個html頁面第一行添加標(biāo)準模式的聲明，確保在每一個瀏覽器擁有一致的展現(xiàn)。

3.語言屬性

強烈建議為html根元素指定lang屬性，從而為文檔設(shè)置正確的語言。這將有助于語言合成工具確定所應(yīng)該采用的發(fā)音，有助于翻譯工具確定其翻譯時所應(yīng)遵守的規(guī)則等等。

4.IE兼容模式

IE 支持通過特定的標(biāo)簽來確定繪制當(dāng)前頁面所應(yīng)該采用的 IE 版本。除非有強烈的特殊需求，否則最好是設(shè)置為 edge mode，從而通知 IE 采用其所支持的最新的模式。

5.字符編碼

6.引入 CSS 和 JavaScript 文件

在引入 CSS 和 JavaScript 文件時一般不需要指定 type 屬性

7.實用為王

任何時候都要盡量使用最少的標(biāo)簽并保持最小的復(fù)雜度。

8.屬性順序

class

id, name

data-*

src, for, type, href, value

title, alt

role, aria-*

9.布爾（boolean）型屬性

不用賦值。

10.減少標(biāo)簽的數(shù)量

盡量避免多余的父元素。

11.JavaScript 生成的標(biāo)簽

能避免時盡量避免。

CSS 1.語法 1).用兩個空格代替制表符 2).為選擇器分組時，將多帶帶的選擇器多帶帶放在一行。 3).在每個聲明塊的左花括號前添加一個空格。 4).聲明塊的右花括號應(yīng)當(dāng)多帶帶成行。 5).每條聲明語句的 : 后應(yīng)該插入一個空格。 6).每條聲明都應(yīng)該獨占一行。 7).對于以逗號分隔的屬性值，每個逗號后面都應(yīng)該插入一個空格（例如，box-shadow）。 8).不要在 rgb()、rgba()、hsl()、hsla() 或 rect() 值的內(nèi)部的逗號后面插入空格。 9).對于屬性值或顏色參數(shù)，省略小于 1 的小數(shù)前面的 0 （例如，.5 代替 0.5；-.5px 代替 -0.5px）。 10).十六進制值應(yīng)該全部小寫,盡量使用簡寫形式的十六進制值。例如：#fff 11).為選擇器中的屬性添加雙引號，例如，input[type="text"]。 12).避免為 0 值指定單位，例如，用 margin: 0; 代替 margin: 0px;。

/* Bad CSS */
.selector, .selector-secondary, .selector[type=text] {
padding:15px;
margin:0px 0px 15px;
background-color:rgba(0, 0, 0, 0.5);
box-shadow:0px 1px 2px #CCC,inset 0 1px 0 #FFFFFF
}

/* Good CSS */
.selector,
.selector-secondary,
.selector[type="text"] {
padding: 15px;
margin-bottom: 15px;
background-color: rgba(0,0,0,.5);
box-shadow: 0 1px 2px #ccc, inset 0 1px 0 #fff;
}

2.聲明順序

Positioning

Box model

Typographic

Visual

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

    /* Box-model */
    display: block;
    float: right;
    width: 100px;
    height: 100px;

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

    /* Visual */
    background-color: #f5f5f5;
    border: 1px solid #e5e5e5;
    border-radius: 3px;

    /* Misc */
    opacity: 1;
    }

3.不要使用 @import

與標(biāo)簽相比，@import 指令要慢很多

解決辦法：

使用多個元素

通過 Sass 或 Less 類似的 CSS 預(yù)處理器將多個 CSS 文件編譯為一個文件

通過 Rails、Jekyll 或其他系統(tǒng)中提供過 CSS 文件合并功能

4.媒體查詢（Media query）的位置

不要把他們打包放在一個單一樣式文件中或者放在文檔底部，應(yīng)放在盡可能相關(guān)規(guī)則的附近。

.element { ... }
.element-avatar { ... }
.element-selected { ... }

@media (min-width: 480px) {
.element { ...}
.element-avatar { ... }
.element-selected { ... }
}

5.帶前綴的屬性

通過縮進的方式，讓每個屬性的值在垂直方向?qū)R，這樣便于多行編輯。

/* Prefixed properties */
.selector {
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15);
        box-shadow: 0 1px 2px rgba(0,0,0,.15);
}

6.單行規(guī)則聲明

對于只包含一條聲明的樣式，建議將語句放在同一行。

7.簡寫形式的屬性聲明

應(yīng)當(dāng)盡量限制使用簡寫形式的屬性聲明。常見的濫用簡寫屬性聲明的情況如下：

padding

margin

font

background

border

border-radius

    /* Bad example */
    .element {
    margin: 0 0 10px;
    background: red;
    background: url("image.jpg");
    border-radius: 3px 3px 0 0;
    }

    /* Good example */
    .element {
    margin-bottom: 10px;
    background-color: red;
    background-image: url("image.jpg");
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    }

8.Less 和 Sass 中的嵌套

避免不必要的嵌套。這是因為雖然你可以使用嵌套，但是并不意味著應(yīng)該使用嵌套。只有在必須將樣式限制在父元素內(nèi)（也就是后代選擇器），并且存在多個需要嵌套的元素時才使用嵌套。

// Without nesting
.table > thead > tr > th { … }
.table > thead > tr > td { … }

// With nesting
.table > thead > tr {
> th { … }
> td { … }
}

9.Less 和 Sass 中的操作符

在圓括號中的數(shù)學(xué)計算表達式的數(shù)值、變量和操作符之間均添加一個空格。

10.注釋

不要簡單地重申組件或 class 名稱。

對于較長的注釋，務(wù)必書寫完整的句子；對于一般性注解，可以書寫簡潔的短語。

/* Bad example */
/* Modal header */
.modal-header {
...
}

/* Good example */
/* Wrapping element for .modal-title and .modal-close */
.modal-header {
...
}

11.class 命名

class 名稱中只能出現(xiàn)小寫字符和破折號（dashe）（不是下劃線，也不是駝峰命名法）。破折號應(yīng)當(dāng)用于相關(guān) class 的命名（類似于命名空間）（例如，.btn 和 .btn-danger）。

避免過度任意的簡寫。.btn 代表 button，但是 .s 不能表達任何意思。

class 名稱應(yīng)當(dāng)盡可能短，并且意義明確。

使用有意義的名稱。使用有組織的或目的明確的名稱，不要使用表現(xiàn)形式（presentational）的名稱。

基于最近的父 class 或基本（base） class 作為新 class 的前綴。

使用 .js-* class 來標(biāo)識行為（與樣式相對），并且不要將這些 class 包含到 CSS 文件中。

    /* Bad example */
    .t { ... }
    .red { ... }
    .header { ... }

    /* Good example */
    .tweet { ... }
    .important { ... }
    .tweet-header { ... }

12.選擇器

對于通用元素使用 class ，這樣利于渲染性能的優(yōu)化。

對于經(jīng)常出現(xiàn)的組件，避免使用屬性選擇器（例如，[class^="..."]）。瀏覽器的性能會受到這些因素的影響。

選擇器要盡可能短，并且盡量限制組成選擇器的元素個數(shù)，建議不要超過 3 。

只有在必要的時候才將 class 限制在最近的父元素內(nèi)（也就是后代選擇器）（例如，不使用帶前綴的 class 時 -- 前綴類似于命名空間）。

    /* Bad example */
    span { ... }
    .page-container #stream .stream-item .tweet .tweet-header .username { ... }
    .avatar { ... }

    /* Good example */
    .avatar { ... }
    .tweet-header .username { ... }
    .tweet .avatar { ... }

13.代碼組織

以組件為單位組織代碼段。

制定一致的注釋規(guī)范。

使用一致的空白符將代碼分隔成塊，這樣利于掃描較大的文檔。

如果使用了多個 CSS 文件，將其按照組件而非頁面的形式分拆，因為頁面會被重組，而組件只會被移動。

Component section heading

    */

    .element { ... }


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

    .element { ... }

    /* Contextual sub-component or modifer */
    .element-heading { ... }

14.編輯器配置

將你的編輯器按照下面的配置進行設(shè)置，以避免常見的代碼不一致和差異：

用兩個空格代替制表符（soft-tab 即用空格代表 tab 符）。

保存文件時，刪除尾部的空白符。

設(shè)置文件編碼為 UTF-8。

在文件結(jié)尾添加一個空白行。