前端規範(ES6\BEM\OOCSS\SMACSS)

阿新 • • 發佈：2019-01-29

前端規範

在實際開發中，由於團隊成員編碼習慣不一，技術層次不同，開發前定製並遵循一種程式碼規範能提高程式碼質量，增加開發效率。

Javascript

Javascript規範直接參考airbnb:

CSS

BEM

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

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

Block	Element	Modifier
獨立且有意義的實體, e.g. `header` , `container`, `menu`, `checkbox`, etc.	Block的一部分且沒有獨立的意義, e.g. `header title`, `menu item`, `list item`, etc.	Blocks或Elements的一種標誌，可以用它改變其表現形式、行為、狀態. e.g. `disabled`, `checked`, `fixed`, etc.

Naming

由拉丁字母, 數字, -組成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

<form class="form form--theme-xmas form--simple" 
>
  <input class="form__input" type="text" />
  <input class="form__submit form__submit--disabled" type="submit" />
</form>

CSS

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

Buttons例項

buttons

HTML

<button class="button">
  Normal button
</button>
<button class="button button--state-success">
  Success button
</button>
<button class="button button--state-danger">
  Danger button
</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;
}

FAQ

OOCSS

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

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

Layout

不明思議，是對頁面佈局元素（頁面架構中主要和次要的元件）的樣式設定，例如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;
}

Modules

對公共元件樣式的設定，例如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;
}

State

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

e.g.

.hide {
  display: none;
}

.show {
  display: block;
}

.is-error {
  color: red;
}

Theme

對頁面整體佈局樣式的設定，可以說是一種面板，它可以在特定場景下覆蓋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;
}

Others

這麼多CSS規範，貌似還是有衝突等問題，咋辦呀？

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

前端規範(ES6\BEM\OOCSS\SMACSS)

前端規範

Javascript

CSS

Naming

例項

Buttons例項

FAQ

區分結構和樣式

區分容器和內容

Base

Layout

Modules

State

Theme

Others

資源

相關推薦