寫法整理

日常編寫代碼時的一些寫法整理，作爲參考使用，不定期更新，盡量讓自己的代碼統一、規範。

---

HTML

屬性順序

• class
• id,name
• date-*
• src,for,type,href,value
• title,alt
• role,aria-*
  ( aria-*的作用就是描述這個tag在可視化的情境中的具體信息)

常用命名

• 頭部：header
• 内容：content
• 底部/尾部：footer
• 導航：nav
• 側邊欄：sidebar
• 標志：logo
• 頁面主體：main
• 海報：banner
• 廣告（區別于海報）：AD
• 新聞：news
• 菜單：menu
• 搜索：search
• 版權：copyright
• 標簽：tags
• 滾動：scroll
• 標題：title
• 文字：txt/text
• 狀態：state

CSS

聲明順序

• Positioning
• Box model
• Typographic
• Visual
  引用bootstrap編碼規範：

.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;
}

編寫方法

SMACSS
SMACSS是Scalable and Modular Architecture for CSS，簡單說就是可擴展和模塊化的CSS架構。
它將樣式分爲5種類型：Base、Layout、Module、State、Theme。
也就是Base（基礎樣式）、Layout（佈局樣式）、Module（模塊樣式）、State（狀態樣式）、Theme（皮膚樣式）
BEM
BEM是Block、Element、Modifier的縮寫，好處在於將頁面的CSS模塊化，每個block就是一個模塊，相互獨立。

<div class="block">
    <div class="element"></div>
    <div class="element modifier"></div>/*特殊外觀的子模塊*/
</div>
<div class="block modifier">/*特殊外觀的模塊*/
    <div class="element"></div>
</div>

可被繼承的屬性

内聯元素：

• letter-spacing
• word-spacing
• white-space
• line-height
• color
• font
• font-family
• font-size
• font-style
• font-variant
• font-weight
• text-decoration
• text-transform
• direction

塊狀元素：

• text-indent
• text-align

列表元素：

• list-style
• list-style-type
• list-style-position
• list-style-image

表格元素：

• border-collapse

常用命名

注意點：

• CSS不要嵌套太多層，最好不要超過3層
• 提取公共部分
• 命名應具有可讀性