目录
夺命连环问(自发式费曼
是什么?解决什么诞生的?
约定。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 属性 定义着链接资源和引用它的文件之间的关系。