本篇主要介紹一些CSS的注意事項 , 默認是有前置CSS知識的。

1. 每塊代碼之間間隔有序，不至于給人一個無比龐大的概念。
2. 層級控制不超過 3 層，避免了過多嵌套層級“惡心”人。
3. 遵循了 BEM 命名規(guī)范，潛在的傳遞了關(guān)于元素之間的層級關(guān)系。

少即是多(Less is more):

// 存在多余的代碼
.footer {
  margin-top: 30px;
  margin-bottom: 20px;
}

// 優(yōu)化
.footer {
 margin: 30px 0 20px 0;
}

自解釋(CSS 的書寫要盡量說明自己是干什么的):

// 存在模糊地方
.footer:first-child {
  color: #FFF;
  font-size: 18px;
}

//優(yōu)化
.footer-title {
  color: #FFF;
  font-size: 18px;
}

BEM 命名本身已經(jīng)很好的完善了一些css的規(guī)則。這套規(guī)范即避免了不同文件下的命名沖突，還很好的賦予了 CSS 類名的語義化。讓我們的腦子對于 CSS 那種模糊的印象變得條理清晰。

<div class="person-center__wrap">
    <div class="person-center__main">
    <div class="userInfo-name">
      王狗蛋
    </div>
    <div class="userinfo-age">
      24
    </div>
  </div>
  <div class="person-center__footer">
    <div class="sctions-comfirm">
      確定
    </div>
  </div>
</div>

實用類(例如一個用來移除默認列表樣式的類):

.nobullets {
  list-style: none;
  margin: 0;
  padding: 0;
}

避免太特定的選擇器:

//之前
article.main p.box {
  border: 1px solid #ccc;
}
//之后
.box {
  border: 1px solid #ccc;
}

分割大樣式表為多個小樣式表:

一般項目中都會有一個 styles，里面存儲一些全局共用的樣式文件。根據(jù)這些文件的作用，一般又會被細分為reset.csss、variables.less等文件。搭配上預(yù)處理語言的 mixin 功能，我們就可以維護一份常用的樣式文件，避免在具體的頁面書寫冗雜的 CSS 代碼。