CSS 命名规范

CSS

1 前端开发命名规范

1.1 为什么要制定CSS命名规范

统一的命名规范，便于多人开发维护时代码统一，减少项目沟通和交接的成本，增加代码的语义化。

1.2 CSS命名规则

1. 类名，ID名全部用小写，首字符必须是字母，禁止数字或其他特殊字符。由以字母开头的小写字母（a-z）、数字（0-9）、中划线 （-）组成。

2. 可以是单个单词，也可以是组合单词，要求能够描述清楚模块和元素的含义，使其具有语义化。避免使用 123456…,red,blue,left,right之类的（如颜色、字号大小等）矢量命名，如class="left-news"、class="new2" ，以避免当状态改变时名称失去意义。尽量用单个单词简单描述 class 名称。

3. 双单词或多单词组合方式：形容词-名词、命名空间-名次、命名空间-形容词-名词。例如：news-list、mod-feeds、mod-my-feeds、cell-title。

1.3 Class 和 id的使用方法

ID是用来标识具体模块，命名必须具体且唯一，由前缀和名字组成，；在 HTML 里 ID 可以用于 JS 以及锚点定位，但是在 CSS 里只要用 class，尽最大可能不要用 ID，除非没有别的办法，来限制样式的作用范围（命名空间），或者为样式添加权重（Class 的优势在于复用性，而且私有度也并不高。私有度非常容易导致问题，所以将其降低就尤为重要。ID 的私有度是 class 的 255 倍，所以在 CSS 中坚决慎用。）。

1.4 命名空间

在使用组件化开发系统时，为避免组件(模块)样式相互污染，需添加命名空间的方式来解决；而添加命名空间的方式有两种层级前缀和类名前缀:

命名前缀

使用类名前缀方式，示例如下：

<div component="header" class="header">
    <div class="header-title">title</div>
    <div class="header-home">home</div>
</div>
.header-title {color:blue;}
.header-home {height:25px; width:50px;}

命名前缀能很好地避开组件间的样式影响，划分了独立的组件样式独立空间，但缺点在于：

• 对于类名较长，HTML编码时添加了额外的成本
• 类名与命名空间耦合，组件更小粒度的拆分、代码片段复制、命名空间名称需要重新变更所有类名

层级前缀

使用父级前缀方式，示例如下：

<div component="header" class="header">
    <div class="title">title</div>
    <div class="home">home</div>
</div>
.header .title {color:blue;}
.header .home {height:25px; width:50px;}

相比较，使用层级前缀的好处在于：

• 元素命名独立，不耦合命名空间，方便编码
• 由于不耦合命名空间名称，当命名空间需要变更时，只需要修改顶层元素的类名
• HTML Inspect，元素定位容易，不容易混淆组件与组件元素
• 避免了子元素与子组件的命名冲突

没有哪种方案是完美的，都会存在利与弊；层级前缀方案，该方案的致命缺点，是不能完美解决组件样式独立性的问题。在现代化前端开发中，需要结合多种不同方案优势，打造出一套团队统一，语义化易于理解，可重用性高，后期维护容易，加载渲染快的命名方法。 当然也要善用 CSS 预处理器工具，比如 Sass，从编程角度更好去编写处更有的 CSS。更多建议可参见 CSS 命名规范总结、通用 CSS 笔记、建议与指导。

1.5 通用命名

(1)页面框架命名，一般具有唯一性，推荐用ID命名

(2)模块结构命名

(3)导航结构命名

(4)一般元素命名