模塊化css

模塊化css是指把頁面分割成不一樣的組成部分，這些組成部分能夠在多種上下文中重複使用，而且互相之間沒有依賴關係。當咱們須要變動樣式時不會影響到其它部分。

基礎樣式

默認的樣式，是對單個元素選擇器（包括其屬性選擇器，僞類選擇器，孩子/兄弟選擇器）的基礎樣式設置，例如html, body, input[type=text], a:hover, etc.推薦個base庫-normalize.css，它消除了不一樣瀏覽器渲染的不一樣

html, body {
  margin: 0;
  padding: 0;
}

input[type=text] {
  border: 1px solid #999;
}

a {
  color: #039;
}

a:hover {
  color: #03C;
}

模塊

頁面拆分爲不一樣的模塊，給這些模塊編寫獨立樣式，模塊與子模塊之間通常如下橫線鏈接

//下拉
.dropdown, .dropdown > ul {
  display: inline-block;
  border: 1px solid #283AE2;
}

.dropdown li:hover {
  background-color: #999;
}
//media
.media{padding:30px;background-color:#eeeee};
.media_title{
   font-size:16px;
   font-weight:bold
}

修飾類

對一個模塊進行修飾，通常以雙橫線相連。下面以button模塊爲例

.btn{
  padding: .3em 1em;
  font-size: 14px;
  outline: none;
  color: #333333;
  cursor: pointer;
  border: 1px solid #eee
}
.btn--small{
  font-size: 12px;
}
.btn--large{
  font-size: 16px;
}

狀態類（通常配合js來進行樣式切換）

狀態類通常以is-或者has-開頭，這樣的狀態類通常來描繪模塊當前狀態下的一些特徵。好比is-expanded、is-loading或者has-error

//input
input.is-error{
  color:red
}
//tab
.tabs {
  border: 1px solid #e8e8e8;
}
.tabs > .tab{
  color:#333333;
  border:none;
}
.tabs > .tab.is-active {
  border-bottom: 1px solid red;
  color: #29A288;
}

工具類

有時候咱們須要一個類來作一件簡單的事，好比讓文字居中，讓元素顯示，隱藏，左浮動等

.text-align{
  text-align: center!important;
}
.float-left{
  float: left!important;
}
.show{
  display: block!important;
}
.hide{
  display: none!important;
}

這裏用到了important,由於咱們在使用這些工具類時確定是爲了它的樣式，因此要把優先級提到最高，防止覆蓋

注意點

一、千萬不要使用基於頁面位置的後代選擇器

好比header和footer都有button，可是header中的是紅色字體，那麼咱們不能寫header .btn這樣的類，而是應該給button增長修飾類btn--danger

.header .btn{
  color:red
}//錯誤寫法
.btn--danger{
  color:red
}//正確寫法

二、不要使用像buttn-20px這樣精確的修飾符，會爲後續修改帶來很大的麻煩

三、不要濫用工具類，對於大部分網站來講，最多十幾個工具類就足夠了