Thinking in Frontend Conventions

2016-05-15 11:37:00

前端规范

在实际开发中，由于团队成员编码习惯不一，技术层次不同，开发前定制并遵循一种代码规范能提高代码质量，增加开发效率。

Javascript

Javascript规范直接参考airbnb:

ES6 JavaScript Style Guide

ES5 JavaScript Style Guide

React/JSX Style Guide

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

CSS

.form {
}
.form--theme-xmas {
}
.form--simple {
}
.forminput {
}
.formsubmit {
}
.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 - 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;
}