CSS命名规则

• 规则命名中，一律采用小写加中划线的方式，不允许使用大写字母或 _

• 命名避免使用中文拼音，应该采用更简明有语义的英文单词进行组合

• 命名注意缩写，但是不能盲目缩写，具体请参见常用的CSS命名规则

• 不允许通过1、2、3等序号进行命名

• 避免class与id重名

• id用于标识模块或页面的某一个父容器区域，名称必须唯一，不要随意新建id

• class用于标识某一个类型的对象，命名必须言简意赅。

• 尽可能提高代码模块的复用，样式尽量用组合的方式

常用id的命名：

(1)页面结构

• 容器: container

• 页头：header

• 内容：content/container

• 页面主体：main

• 页尾：footer

• 导航：nav

• 侧栏：sidebar

• 栏目：column

• 页面外围控制整体布局宽度：wrapper

• 左右中：left right center

(2)导航

• 导航：nav

• 主导航：mainbav

• 子导航：subnav

• 顶导航：topnav

• 边导航：sidebar

• 左导航：leftsidebar

• 右导航：rightsidebar

• 菜单：menu

• 子菜单：submenu

• 标题: title

• 摘要: summary

(3)功能

• 标志：logo

• 广告：banner

• 登陆：login

• 登录条：loginbar

• 注册：regsiter

• 搜索：search

• 功能区：shop

• 标题：title

• 加入：joinus

• 状态：status

• 按钮：btn

• 滚动：scroll

• 标签页：tab

• 文章列表：list

• 提示信息：msg

• 当前的: current

• 小技巧：tips

• 图标: icon

• 注释：note

• 指南：guild

• 服务：service

• 热点：hot

• 新闻：news

• 下载：download

• 投票：vote

• 合作伙伴：partner

• 友情链接：link

• 版权：copyright

关于css代码性能优化

• 合并margin、padding、border的-left/-top/-right/-bottom的设置，尽量使用短名称。

• 选择器应该在满足功能的基础上尽量简短，减少选择器嵌套，查询消耗。但是一定要避免覆盖全局样式设置。

• 注意选择器的性能，不要使用低性能的选择器。

• 禁止在css中使用*选择符。

• 除非必须，否则，一般有class或id的，不需要再写上元素对应的tag。

• 0后面不需要单位，比如0px可以省略成0，0.8px可以省略成.8px。

• 如果是16进制表示颜色，则颜色取值应该大写。

• 如果可以，颜色尽量用三位字符表示，例如#AABBCC写成#ABC 。

• 如果没有边框时，不要写成border:0，应该写成border:none 。

• 尽量避免使用AlphaImageLoader 。

• 在保持代码解耦的前提下，尽量合并重复的样式。

• background、font等可以缩写的属性，尽量使用缩写形式 。

作者：liutianou
链接：https://www.jianshu.com/p/af6cbbe0d834
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。