css命名规范

1. 常用命名词整理

1.1 布局

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
homepage--------------------------------首页
subPage---------------------------------二级页面/子页面
header/head-----------------------------头
content/container-----------------------容器,内容,用于最外层
wrapper---------------------------------页面外围控制整体布局宽度
main------------------------------------页面主题
nav-------------------------------------导航
subnav----------------------------------二级导航
menu------------------------------------菜单
subMenu---------------------------------子菜单
sideBar---------------------------------侧栏
sideBar_a-------------------------------a边栏
layout----------------------------------布局
column----------------------------------栏目
footer/foot-----------------------------尾

1.2 导航

1
2
3
4
5
6
7
8
9
10
nav-------------------------------------导航
mainNav---------------------------------主导航
subNav----------------------------------子导航
topNav----------------------------------顶导航
sideNav---------------------------------边导航
leftSideNav-----------------------------左导航
rightSideNav----------------------------右导航
menu------------------------------------菜单
subMenu---------------------------------子菜单
dorpMenu--------------------------------下拉菜单

1.3 功能

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
logo------------------------------------标志
banner----------------------------------广告
title-----------------------------------标题
summary---------------------------------摘要
tag-------------------------------------标签
login-----------------------------------登录
loginBar--------------------------------登录条
regsiter--------------------------------注册
search----------------------------------搜索
status----------------------------------状态
scroll----------------------------------滚动
tab-------------------------------------标签页
current---------------------------------当前的
icon------------------------------------图标
msg-------------------------------------提示信息
info------------------------------------信息
rr/arrow--------------------------------箭头

1.4 搜索框

1
2
3
4
5
searchInput--------------搜索输入框
search-----------搜索
search_output---------------搜索输出和搜索结果
searchBar------------搜索条
search_results----------------搜索结果

1.5 css文件名

1
2
3
4
5
6
7
8
9
10
master.css,style.css    主要的
module.css 模块
base.css 基本共用
layout.css 布局,版面
themes.css 主题
columns.css 专栏
font.css 文字、字体
forms.css 表单
mend.css 补丁
print.css 打印

2. 思路

2.1 对于具有可重用性的样式

分离公共样式,不要把所有的样式写在一个类里,尽可能的抽出可以复用的样式用类编写

1
2
3
4
5
6
7
<style>
.fl {float:left;}
.fontB {font-weight:bold;}
</style>
<body>
<p class="fl fontB">举例</p>
</body>

这样你就能对其他的标签也同时使用.fl .fontB样式,不会过多的书写重复样式代码。

当然这种时候的类命名就要简单,不能和html结构扯上任何关系,重点突出样式的含义,比如.fontB就是font-weight:bold;的简写

网站通用的元素(按钮,导航,选项卡)的样式千万不能分离作为网站的css的样式库

2.2 对于具体样式

借鉴BEM思想的思想。BEM即块(block),元素(element),修饰符(modifier),是由Yandex团队提出的一种前端命名方法论。用于一个团队开发一个耗时的大项目。

1
2
3
.block {}
.block__element {}
.block--modifier {}
  • .block 代表了更高级别的抽象或组件。
  • .block__element 代表.block的后代,用于形成一个完整的.block的整体。
  • .block–modifier代表.block的不同状态或不同版本。

既然我们知道了BEM的思想,但是我们就需要在写css的时候全程使用吗?答案是否定的。只有当你所写的样式明显的具有模块的感觉时候,可以尝试BEM。

1
2
3
<header class="header">
<div class="logo"></div>
</header>

对于上述Html结构,我们根本不需要强行使用BEM思想,因为logo并不总是在header里面的,只是恰好而已,并且层次比较潜,没有必要。像下面就可以了。

1
2
3
<header class="header">
<div class="logo"></div>
</header>

2.3 网站通用小图标

在精灵图上的小图标可以不使用语义命名,根据排列方式命名,例如icon00icon01
mark

3. 选择器

3.1 不要使用# !important

对于样式,不要使用#,虽然#的选择权限更高,但是会和js钩子搞混,你会迷惑当初设置这个#active是用来设置样式了还是设置了js

3.2 性能消耗

性能消耗最大选择器应该是*和多 class 选择器(比如 .foo.bar, .foo.bar.baz qux)

由于css的选择是从右向左搜索的,比如.nav a{},这个就会先选择所有的a标签,但是去寻找包含a标签的.nav

在 Opera 和 WebKit 中 [type=…"]input[type="…"] 更加耗时

在 Opera 和 WebKit 中, border-radius 是最耗时的属性之一,甚至比 shadow 和 gradient 和耗时,要注意的是它不影响布局生成时间只影响 repaint 时间。transform性能也是很差

以上根据下面博客进行个人整理
决战BEM, 10个常见问题及其解决方案
史上最全的HTML和CSS标签命名规则
精简高效的CSS命名准则/方法
我是如何对网站CSS进行架构的
CSS样式分离之再分离
前端开发规范之命名规范、html规范、css规范、js规范
CSS with BEM