FE Workflow
standard-dev>var

CSS

BEM 命名规范

BEM:块(block)、元素(element)、修饰符(modifier)。 中划线(-):块与块、元素与元素,多个单词之间的连接。 单下划线(_):块、元素的状态。 双下划线(__):块与元素之间的连接。

布局(.g-)、模块(.m-)、元件(.u-)、功能(.f-)、皮肤(.f-)、状态(.z-)

属性规范

布局定位属性:display / position / float / clear / visibility / overflow 自身属性:width / height / margin / padding / border / background 文本属性:color / font / text-decoration / text-align / vertical-align / white- space / break-word 其他属性(CSS3):content / cursor / border-radius / box-shadow / text-shadow / background: linear-gradient


JS

变量

// 命名方法:camelCase
// 命名规范:类型 + 对象描述或属性的方式

// bad
const getTitle = 'LoginTable'
// good
const tableTitle = 'LoginTable'

常量

// 命名方法:全部大写下划线分割
const MAX_COUNT = 10
const URL = 'http://test.host.com'

方法

# 命名方法:camelCase
# 命名规范:动词 + 名词形式
# can has is get set

# 1、普通情况下,使用动词 + 名词形式
# bad
go、nextPage、show、open、login
# good
jumpPage、openCarInfoDialog

# 2、请求数据方法,以 data 结尾
# bad
takeData、confirmData、getList、postForm
# good
getListData、postFormData

# 3、单个动词的情况
init、refresh
CSS
BEM 命名规范
属性规范
JS
变量
常量
方法