摘要：前端規(guī)范在實(shí)際開(kāi)發(fā)中，由于團(tuán)隊(duì)成員編碼習(xí)慣不一，技術(shù)層次不同，開(kāi)發(fā)前定制并遵循一種代碼規(guī)范能提高代碼質(zhì)量，增加開(kāi)發(fā)效率。是定義了一種的命名規(guī)范，每個(gè)名稱(chēng)及其組成部分都是存在一定的含義。

在實(shí)際開(kāi)發(fā)中，由于團(tuán)隊(duì)成員編碼習(xí)慣不一，技術(shù)層次不同，開(kāi)發(fā)前定制并遵循一種代碼規(guī)范能提高代碼質(zhì)量，增加開(kāi)發(fā)效率。

Javascript規(guī)范直接參考airbnb:

ES6 JavaScript Style Guide

ES5 JavaScript Style Guide

React/JSX Style Guide

Block Element Modifier，它是一種前端命名方法，旨在幫助開(kāi)發(fā)者實(shí)現(xiàn)模塊化、可復(fù)用、高可維護(hù)性和結(jié)構(gòu)化的CSS代碼。

BEM是定義了一種css class的命名規(guī)范，每個(gè)名稱(chēng)及其組成部分都是存在一定的含義。

由拉丁字母, 數(shù)字, -組成css的單個(gè)名稱(chēng).

Block

使用簡(jiǎn)潔的前綴名字來(lái)命名一個(gè)獨(dú)立且有意義的抽象塊或組件。

e.g.

.block

.header

.site-search

Element

使用__連接符來(lái)連接Block 和 Element。

e.g.

.block__element

.header__title

.site-search__field

Modifier

使用--連接符來(lái)連接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，面向?qū)ο蟮腃SS，旨在編寫(xiě)高可復(fù)用、低耦合和高擴(kuò)展的CSS代碼。

OOCSS是以面向?qū)ο蟮乃枷肴ザx樣式，將抽象和實(shí)現(xiàn)分離，抽離公共代碼。

在定義一個(gè)可重用性的組件庫(kù)時(shí)，我們僅創(chuàng)建基礎(chǔ)的結(jié)構(gòu)（html）和基礎(chǔ)的類(lèi)名，不應(yīng)該創(chuàng)建類(lèi)似于border, width, height, background等樣式規(guī)則，這樣使組件庫(kù)更靈活和可擴(kuò)展性。組件庫(kù)在不同環(huán)境下的樣式所要求不一樣，若未能區(qū)分其結(jié)構(gòu)和樣式，給其添加樣式，會(huì)使其變成一個(gè)特定的組件庫(kù)，而難以重用。

e.g.

以下是一個(gè)基礎(chǔ)庫(kù)創(chuàng)建的樣式：

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

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

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

這樣就使前面創(chuàng)建的基礎(chǔ)組件metadata變成了一個(gè)特定的組件了，使其在其他場(chǎng)景下較難復(fù)用。

把容器和內(nèi)容獨(dú)立分區(qū)，使內(nèi)容能作用于任何容器下。

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

上面我們定義了一個(gè)id為sidebar 中 h3的樣式，但是我們發(fā)現(xiàn)在footer 中 h3的樣式也基本一致，僅個(gè)別不一樣，那么我們可能會(huì)這樣寫(xiě)樣式：

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

甚至我們可能會(huì)用更糟糕的方式來(lái)寫(xiě)這個(gè)樣式：

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

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

.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，可擴(kuò)展模塊化的CSS，它的核心就是結(jié)構(gòu)化CSS代碼，提出了一種CSS分類(lèi)規(guī)則，分為五種類(lèi)型：

Base

Layout

Module

State

Theme

SMACSS定義了一種css文件的組織方式，其橫向的切分，使css文件更具有結(jié)構(gòu)化、高可維護(hù)性。

Base是默認(rèn)的樣式，是對(duì)單個(gè)元素選擇器（包括其屬性選擇器，偽類(lèi)選擇器，孩子/兄弟選擇器）的基礎(chǔ)樣式設(shè)置，例如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的應(yīng)用.

Note:

在基礎(chǔ)樣式中不應(yīng)該使用!important

不明思議，是對(duì)頁(yè)面布局元素（頁(yè)面架構(gòu)中主要和次要的組件）的樣式設(shè)置，例如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;
}

對(duì)公共組件樣式的設(shè)置，例如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;
}

對(duì)組件、模塊、元素等表現(xiàn)行為或狀態(tài)的樣式修飾，例如hide, show, is-error, etc.

e.g.

.hide {
  display: none;
}

.show {
  display: block;
}

.is-error {
  color: red;
}

對(duì)頁(yè)面整體布局樣式的設(shè)置，可以說(shuō)是一種皮膚，它可以在特定場(chǎng)景下覆蓋base, layout等的默認(rèn)樣式。

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規(guī)范，貌似還是有沖突等問(wèn)題，咋辦呀？

世上沒(méi)有完美方案，只有合適/最佳方案～

讓我門(mén)一起期待Web Components到來(lái)吧～