5811前端基础规范-【命名规范】

命名规范

命名规范

命名首先以内容命名(txt,pic,img,info,box,col)，其次以功能命名(news)
class命名，独立模块级别加“-”，如：box-pic,ul-pic,ul-txt,row-box,form-reg

1. 命名关键词

布局类：wp, row, col-, 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…

2.模块化

固定命名规范

固定模块的名字可以不加-为简单的英文单词组成
固定模块必须是大家一致性知晓的
固定命名不得随意使用，使用时必须考虑冲突

模块	命名	说明
布局	.wp,.col-,.row-
页面头部	.header,#hd,.header-
页面底部	.footer,#fd,.footer-
主导航	.nav,#nv,.nav-
子导航	.nav-sub
侧边导航	.snv,.snv-
分页页码	.pages
当前位置	.cur
模块标题	.tit-*	主标题.tit-main,小标题.tit-sub
搜索	.so
文字列表	.ul-txt
图片列表	.ul-pic,.ul-img
产品列表	.ul-pro
选项卡	.ul-tab
文本框	.inp-*
按钮	.btn-*

自定义模块

拆分页面布局分析，拆分到不能拆分为止；
每个模块必须有一个模块名；
每个模块的基本组成部分应该一致；
模块的子节点类名需带上模块名（防止模块间嵌套时产生不必要的覆盖）；
孙辈节点无需再带模块名。

代码如：

	<section class="m-detail">
		<header class="m-detail-hd">
			<h1 class="title">模块标题</h1>
		</header>
		<div class="m-detail-bd">
			<p class="info">一些实际内容</p>
		</div>
		<footer class="m-detail-ft">
			<a href="#" class="more">更多</a>
		</footer>
	</section>

其中 .m-detail-hd, .m-detail-bd, .m-detail-ft 为可选，视具体模块情况决定是否需要抽象为这种 头，中，尾 的结构

例子：

以下模块内容的子模块都是相对独立的，互不干涉

<!-- good -->
<div class="m-news">
   <div class="m-news-pic">...</div>
   <div class="m-news-info">...</div>
   <div class="m-news-txt">...</div>
</div>

<!-- good -->
<div class="m-news">
   <div class="pic">...</div>
   <div class="info">...</div>
   <div class="txt">...</div>
</div>

<!-- good -->
<div class="m-news">
   <div class="s1">...</div>
   <div class="s2">...</div>
   <div class="s3">...</div>
</div>

<!-- good -->
<div class="m-news">
   <div class="l s1">...</div>
   <div class="l s2">...</div>
   <div class="r s3">...</div>
</div>

<!-- bad -->
<div class="m-news">
   <div class="bb0">...</div>
   <div class="xx0">...</div>
   <div class="mm-s1">...</div>
</div>

<!-- bad -->
<div class="m-news">
   <div class="l">...</div>
   <div class="c">...</div>
   <div class="r">...</div>
</div>

必须保证同级模块的命名、标签使用保持一致性

例子：

<!-- good -->
<div class="m-news">
   <div class="pic">...</div>
   <div class="info">...</div>
</div>

<!-- good -->
<div class="m-news">
   <div class="m-news__pic">...</div>
   <ul class="m-news__info">...</ul>
</div>

<!-- bad -->
<div class="m-news">
   <div class="pic">...</div>
   <p class="info">...</p>
</div>

3.命名-通用规则

class 必须单词全字母小写，单词间以 - 分隔。
不允许使用拼音（约定俗成的除外，如：youku, baidu），尤其是缩写的拼音、拼音与英文的混合。
以中划线连接，如.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

/* good */
	.detail { sRules; }
	.news-list { sRules; }
	.topic { sRules; }

/* bad */
	.xiangqing { sRules; }
	.news_list { sRules; }
	.zhuti { sRules; }

[强制] `class` 必须代表相应模块或部件的内容或功能，不得以样式信息进行命名。

示例：

<!-- good -->
<div class="sidebar"></div>

<!-- bad -->
<div class="left"></div>

[强制] 元素 `id` 必须保证页面唯一。

解释：

同一个页面中，不同的元素包含相同的 id，不符合 id 的属性含义。并且使用 document.getElementById 时可能导致难以追查的问题。

[建议] `id` 建议单词全字母小写，单词间以 `-` 分隔。同项目必须保持风格一致。

[建议] `id`、`class` 命名，在避免冲突并描述清楚的前提下尽可能短。

示例：

<!-- good -->
<div id="nav"></div>
<!-- bad -->
<div id="navigation"></div>

<!-- good -->
<p class="comment"></p>
<!-- bad -->
<p class="com"></p>

<!-- good -->
<span class="author"></span>
<!-- bad -->
<span class="red"></span>

[强制] 禁止为了 `hook 脚本`，创建无样式信息的 `class`。

解释：

不允许 class 只用于让 JavaScript 选择某些元素，class 应该具有明确的语义和样式。否则容易导致 css class 泛滥。

使用 id、属性选择作为 hook 是更好的方式。

[强制] 同一页面，应避免使用相同的 `name` 与 `id`。

解释：

IE 浏览器会混淆元素的 id 和 name 属性， document.getElementById 可能获得不期望的元素。所以在对元素的 id 与 name 属性的命名需要非常小心。

一个比较好的实践是，为 id 和 name 使用不同的命名法。

示例：

<input name="foo">
<div id="foo"></div>
<script>
// IE6 将显示 INPUT
alert(document.getElementById('foo').tagName);
</script>

4.命名-词汇规范

不依据表现形式来命名；
可根据内容来命名；
可根据功能来命名。

推荐：
	nav, aside, news, type, search

不推荐：
	left, right, center, red, black

5.命名-缩写规范

保证缩写后还能较为清晰保持原单词所能表述的意思；
使用业界熟知的或者约定俗成的。

推荐：
	navigation   =>  nav
	header       =>  hd
	description  =>  desc

不推荐：
	navigation   =>  navi
	header       =>  head
	description  =>  des

6.命名-前缀规范

前缀	说明	示例
g-	全局通用样式命名，前缀g全称为global，一旦修改将影响全站样式	g-mod
m-	模块命名方式，通用的独立模块	m-detail
ul-	列表类前缀	ul-txt
box-	独立模块前缀如同m-	box-about
ui-	组件命名方式，公用的ui样式，弹出框，日历，菜单等	ui-selector
js-	所有用于纯交互的命名，不涉及任何样式规则。JSer拥有全部定义权限	js-btn

选择器必须是以某个前缀开头

不推荐：

	.info { sRules; }
	.current { sRules; }
	.news { sRules; }

因为这样将给我们带来不可预知的管理麻烦以及沉重的历史包袱。你永远也不会知道哪些样式名已经被用掉了，如果你是一个新人，你可能会遭遇，你每定义个样式名，都有同名的样式已存在，然后你只能是换样式名或者覆盖规则。