摘要：屬性順序標(biāo)簽標(biāo)簽標(biāo)簽必須加上命名命名規(guī)范名稱(chēng)中只能出現(xiàn)小寫(xiě)字符和破折號(hào)使用有意義的名稱(chēng)，使用有組織的或目的明確的名稱(chēng)名稱(chēng)應(yīng)當(dāng)盡可能短，并且意義明確，避免過(guò)度任意的簡(jiǎn)寫(xiě)。而是一個(gè)尚未被改變過(guò)的也是屬于的元素。

class
id
data-*,name
src, for, type, href
title, alt
aria-*, role

/*a標(biāo)簽*/

  Example link


/*input標(biāo)簽*/


/*img標(biāo)簽 img必須加上alt*/


html

class 名稱(chēng)中只能出現(xiàn)小寫(xiě)字符和破折號(hào)"-";

class 使用有意義的名稱(chēng)，使用有組織的或目的明確的名稱(chēng);

class 名稱(chēng)應(yīng)當(dāng)盡可能短，并且意義明確，避免過(guò)度任意的簡(jiǎn)寫(xiě)。.btn 代表 button，但是 .s 不能表達(dá)任何意思;

/* 塊--代表更高級(jí)別的抽象或組件 */
.block

/* 元素--代表.block的后代 */
.block_element

/* 修飾符--代表.block的不同狀態(tài)或不同版本 */
.block--modifier

/* 例如 */
.media{}
.media_img{}
.media_img--rev{}
.media_body{}

  
  

    
Welcome to Foo Corp
    
Foo Corp is the best, seriously!
  

/*.media是一個(gè)塊，.media_img--rev是一個(gè)加了修飾符的.media_img的變體，它是屬于.media的元素。而.media_body是一個(gè)尚未被改變過(guò)的也是屬于.media的元素。*/

html

/* --base 基本-- */
.header                 /* --頭部-- */
.logo                   /* --logo-- */
.footer                 /* --底部-- */
.nav                    /* --導(dǎo)航-- */
.top-nav                /* --頂部導(dǎo)航鏈接-- */
.main                   /* --主體內(nèi)容-- */
.container              /* --內(nèi)容居中-- */

--current               /* --默認(rèn)狀態(tài)-- */
-title                  /* --標(biāo)題-- */
-item                   /* --列表-- */
-con                    /* --內(nèi)容-- */
icon-                   /* --圖標(biāo)- */

/* --側(cè)邊欄-- */
.aside
.aside-nav              /* --側(cè)邊欄導(dǎo)航-- */
.aside-nav_item         /* --側(cè)邊欄分類(lèi)-- */
.aside-nav--current     /* --側(cè)邊欄當(dāng)前狀態(tài)-- */

/* --盒子-- */
.box
.box-title              /* --盒子標(biāo)題-- */
.box-title_txt          /* --盒子標(biāo)題文字-- */
.box-con                /* --盒子內(nèi)容-- */

.selector{
  /*顯示相關(guān)*/
  display
  float
  clear
  cursor
  content

  /*定位等*/
  position
  top
  left
  z-index

  /*盒模型*/
  margin
  padding
  width
  height
  border
  border-radius

  /*排版文字等*/
  color
  font
  vertical-align
  line-height
  white-space
  text-decoration
  text-align

  /*背景*/
  background
  opacity
}

如：
.selector {
  display: block;
  float: right;

  position: absolute;
  top: 0;
  right: 0;
  z-index: 100;

  width: 100px;
  height: 100px;
  border: 1px solid #e5e5e5;
  border-radius: 3px;

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

  background-color: #f5f5f5;
}

css

/* less嵌套不超過(guò)三層 */
.aside-nav{
  margin-bottom: 10px;
  margin-top: 0;

  dt {
    cursor: pointer;
    background: #fff;

    a {
      text-decoration: none;
      color: @cDark;
    }
  }

  dd {
    display: none;
    height: 30px;
    padding-left: 20px;
    line-height: 30px;
  }
}

less

index.less                  /* --首頁(yè)樣式-- */
header.less                 /* --頭部樣式-- */
footer.less                 /* --底部樣式-- */
bass.less                   /* --基本樣式-- */
box.less                    /* --盒子樣式-- */
table.less                  /* --表格樣式-- */
buttom.less                 /* --按鈕樣式-- */
icon.less                   /* --圖標(biāo)樣式-- */
iconfont.less               /* --圖標(biāo)字體樣式-- */
variable.less               /* --less變量樣式-- */
forms.less                  /* --表單樣式-- */
aside.less                  /* --側(cè)邊樣式-- */
normalize.less              /* --重置樣式-- */
paginator.less              /* --分頁(yè)樣式-- */
login.less                  /* --登錄樣式-- */
reg.less                    /* --注冊(cè)樣式-- */

ul***.less                  /* --以u(píng)i開(kāi)頭是插件樣式-- */

html和css/less都用兩個(gè)空格代替制表符（tab）進(jìn)行縮進(jìn)

以組件為單位組織代碼段

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

使用一致的空白符將代碼分隔成塊

為選擇器分組時(shí)，將多帶帶的選擇器多帶帶放在一行

聲明塊的右花括號(hào)應(yīng)當(dāng)多帶帶成行

每條聲明都應(yīng)該獨(dú)占一行，所有聲明語(yǔ)句都應(yīng)當(dāng)以分號(hào)結(jié)尾

盡量使用簡(jiǎn)寫(xiě)形式的十六進(jìn)制，十六進(jìn)制值應(yīng)該全部小寫(xiě)，例如，#fff

避免為 0 值指定單位，例如，用 margin: 0; 代替 margin: 0px;

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

/* Single declarations on one line */
.span1 { width: 60px; }
.span2 { width: 140px; }
.span3 { width: 220px; }

/* Multiple declarations, one per line */
.sprite {
  display: inline-block;
  width: 16px;
  height: 15px;
  background-image: url(../img/sprite.png);
}

css