首页 > 代码库 > 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命名规范整理