? Mixin ?
在定义mixin时，如果mixin名称不是一个需要使用的
className，必须加上括号，否则即使不被调用也会输出到 CSS 中。
?
如果混入的是本身不输出内容的mixin，需要在mixin
后添加括号（即使不传参数），以区分这是否是一个className。
? 避免嵌套层级过多, 限制在2层
? 可以使用字符串插值使变量嵌入字符串中@base-url:
\background-image:
url(\
命名(从组件方式思考命名)
? Components 至少以两个单词命名,通过-分
离.like-button.search-form.article-card ? Elements (Element 是 Components 中的元素) ? ? ?
类名尽可能仅有一个单词 多个单词应直接连接
避免标签选择器(性能稍弱,表意不明)
? Variants(变体) 带有前缀- ?
Positioning (position, top, left, right, bottom)
? ? ? ? ?
Floats (float, clear) Margins (margin)
Dimensions (width, height)
.-wide .-short .-disabled .title.-small 避免定位属性
? 头像logos等元素应设置固定尺寸 ? 在父元素中设置定位 ? 避免过分嵌套
className命名 常见class关键词：
? 布局类：header, footer, container, main, content, aside,
page, section ? 包裹类：wrap, inner ? 区块类：region, block, box
? 结构类：hd, bd, ft, top, bottom, left, right, middle, col,
row, grid, span ? 列表类：list, item, field
? 主次类：primary, secondary, sub, minor ? 大小类：s, m, l, xl, large, small
? 状态类：active, current, checked, hover, fail, success,
warn, error, on, off
? 导航类：nav, prev, next, breadcrumb, forward, back,
indicator, paging, first, last
? 交互类：tips, alert, modal, pop, panel, tabs, accordion,
slide, scroll, overlay, ? 星级类：rate, star
? 分割类：group, seperate, divider ? 等分类：full, half, third, quarter ? 表格类：table, tr, td, cell, row
? 图片类：img, thumbnail, original, album, gallery ? 语言类：cn, en
? 论坛类：forum, bbs, topic, post ? 方向类：up, down, left, right
? 其他语义类：btn, close, ok, cancel, switch; link, title, info,
intro, more, icon; form, label, search, contact, phone, date, email, user; view, loading…
简单规则
? 以中划线连接，如.item-img ? 使用两个中划线表示特殊化，
如.item-img.item-img--small表示在.item-img的基础上特殊化
? 状态类直接使用单词，参考上面的关键词，
如.active, .checked
? 图标以icon-为前缀（字体图标采用.icon-font.i-name方式
命名）。
? 模块采用关键词命名，如.slide, .modal, .tips, .tabs，特殊
化采用上面两个中划线表示，
如.imgslide--full, .modal--pay, .tips--up, .tabs--simple
? js操作的类统一加上js-前缀
? 不要超过四个class组合使用，如.a.b.c.d
JavaScript
? 注释如无必要勿增注释, 如有必要尽量详尽, 只使用//,
避免使用/*...*/ ?
函数方法注释包含函数说明参数和返回值及返回值类
型, 如果函数是内部函数可以使用@inner标识
?
文件注释应该提供文件的大体内容, 它的作者, 依赖
关系和兼容性信息。如下:
/** * 函数描述 *
* @param {string} p1 参数1的说明
* @param {string} p2 参数2的说明，比较长 * 那就换行了.
* @param {number=} p3 参数3的说明（可选） * @return {Object} 返回值描述 */ /**
* @fileoverview Description of file, its uses and information
* about its dependencies.
* @author user@meizu.com (FirstnameLastname) * Copyright 2009 Meizu Inc. All Rights Reserved. */ ? 命名 ? ? ? ? ?
变量驼峰命名法 私有属性变量方法_开头 常量全部字母大写, _分隔 函数及函数的参数驼峰命名法
类单词首字母大写, 类的方法及属性驼峰命名法