基于网易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 |