代碼規范

命名規則

  • 1 全部采用小寫的方式，以下劃線分隔
    eg：my_project_name

  • 2 有復數結構時，要采用復數命名法
    eg：scripts 、styles 、 images 、 data_models

HTML

  • 1 縮進使用soft tab (4個空格)

  • 2 在屬性上，使用雙引號，不要使用單引號

  • 3 不要忽略自動閉合標簽結尾處使用斜線和可選的關閉標簽
    eg：<img /> , <li></li>

  • 4 lang 屬性 規定加上，常用的有如下
    <html lang="en-us"></html>
    <html lang="zh-cn"></html>
    <html lang="zh-hk"></html>
    <html lang="zh-tw"></html>

  • 5 字符編碼 指定為"UTF-8"

  • 6 IE兼容模式： 用<meta>標簽指定頁面應該用什么版本的IE來渲染，可通過連接鏈接了解更多
    eg：<meta http-equiv="X-UA-Compatible content="IE=Edge"/>

http://stackoverflow.com/questions/6771258/whats-the-difference-if-meta-http-equiv-x-ua-compatible-content-ie-edge-e

  • 7 引入css,js：不需要指明type

    <link rel="stylesheet" href="code_guide.css/>

    <!-- In-document CSS -->
<style>
      ...
</style>

<!-- External JS -->
<script src="code_guide.js"></script>

<!-- In-document JS -->
<script> 
    ...
</script>

    • 8 屬性順序：屬性應該按照特定的順序出現以保證易讀性

       * class
 * id
 * name
 * src ,   value , data-* , href
 * for , type , max-length , max , min , pattern
 * placeholder, title, alt
 * aria-*, role
 * required , readonly , disabled

    • 9 boolean屬性：不需要聲明取值的屬性
      eg：<input type="text" disabled />
      <input type="checkbox" value="1" checked />
      <select>
      <option value="1" selected >1</option>
      </select>

  • 10 減少標簽數量：需要盡量避免多余的父節點

CSS

  • 1 分號 空格
    以下幾種情況不需要空格：

    屬性名后
多個規則的分隔符','前
!important'!'后
屬性值中'('后和')'前
行末不要有多余的空格

以下幾種情況需要空格：

屬性值前
選擇器'>', '+', '~'前后
'{'前
!important '!'前
@else前后
屬性值中的','后
注釋'/*'后和'*/'前

eg：
      .element,
      .dialog,
      .element > .dialog{
            color: red !important; 
            background-color: rgba(0, 0, 0, .5);
      }

  • 2 空行 換行

      以下幾種情況需要空行：
  文件最后保留一個空行
  '}'后最好跟一個空行，包括scss中嵌套的規則
  屬性之間需要適當的空行

  以下幾種情況不需要換行：
   '{'前

  以下幾種情況需要換行：
  '{'后和'}'前
  每個屬性獨占一行
  多個規則的分隔符','后

   eg：
        .element,
        .dialog,
        .element > .dialog{
              color: red !important; 
              background-color: rgba(0, 0, 0, .5);
        }

        .dialog { 
             color: red; 
             &:after {
                  ... 
             }
       }

  • 3 屬性聲明順序

// 下面是推薦的屬性的順序
[
    [
        "display",
        "visibility",
        "float",
        "clear",
        "overflow",
        "overflow-x",
        "overflow-y",
        "clip",
        "zoom"
    ],
    [
        "table-layout",
        "empty-cells",
        "caption-side",
        "border-spacing",
        "border-collapse",
        "list-style",
        "list-style-position",
        "list-style-type",
        "list-style-image"
    ],
    [
        "-webkit-box-orient",
        "-webkit-box-direction",
        "-webkit-box-decoration-break",
        "-webkit-box-pack",
        "-webkit-box-align",
        "-webkit-box-flex"
    ],
    [
        "position",
        "top",
        "right",
        "bottom",
        "left",
        "z-index"
    ],
    [
        "margin",
        "margin-top",
        "margin-right",
        "margin-bottom",
        "margin-left",
        "-webkit-box-sizing",
        "-moz-box-sizing",
        "box-sizing",
        "border",
        "border-width",
        "border-style",
        "border-color",
        "border-top",
        "border-top-width",
        "border-top-style",
        "border-top-color",
        "border-right",
        "border-right-width",
        "border-right-style",
        "border-right-color",
        "border-bottom",
        "border-bottom-width",
        "border-bottom-style",
        "border-bottom-color",
        "border-left",
        "border-left-width",
        "border-left-style",
        "border-left-color",
        "-webkit-border-radius",
        "-moz-border-radius",
        "border-radius",
        "-webkit-border-top-left-radius",
        "-moz-border-radius-topleft",
        "border-top-left-radius",
        "-webkit-border-top-right-radius",
        "-moz-border-radius-topright",
        "border-top-right-radius",
        "-webkit-border-bottom-right-radius",
        "-moz-border-radius-bottomright",
        "border-bottom-right-radius",
        "-webkit-border-bottom-left-radius",
        "-moz-border-radius-bottomleft",
        "border-bottom-left-radius",
        "-webkit-border-image",
        "-moz-border-image",
        "-o-border-image",
        "border-image",
        "-webkit-border-image-source",
        "-moz-border-image-source",
        "-o-border-image-source",
        "border-image-source",
        "-webkit-border-image-slice",
        "-moz-border-image-slice",
        "-o-border-image-slice",
        "border-image-slice",
        "-webkit-border-image-width",
        "-moz-border-image-width",
        "-o-border-image-width",
        "border-image-width",
        "-webkit-border-image-outset",
        "-moz-border-image-outset",
        "-o-border-image-outset",
        "border-image-outset",
        "-webkit-border-image-repeat",
        "-moz-border-image-repeat",
        "-o-border-image-repeat",
        "border-image-repeat",
        "padding",
        "padding-top",
        "padding-right",
        "padding-bottom",
        "padding-left",
        "width",
        "min-width",
        "max-width",
        "height",
        "min-height",
        "max-height"
    ],
    [
        "font",
        "font-family",
        "font-size",
        "font-weight",
        "font-style",
        "font-variant",
        "font-size-adjust",
        "font-stretch",
        "font-effect",
        "font-emphasize",
        "font-emphasize-position",
        "font-emphasize-style",
        "font-smooth",
        "line-height",
        "text-align",
        "-webkit-text-align-last",
        "-moz-text-align-last",
        "-ms-text-align-last",
        "text-align-last",
        "vertical-align",
        "white-space",
        "text-decoration",
        "text-emphasis",
        "text-emphasis-color",
        "text-emphasis-style",
        "text-emphasis-position",
        "text-indent",
        "-ms-text-justify",
        "text-justify",
        "letter-spacing",
        "word-spacing",
        "-ms-writing-mode",
        "text-outline",
        "text-transform",
        "text-wrap",
        "-ms-text-overflow",
        "text-overflow",
        "text-overflow-ellipsis",
        "text-overflow-mode",
        "-ms-word-wrap",
        "word-wrap",
        "-ms-word-break",
        "word-break"
    ],
    [
        "color",
        "background",
        "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader",
        "background-color",
        "background-image",
        "background-repeat",
        "background-attachment",
        "background-position",
        "-ms-background-position-x",
        "background-position-x",
        "-ms-background-position-y",
        "background-position-y",
        "-webkit-background-clip",
        "-moz-background-clip",
        "background-clip",
        "background-origin",
        "-webkit-background-size",
        "-moz-background-size",
        "-o-background-size",
        "background-size"
    ],
    [
        "outline",
        "outline-width",
        "outline-style",
        "outline-color",
        "outline-offset",
        "opacity",
        "filter:progid:DXImageTransform.Microsoft.Alpha(Opacity",
        "-ms-filter:\\'progid:DXImageTransform.Microsoft.Alpha",
        "-ms-interpolation-mode",
        "-webkit-box-shadow",
        "-moz-box-shadow",
        "box-shadow",
        "filter:progid:DXImageTransform.Microsoft.gradient",
        "-ms-filter:\\'progid:DXImageTransform.Microsoft.gradient",
        "text-shadow"
    ],
    [
        "-webkit-transition",
        "-moz-transition",
        "-ms-transition",
        "-o-transition",
        "transition",
        "-webkit-transition-delay",
        "-moz-transition-delay",
        "-ms-transition-delay",
        "-o-transition-delay",
        "transition-delay",
        "-webkit-transition-timing-function",
        "-moz-transition-timing-function",
        "-ms-transition-timing-function",
        "-o-transition-timing-function",
        "transition-timing-function",
        "-webkit-transition-duration",
        "-moz-transition-duration",
        "-ms-transition-duration",
        "-o-transition-duration",
        "transition-duration",
        "-webkit-transition-property",
        "-moz-transition-property",
        "-ms-transition-property",
        "-o-transition-property",
        "transition-property",
        "-webkit-transform",
        "-moz-transform",
        "-ms-transform",
        "-o-transform",
        "transform",
        "-webkit-transform-origin",
        "-moz-transform-origin",
        "-ms-transform-origin",
        "-o-transform-origin",
        "transform-origin",
        "-webkit-animation",
        "-moz-animation",
        "-ms-animation",
        "-o-animation",
        "animation",
        "-webkit-animation-name",
        "-moz-animation-name",
        "-ms-animation-name",
        "-o-animation-name",
        "animation-name",
        "-webkit-animation-duration",
        "-moz-animation-duration",
        "-ms-animation-duration",
        "-o-animation-duration",
        "animation-duration",
        "-webkit-animation-play-state",
        "-moz-animation-play-state",
        "-ms-animation-play-state",
        "-o-animation-play-state",
        "animation-play-state",
        "-webkit-animation-timing-function",
        "-moz-animation-timing-function",
        "-ms-animation-timing-function",
        "-o-animation-timing-function",
        "animation-timing-function",
        "-webkit-animation-delay",
        "-moz-animation-delay",
        "-ms-animation-delay",
        "-o-animation-delay",
        "animation-delay",
        "-webkit-animation-iteration-count",
        "-moz-animation-iteration-count",
        "-ms-animation-iteration-count",
        "-o-animation-iteration-count",
        "animation-iteration-count",
        "-webkit-animation-direction",
        "-moz-animation-direction",
        "-ms-animation-direction",
        "-o-animation-direction",
        "animation-direction"
    ],
    [
        "content",
        "quotes",
        "counter-reset",
        "counter-increment",
        "resize",
        "cursor",
        "-webkit-user-select",
        "-moz-user-select",
        "-ms-user-select",
        "user-select",
        "nav-index",
        "nav-up",
        "nav-right",
        "nav-down",
        "nav-left",
        "-moz-tab-size",
        "-o-tab-size",
        "tab-size",
        "-webkit-hyphens",
        "-moz-hyphens",
        "hyphens",
        "pointer-events"
    ]
]

  • 4 媒體查詢：盡量將媒體查詢的規則靠近與他們相關的規則，不要將他們一起放到一個獨立的樣式文件中，或者丟在文檔的最底部，這樣做只會讓大家以后更容易忘記他們。

  • 5 不要在一個文件里出現兩個相同的規則
    eg：用 border: 0; 代替 border: none;

JS

  • 1 分號
以下幾種情況后需加分號：
變量聲明
表達式
return
throw
break
continue
do-while
  • 2 引號：最外層統一使用單引號。
var y = 'foo',
      z = '<div id="test"></div>';
  • 3 變量命名
標準變量采用駝峰式命名（除了對象的屬性外，主要是考慮到cgi返回的數據）
'ID'在變量名中全大寫
'URL'在變量名中全大寫
'Android'在變量名中大寫第一個字母
'iOS'在變量名中小寫第一個，大寫后兩個字母
常量全大寫，用下劃線連接
構造函數，大寫第一個字母
jquery對象必須以'$'開頭命名
  • 4 括號
下列關鍵字后必須有大括號（即使代碼塊的內容只有一行）：
if, 
else,
for,
while,
do,
switch,
try,
catch,
finally,
with,
  • 5 null
適用場景：
      初始化一個將來可能被賦值為對象的變量
      與已經初始化的變量做比較
      作為一個參數為對象的函數的調用傳參
      作為一個返回對象的函數的返回值
不適用場景：
      不要用null來判斷函數調用時有無傳參
      不要與未初始化的變量做比較
  • 6 undefined
//永遠不要直接使用undefined進行變量判斷；
//使用typeof和字符串'undefined'對變量進行判斷。
if (typeof person === 'undefined') { ...}
  • 7 jshint
1、用'===', '!=='代替'==', '!='；
2、for-in里一定要有hasOwnProperty的判斷；
3、不要在內置對象的原型上添加方法，如Array, Date；
4、不要在內層作用域的代碼里聲明了變量，之后卻訪問到了外層作用域的同名變量；
5、變量不要先使用后聲明；
6、不要在一句代碼中單單使用構造函數，記得將其賦值給某個變量；
7、不要在同個作用域下聲明同名變量；
8、不要在一些不需要的地方加括號，例：delete(a.b)；
9、不要使用未聲明的變量（全局變量需要加到.jshintrc文件的globals屬性里面）；
10、不要聲明了變量卻不使用；
11、不要在應該做比較的地方做賦值；
12、debugger不要出現在提交的代碼里；
13、數組中不要存在空元素；
14、不要在循環內部聲明函數；
15、不要像這樣使用構造函數，例：new function () { ... }, new Object；

if (a === 1) { 
      a++;
}
for (key in obj) { 
      if (obj.hasOwnProperty(key)) { 
            // be sure that obj[key] belongs to the object and was not inherited
            console.log(obj[key]); 
      }
}
var person = new Person();
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 各種純css圖標 CSS3可以實現很多漂亮的圖形，我收集了32種圖形，在下面列出。直接用CSS3畫出這些圖形，要比...
    劍殘閱讀 9,700評論 0贊 8
  • 1、垂直對齊 如果你用CSS，則你會有困惑：我該怎么垂直對齊容器中的元素？現在，利用CSS3的Transform，...
    kiddings閱讀 3,205評論 0贊 11
  • 選擇qi：是表達式 標簽選擇器 類選擇器 屬性選擇器 繼承屬性： color，font，text－align，li...
    love2013閱讀 2,337評論 0贊 11
  • 選擇qi：是表達式 標簽選擇器 類選擇器 屬性選擇器 繼承屬性： color，font，text－align，li...
    wzhiq896閱讀 1,805評論 0贊 2
  • 本文是我總結的我個人求職過程中的經驗，是按求職步驟來寫的。寫得比較細，因為我自己求職時的準備和每次面試完后的總結也...
    肅尋閱讀 959評論 0贊 4