前端范例(ES6\BEM\OOCSS\SMACSS)

在现实开辟中，因为团队成员编码习气不一，手艺条理差别，开辟前定制并遵照一种代码范例能进步代码质量，增添开辟效力。

Javascript

Javascript范例直接参考airbnb:

ES6 Javascript Style Guide

ES5 Javascript Style Guide

React/JSX Style Guide

CSS

BEM

Block Element Modifier，它是一种前端定名要领，旨在协助开辟者完成模块化、可复用、高可维护性和构造化的CSS代码。

BEM是定义了一种css class的定名范例，每一个称号及其构成部分都是存在肯定的寄义。

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

CSS

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

Buttons实例

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

FAQ

BEM &＃8211; 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的运用.

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

• SUITCSS

• Atomic

• Airbnb CSS Style Guide

Web Components

这么多CSS范例，貌似照样有争执等题目，咋办呀？

世上没有圆满计划，只要适宜/最好计划～

让我门一同期待Web Components到来吧～

资本

在线实例

源代码