基于网易NEC修改后,整理的命名规范
单行写完一个选择器定义
便于选择器的寻找和阅读,也便于插入新选择器和编辑,便于模块等的识别。去除多余空格,使代码紧凑减少换行。
如果有嵌套定义,可以采取内部单行的形式。
分类的命名方法:使用单个字母+"-"为前缀
布局(grid)(.g-);模块(module)(.m-);元件(unit)(.u-);功能(function)(.f-);皮肤(skin)(.s-);状态(.z-)。
相同语义的不同类命名
方法:直接加数字或字母区分即可(如:.m-list、.m-list2、.m-list3等,都是列表模块,但是是完全不一样的模块)。
模块和元件的扩展类的命名方法
当A、B、C、...它们类型相同且外形相似区别不大,那么就以它们中出现率最高的做成基类,其他做成基类的扩展。
方法:+“-”+数字或字母(如:.m-list的扩展类为.m-list-1、.m-list-2等)。
补充:基类自身可以独立使用(如:class="m-list"即可),扩展类必须基于基类使用(如:class="m-list m-list-2")。
选择器等级
1吨 = 行内样式style。
100斤 = ID选择器。
1斤 = 类、伪类和属性选择器。
1克 = 类型选择器和伪元素选择器。
统一语义理解和命名
语义 命名
文档 doc
头部 head
主体 body
尾部 footer
主栏 main
主栏子容器 main-in
侧栏 aside
侧栏子容器 aside-in
盒容器 wrap/box
布局(.g-) |
|
语义 |
命名 |
文档 |
doc |
头部 |
head |
主体 |
body |
尾部 |
footer |
主栏 |
main |
主栏子容器 |
main-in |
侧栏 |
aside |
侧栏子容器 |
aside-in |
盒容器 |
wrap/box |
模块(.m-)、元件(.u-) |
|
语义 |
命名 |
导航 |
nav |
子导航 |
subnav |
面包屑 |
crumb |
菜单 |
menu |
选项卡 |
tab |
标题区 |
head/title |
内容区 |
body/content |
列表 |
list |
表格 |
table |
表单 |
form |
热点 |
hot |
排行 |
top |
登录 |
login |
标志 |
logo |
广告 |
advertise |
搜索 |
search |
幻灯 |
slide |
提示 |
tips |
帮助 |
help |
新闻 |
news |
下载 |
download |
注册 |
regist |
投票 |
vote |
版权 |
copyright |
结果 |
result |
标题 |
title |
按钮 |
button |
输入 |
input |