首页 > 代码库 > CSS命名规范整理
CSS命名规范整理
基于网易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 |
CSS命名规范整理