編碼規范

CoreDump 發布于2019-08-02 10:52 / 2362人閱讀

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

黃金定律

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

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

在每個html頁面第一行添加標準模式的聲明，確保在每一個瀏覽器擁有一致的展現。

3.語言屬性

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

4.IE兼容模式

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

5.字符編碼

6.引入 CSS 和 JavaScript 文件

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

7.實用為王

任何時候都要盡量使用最少的標簽并保持最小的復雜度。

8.屬性順序

class

id, name

data-*

src, for, type, href, value

title, alt

role, aria-*

9.布爾（boolean）型屬性

不用賦值。

10.減少標簽的數量

盡量避免多余的父元素。

11.JavaScript 生成的標簽

能避免時盡量避免。

CSS 1.語法 1).用兩個空格代替制表符 2).為選擇器分組時，將多帶帶的選擇器多帶帶放在一行。 3).在每個聲明塊的左花括號前添加一個空格。 4).聲明塊的右花括號應當多帶帶成行。 5).每條聲明語句的 : 后應該插入一個空格。 6).每條聲明都應該獨占一行。 7).對于以逗號分隔的屬性值，每個逗號后面都應該插入一個空格（例如，box-shadow）。 8).不要在 rgb()、rgba()、hsl()、hsla() 或 rect() 值的內部的逗號后面插入空格。 9).對于屬性值或顏色參數，省略小于 1 的小數前面的 0 （例如，.5 代替 0.5；-.5px 代替 -0.5px）。 10).十六進制值應該全部小寫,盡量使用簡寫形式的十六進制值。例如：#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

與標簽相比，@import 指令要慢很多

解決辦法：

使用多個元素

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

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

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

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

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

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

5.帶前綴的屬性

通過縮進的方式，讓每個屬性的值在垂直方向對齊，這樣便于多行編輯。

/* 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.單行規則聲明

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

7.簡寫形式的屬性聲明

應當盡量限制使用簡寫形式的屬性聲明。常見的濫用簡寫屬性聲明的情況如下：

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 中的嵌套

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

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

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

9.Less 和 Sass 中的操作符

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

10.注釋

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

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

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

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

11.class 命名

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

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

class 名稱應當盡可能短，并且意義明確。

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

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

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

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

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

12.選擇器

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

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

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

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

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

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

13.代碼組織

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

制定一致的注釋規范。

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

如果使用了多個 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.編輯器配置

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

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

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

設置文件編碼為 UTF-8。

在文件結尾添加一個空白行。

GPU云服務器云服務器規范編碼編碼規范 php編碼規范 js安全編碼規范

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

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

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

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

reclay 2019-08-29 16:58 評論0 收藏0
PHP 標準規范

摘要：標準規范簡介是的簡寫，由組織制定的規范，是開發的實踐標準。具體標準有有了統一編碼風格規范，更有利于查看和學習各個框架或類庫，不不需要每次都適應新的編碼風格。同時在開發團隊內部使用統一的編碼規范更有利于代碼審查版本控制團隊內部交流。 PHP 標準規范 PSR PSR 簡介 PSR 是 PHP Standard Recommendations 的簡寫，由 PHP FIG 組織制定的 PHP...

FuisonDesign 2019-07-01 10:06 評論0 收藏0
我的php編碼規范

摘要：為什么我們要培養自己的編碼規范我們寫代碼的時候，一個好的編碼規范，對我們來說能夠起到很多意向不到的效果。至少會有一下的好處提高我們的編碼效率。為什么我們要培養自己的編碼規范？我們寫代碼的時候，一個好的編碼規范，對我們來說能夠起到很多意向不到的效果。至少會有一下的好處：1、提高我們的編碼效率。整齊劃一的代碼方便我們進行復制粘貼嘛！2、提高代碼的可讀性。3、顯示我們專業。別人看到了我們...

RiverLi 2019-06-27 11:33 評論0 收藏0
在 React-CRA 應用中配合 VSCode 使用 ESLint 實踐前端代碼規范

摘要：編碼規范是獨角獸公司內部的編碼規范，該項目是上很受歡迎的一個開源項目，在前端開發中使用廣泛，本文的配置規則就是以編碼規范和編碼規范作為基礎的。更新時間：2019-01-22React.js create-react-app 項目 + VSCode 編輯器 + ESLint 代碼檢查工具 + Airbnb 編碼規范前言為什么要使用 ESLint 在項目開發過程中，編寫符合團隊編碼規...

Hujiawei 2019-08-23 14:55 評論0 收藏0
PHP編碼規范

摘要：為什么需要編碼規范為了提高工作效率，保證開發的有效性和合理性。在文件編碼中，選擇推薦在換行符中，選擇推薦文件命名程序的文件名和目錄名都采用有意義的英文命名。最后最后說的是，本規范不是強制，也不是標準。回復編碼規范即可。為什么需要編碼規范？為了提高工作效率，保證開發的有效性和合理性。為了提高代碼可讀性和可重復利用性，從而節約溝通成本。本文主要參考了 PEAR 規范，并進行適當...

xuweijian 2019-06-27 15:27 評論0 收藏0
HTML編碼規范

摘要：當然我們還可以引入框架，這些框架一般都自帶模板處理引擎，比如等語義化命名和語義化標簽我們盡量多采用語義化來命名，并且采用語義化標簽來書寫代碼，多用中新增的標簽來書寫。 1.黃金法則（Golden rule）不管有多少人參與同一個項目，一定要確保每一行代碼都像是同一個人編寫的。 Every line of code should appear to be written by a si...

nifhlheimr 2019-08-01 14:50 評論0 收藏0