摘要：前端規范在實際開發中，由于團隊成員編碼習慣不一，技術層次不同，開發前定制并遵循一種代碼規范能提高代碼質量，增加開發效率。是定義了一種的命名規范，每個名稱及其組成部分都是存在一定的含義。

在實際開發中，由于團隊成員編碼習慣不一，技術層次不同，開發前定制并遵循一種代碼規范能提高代碼質量，增加開發效率。

Javascript規范直接參考airbnb:

ES6 JavaScript Style Guide

ES5 JavaScript Style Guide

React/JSX Style Guide

Block Element Modifier，它是一種前端命名方法，旨在幫助開發者實現模塊化、可復用、高可維護性和結構化的CSS代碼。

BEM是定義了一種css class的命名規范，每個名稱及其組成部分都是存在一定的含義。

由拉丁字母, 數字, -組成css的單個名稱.

Block

使用簡潔的前綴名字來命名一個獨立且有意義的抽象塊或組件。

e.g.

.block

.header

.site-search

Element

使用__連接符來連接Block 和 Element。

e.g.

.block__element

.header__title

.site-search__field

Modifier

使用--連接符來連接Block 或 Element 和 Modifier。

e.g.

.block--modifier

.block__element--modifier

.header--hide

.header__title--color-red

.site-search__field--disabled

HTML

CSS

.form {
}
.form--theme-xmas {
}
.form--simple {
}
.form__input {
}
.form__submit {
}
.form__submit--disabled {
}

HTML

  Normal button


  Success button


  Danger button

CSS

.button {
    display: inline-block;
    border-radius: 3px;
    padding: 7px 12px;
    border: 1px solid #D5D5D5;
    background-image: linear-gradient(#EEE, #DDD);
    font: 700 13px/18px Helvetica, arial;
}
.button--state-success {
    color: #FFF;
    background: #569E3D linear-gradient(#79D858, #569E3D) repeat-x;
    border-color: #4A993E;
}
.button--state-danger {
    color: #900;
}

BEM - FAQ

Object Oriented CSS，面向對象的CSS，旨在編寫高可復用、低耦合和高擴展的CSS代碼。

OOCSS是以面向對象的思想去定義樣式，將抽象和實現分離，抽離公共代碼。

在定義一個可重用性的組件庫時，我們僅創建基礎的結構（html）和基礎的類名，不應該創建類似于border, width, height, background等樣式規則，這樣使組件庫更靈活和可擴展性。組件庫在不同環境下的樣式所要求不一樣，若未能區分其結構和樣式，給其添加樣式，會使其變成一個特定的組件庫，而難以重用。

e.g.

以下是一個基礎庫創建的樣式：

.metadata{
  font-size: 1.2em;
  text-align: left;
  margin: 10px 0;
}

若在給其添加更多的樣式：

.metadata{
    font-size: 1.2em;
    margin: 10px 0;
    /*在基礎組件上新加的樣式*/
    width: 500px;
    background-color: #efefef;
    color: #fff;
}

這樣就使前面創建的基礎組件metadata變成了一個特定的組件了，使其在其他場景下較難復用。

把容器和內容獨立分區，使內容能作用于任何容器下。

e.g.

#sidebar h3 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: .8em;
  line-height: 1;
  color: #777;
  text-shadow: rgba(0, 0, 0, .3) 3px 3px 6px;
}

上面我們定義了一個id為sidebar 中 h3的樣式，但是我們發現在footer 中 h3的樣式也基本一致，僅個別不一樣，那么我們可能會這樣寫樣式：

#sidebar h3, #footer h3 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 2em;
  line-height: 1;
  color: #777;
  text-shadow: rgba(0, 0, 0, .3) 3px 3px 6px;
}

#footer h3 {
  font-size: 1.5em;
  text-shadow: rgba(0, 0, 0, .3) 2px 2px 4px;
}

甚至我們可能會用更糟糕的方式來寫這個樣式：

#sidebar h3 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 2em;
  line-height: 1;
  color: #777;
  text-shadow: rgba(0, 0, 0, .3) 3px 3px 6px;
}

#footer h3 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.5em;
  line-height: 1;
  color: #777;
  text-shadow: rgba(0, 0, 0, .3) 2px 2px 4px;
}

我們可以看到上面的代碼中出現了不必要的duplicating styles。而OOCSS鼓勵我們應該思考在不同元素中哪些樣式是通用的，然后將這些通用的樣式從模塊、組件、對象等中抽離出來，使其能在任何地方能夠復用，而不依賴于某個特定的容器。

.title-heading {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 2em;
  line-height: 1;
  color: #777;
  text-shadow: rgba(0, 0, 0, .3) 3px 3px 6px;
}
#footer .title-heading {
  font-size: 1.5em;
  text-shadow: rgba(0, 0, 0, .3) 2px 2px 4px;
}

Scalable and Modular Architecture for CSS，可擴展模塊化的CSS，它的核心就是結構化CSS代碼，提出了一種CSS分類規則，分為五種類型：

Base

Layout

Module

State

Theme

SMACSS定義了一種css文件的組織方式，其橫向的切分，使css文件更具有結構化、高可維護性。

Base是默認的樣式，是對單個元素選擇器（包括其屬性選擇器，偽類選擇器，孩子/兄弟選擇器）的基礎樣式設置，例如html, body, input[type=text], a:hover, etc.

e.g.

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

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

a {
  color: #039;
}

a:hover {
  color: #03C;
}

CSS Reset/Normalize就是一種Base Rule的應用.

Note:

在基礎樣式中不應該使用!important

不明思議，是對頁面布局元素（頁面架構中主要和次要的組件）的樣式設置，例如header, navigation, footer, sidebar, login-form, etc.

e.g.

.header, footer {
  margin: 0;
}

.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
}

.navs {
  display: inline-block;
  margin: 0 auto;
}

對公共組件樣式的設置，例如dropdown, tabs, carousels, dialogs, etc.

e.g.

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

.dropdown li:hover {
  background-color: #999;
}

.tabs {
  border: 1px solid #e8e8e8;
}

.tabs > .tab--active {
  border-bottom: none;
  color: #29A288;
}

對組件、模塊、元素等表現行為或狀態的樣式修飾，例如hide, show, is-error, etc.

e.g.

.hide {
  display: none;
}

.show {
  display: block;
}

.is-error {
  color: red;
}

對頁面整體布局樣式的設置，可以說是一種皮膚，它可以在特定場景下覆蓋base, layout等的默認樣式。

e.g.

.body--theme-sky {
  background: blue url(/static/img/body--theme-sky.png) repeat;
}

.footer--theme-sky {
  background-image: blue url("/static/img/header--theme-sky.png") no-repeat center;
}

SUITCSS

Atomic

Airbnb CSS Style Guide

這么多CSS規范，貌似還是有沖突等問題，咋辦呀？

世上沒有完美方案，只有合適/最佳方案～

讓我門一起期待Web Components到來吧～