目录
夺命连环问（自发式费曼
是什么？解决什么诞生的？
约定。1.个人命名与团队冲突 2.新需求、功能扩展、重构 3.css污染
有什么优点？
整齐划一( 好看 )、便于维护（防止被骂）
有什么缺点？怎么解决？
死板命名太长一开始不适应。
好了上正餐了
CSS命名规范
BEM（ 模块-元素 [ 状态|修饰符 ]）
.block { /* styles */ }
.block__element { /* styles */ }
.block--modifier { /* styles */ }个人理解：中划线就是分类，下划线是构成 ,双中划线是状态
比如说页面右侧导航栏吧，
它是主页的左侧 left-meun。
由item构成 left-meun_item。
有选中的状态 left-meun_item--select
下面是示例（引用的其他作者的话，具体记找不到了。斯密马赛
这可是个足以得奖的火柴人呢 :)
哎，可惜并不是 :(
这个火柴人代表了一个组件，比如说一个设计区块。
或许你已经猜到了 BEM 这里的 B 意为『区块』（‘Block’）。
在实际中，这里『区块』可以表示一个网站导航、页眉、页脚或者其他一些设计区块。
根据上述解释，那么这个组件的理想类名称即是 stick-man。
组件的样式应写成这样：
.stick-man {
}
E 代表元素（Elements） BEM 中的 E 代表着元素。 整体的区块设计往往并不是孤立的。 比方说，这个火柴人有一个头部（head），两只漂亮的手臂（arms）和双脚（feet）。
这些 head、 feet 和 arms 都是组件中的元素。它们可视作子组件（child components），也就是父组件的组成部分。 如果使用 BEM 命名规范的话，这些元素的类名都可以通过在两条下划线后加上元素名称来产生。
比如说：
.stick-man__head { }
.stick-man__arms { }
.stick-man__feet { }
那么问题来了。一蓝一红怎么命名？
.stick-man--blue {
}
.stick-man--red {
} 
头一大一小怎么命名
这一次元素被加上了修饰符。记住，元素指一个整体封装区块中的一个子组件。
.stick-man 表示区块（Block）， .stick-man__head 表示元素（the element）。
从上例可以看出，双连字符也可以这样使用：
.stick-man__head--small {
}
.stick-man__head--big {
}下面两种不温不火就不介绍了，有链接可以看看。
CSS样式顺序
1.位置属性(position, top, right, z-index, display, float等)
2.大小(width, height, padding, margin)
3.文字系列(font, line-height, letter-spacing, color- text-align等)
4.背景(background, border等)
5.其他(animation, transition等)
额外加菜（代码的事怎么能叫偷呢
还有一些旧时代的糟粕，有点可惜。
语义化 - 淘汰
示例EG
/* 这是某个模块 */
.m-nav{}/* 模块容器 */
.m-nav li,.m-nav a{}/* 先共性 优化组合 */
.m-nav li{}/* 后个性 语义化标签选择器 */
.m-nav a{}/* 后个性中的共性 按结构顺序 */
.m-nav a.a1{}/* 后个性中的个性 */
.m-nav a.a2{}/* 后个性中的个性 */
.m-nav .z-crt a{}/* 交互状态变化 */
.m-nav .z-crt a.a1{}
.m-nav .z-crt a.a2{}
.m-nav .btn{}/* 典型后代选择器 */
.m-nav .btn-1{}/* 典型后代选择器扩展 */
.m-nav .btn-dis{}/* 典型后代选择器扩展（状态） */
.m-nav .btn.z-dis{}/* 作用同上，请二选一（如果可以不兼容IE6时使用） */
.m-nav .m-sch{}/* 控制内部其他模块位置 */
.m-nav .u-sel{}/* 控制内部其他元件位置 */
.m-nav-1{}/* 模块扩展 */
.m-nav-1 li{}
.m-nav-dis{}/* 模块扩展（状态） */
.m-nav.z-dis{}/* 作用同上，请二选一（如果可以不兼容IE6时使用） */布局（.g-）
| 语义 | 命名 | 简写 |
| 文档 | doc | doc |
| 头部 | head | hd |
| 主体 | body | bd |
| 尾部 | foot | ft |
| 主栏 | main | mn |
| 主栏子容器 | mainc | mnc |
| 侧栏 | side | sd |
| 侧栏子容器 | sidec | sdc |
| 盒容器 | wrap/box | wrap/box |
模块（.m-）、元件（.u-）
| 语义 | 命名 | 简写 |
| 导航 | nav | nav |
| 子导航 | subnav | snav |
| 面包屑 | crumb | crm |
| 菜单 | menu | menu |
| 选项卡 | tab | tab |
| 标题区 | head/title | hd/tt |
| 内容区 | body/content | bd/ct |
| 列表 | list | lst |
| 表格 | table | tb |
| 表单 | form | fm |
| 热点 | hot | hot |
| 排行 | top | top |
| 登录 | login | log |
| 标志 | logo | logo |
| 广告 | advertise | ad |
| 搜索 | search | sch |
| 幻灯 | slide | sld |
| 提示 | tips | tips |
| 帮助 | help | help |
| 新闻 | news | news |
| 下载 | download | dld |
| 注册 | regist | reg |
| 投票 | vote | vote |
| 版权 | copyright | cprt |
| 结果 | result | rst |
| 标题 | title | tt |
| 按钮 | button | btn |
| 输入 | input | ipt |
功能（.f-）
| 语义 | 命名 | 简写 |
| 浮动清除 | clearboth | cb |
| 向左浮动 | floatleft | fl |
| 向右浮动 | floatright | fr |
| 内联块级 | inlineblock | ib |
| 文本居中 | textaligncenter | tac |
| 文本居右 | textalignright | tar |
| 文本居左 | textalignleft | tal |
| 垂直居中 | verticalalignmiddle | vam |
| 溢出隐藏 | overflowhidden | oh |
| 完全消失 | displaynone | dn |
| 字体大小 | fontsize | fs |
| 字体粗细 | fontweight | fw |
皮肤（.s-）
| 语义 | 命名 | 简写 |
| 字体颜色 | fontcolor | fc |
| 背景 | background | bg |
| 背景颜色 | backgroundcolor | bgc |
| 背景图片 | backgroundimage | bgi |
| 背景定位 | backgroundposition | bgp |
| 边框颜色 | bordercolor | bdc |
状态（.z-）
| 语义 | 命名 | 简写 |
| 选中 | selected | sel |
| 当前 | current | crt |
| 显示 | show | show |
| 隐藏 | hide | hide |
| 打开 | open | open |
| 关闭 | close | close |
| 出错 | error | err |
| 不可用 | disabled | dis |
参考网易前端文档手册 http://nec.netease.com/standard/css-sort.html
JS Class命名 - 淘汰
参考的腾讯前端文档手册。
jq时期的规范，现在已经不怎么需要了。
1. 使用 js- 类名
一种减少这类 bug 的方法是使用 js-* 的类名命名方法。用这种方法来表明这个 DOM 元素和 JavaScript 代码的关联。
例如：
<html>
<div class="site-navigation js-site-navigation"> </div>
</html>
<script>
const nav = document.querySelector('.js-site-navigation')
</script>
依照命名规范，任何人看到 **js-**site-navigation 这个类名称，就会知道 JavaScript 代码中有一段和这个 DOM 元素有关联的代码。
2. 使用 Rel 属性
<html>
<div class="site-navigation" rel="js-site-navigation"></div>
</html>
<script>
const nav = document.querySelector("[rel='js-site-navigation']")
</script>
一般来说，rel 属性 定义着链接资源和引用它的文件之间的关系。
173
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
