目的

• 提供一致，合理的開發(fā)基礎(chǔ)
• 應(yīng)對(duì)變化
• 提升效率

CSS reset和normalize.css

• CSS reset設(shè)置HTML標(biāo)簽的默認(rèn)樣式鹊漠，使其在各個(gè)瀏覽器表現(xiàn)基本一致，讓默認(rèn)樣式歸零酝豪。
• normalize.css置HTML標(biāo)簽的默認(rèn)樣式称簿，使其在各個(gè)瀏覽器表現(xiàn)基本一致耸棒，保留默認(rèn)樣式丰歌。

CSS模塊

• 可復(fù)用的CSS代碼段
• 與模塊在HTML中的位置無關(guān)
• （一般）與使用的HTML標(biāo)簽無關(guān)

CSS模塊原則

• 面向?qū)ο螅∣OCSS）
  • 結(jié)構(gòu)和皮膚的分離
    舉個(gè)栗子： .btn（結(jié)構(gòu)） .btn-info（皮膚） .btn-danger（皮膚）
  • 容器和內(nèi)容的分離
• 單一職責(zé)（SRP）
  • 盡可能的拆分成可獨(dú)立復(fù)用的組件
  • 使用組合方式使用多個(gè)組件
  • 比如將布局和其他樣式拆分
    舉個(gè)栗子：

/* bad example */
.error-massage{
      display:block;
      padding:10px;
      border-top:1px solid #f00;
      border-bottom:1px solid #f00;
      background-color:#fee;
      color:#f00;
      font-weight:bold;
}
.success-massage{
      display:block;
      padding:10px;
      border-top:1px solid #f00;
      border-bottom:1px solid #f00;
      background-color:#efe;
      color:#0f0;
      font-weight:bold;
}
/* better example */
.box{
      display:block;
      padding:10px;
}
.massage{
      border-top:1px solid #f00;
      border-bottom:1px solid #f00;
      font-weight:bold;
}
.massage-error{
      background-color:#fee;
  color:#f00;
}
.massage-success{
      background-color:#efe;
      color:#0f0;
}

• 開閉原則
  • 對(duì)擴(kuò)展開發(fā)
  • 對(duì)修改封閉
    舉個(gè)栗子：

.box{
      display:block;
      padding:10px;
}  
/* bad example */
.content .box{
      padding:20px;
}
/* better example */
.box-large{
      padding:20px;
}

• DRY（Don't Repeat Yourself）
  舉個(gè)栗子：

/* bad example */
selector{
      border-top:1px solid #eee;
      border-left:1px solid #eee;
      border-bottom:1px solid #eee;
}
/* better example */
selector{
      border:1px solid #eee;
      border-right:none;
}

命名Naming

• 基于功能
  • 它是用來做什么的
  • .btn/.list/.form/.external-link
• 基于內(nèi)容
  • 元素里面放置什么內(nèi)容
  • .news/.help/.user-info
• 基于視覺
  • 看起來是什么樣
  • .nowrap

命名原則

• 優(yōu)先使用基于功能的命名
  樣式與功能無關(guān)
• 中小型網(wǎng)站可以基于內(nèi)容命名
• 大型網(wǎng)站可以使用基于視覺命名
  不要使用太具體的樣式

命名規(guī)范

BEM

• Block
• Element
• Modifer
  舉個(gè)栗子

<!-- Block(moudle/compuent) --> 
 <nav class="tabs">
 </nav>
<!-- Element --> 
      <a href="#" class="tabs_items">HTML</a>
      <a href="#" class="tabs_items">CSS</a>
      <a href="#" class="tabs_items">JavaScript</a>
<!-- Modifer(修飾) --> 
 <nav class="tabs tabs--stacked">
        <a href="#" class="tabs_items tabs_items--active">HTML</a>
 </nav>
  <!-- .block__element---modifer--> 
<nav class="tabs tabs--stacked">
      <a href="#" class="tabs_items tabs_items--active">HTML</a>
      <a href="#" class="tabs_items" class="tabs-items">CSS</a>
      <a href="#" class="tabs_items">JavaScript</a>
  </nav>

編寫簡潔易維護(hù)的CSS代碼

CSS預(yù)處理器

• less
• Sass
• Stylus
• PostCSS