说明
依据BEM的思想,参照各大厂的相关规范以及根据自身团队的特色进行构建。
命名
原则
- 简单、适用、易懂
- 复用性高,可读性强
- 根据BEM思想,类名统一采用Block-Element-Module的顺序
- 命名尽量语义化
注意事项
- 涉及大框架尽量采用比如header/footer/wrapper/left/right之类的词
- 如需命名CSS文件尽量采用指示性强的词,如globe、layout、style等等
- 尽量少用或不用id选择器,尽量用clss类,也少写内联样式
- 所有的命名一律采用小写,尽量用英文,减少汉语拼音命名思想
独立页面CSS命名
根据其用途和性质,外接的CSS一般要具有指示性:
- 全局(global.css):全局样式为全项目公用
- 结构(layout.css):页面结构的公用CSS,适用于固定的产品类或首页级别的页面中
- 私有(style.css):页面私有的css当有需要为一个页面单独定制CSS的时候使用
- 模块(module.css): 一些可复用的类,出现程度较频繁的属性可提取出来,用作模块
- 主题(theme.css): 当网站需要修改皮肤的时候的使用
- 补丁(mend.css): 基于以上样式进行的私有化修补
页面框架结构命名
页面结构这块主要是配合HTML进行布局的时候使用,应该配合HTML的标签框架使用,便于标识和寻找。下面是一些常见框架的命名规则:
语义 | 说明(简写) |
---|---|
文档 | doc (doc) |
头部 | head (hd) |
主体 | body(bd) |
尾部 | foot(ft) |
主栏 | main(mn) |
主栏子容器 | mainc(mnc) |
侧栏 | side(sd) |
侧栏子容器 | sidec(sdc) |
盒容器 | wrap/box(wrap/box) |
模块、元件(元素)命名
根据BEM思想,可采用嵌套block的方式,结合模块、元件语义化的思想进行命名,常用的模块元件命令规则如下:
语义 | 命名(简写) |
---|---|
导航 | 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) |
状态命名
状态是指元件的状态,常见的状态命名规则如下:
语义 | 命名(简写) |
---|---|
选中 | selected(sel) |
当前 | current(crt) |
显示 | show(show) |
隐藏 | hide(hide) |
打开 | open(open) |
关闭 | close(close) |
出错 | error(err) |
不可用 | disabled(dis) |
命名实践
页面框架命名
.doc {
.head {}
.body {
.main {
.mainc {}
}
.side {
.sidec {}
}
.wrap {}
}
.foot {}
}
模块、元件(元素命名)
.doc {
.head {
.head-nav {}
.head-crumb {}
}
.body {
.body-list {}
.body-form {}
}
.foot {
.foot-copyright {}
}
}
状态命名
.doc {
.head {
.head-nav {}
.head-crumb {}
}
.body {
.body-button-selected {}
.body-button-hide {}
}
.foot {
.foot-copyright {}
}
}
书写规则
原则
- 能使用简写的时候尽量使用简写
{
margin : 0 1rem 3rem
}
- 去掉小数点后面的0
{
margin : . 9rem
}
- 当度量为0时不要带单位
{
margin : 0
}
4.颜色用小写
{
color : #fff
}
5.所有声明语句都应当以分号结尾。最后一条声明语句后面的分号是可选的,但建议还是加上,方便维护
书写顺序
遵循定位属性-》自身属性(尺寸)-》文本属性-》其他属性
{
display: flex;
width: 100px;
font-size: 14px;
color: #fff
}
注释
行间注释
对于需要特别注明的属性,注释应紧跟在属性后面
{
width: 100px /*目标宽度*/
}
块注释
对于功能说明,需要在块开始时注释在上方,并用简洁的语言说明功能的作用
/*
* Component section heading
*/
.element{...}