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

時間 2019-12-04

標籤前端規範 es6 bem oocss smacss 欄目 JavaScript 简体版

原文原文鏈接

前端規範

在實際開發中，因爲團隊成員編碼習慣不一，技術層次不一樣，開發前定製並遵循一種代碼規範能提升代碼質量，增長開發效率。javascript

Javascript

Javascript規範直接參考airbnb:css

ES6 JavaScript Style Guidehtml

ES5 JavaScript Style Guide前端

React/JSX Style Guidejava

CSS

BEM

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

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

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的單個名稱.github

Blockweb

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

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實例

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

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

SMACSS

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的應用.

在基礎樣式中不該該使用!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;
}