前端命名规范(3)

? 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. */ ? 命名 ? ? ? ? ?

变量驼峰命名法 私有属性变量方法_开头 常量全部字母大写, _分隔 函数及函数的参数驼峰命名法

类单词首字母大写, 类的方法及属性驼峰命名法

百度搜索“77cn”或“免费范文网”即可找到本站免费阅读全部范文。收藏本站方便下次阅读，免费范文网，提供经典小说综合文库前端命名规范(3)在线全文阅读。