当下前端开发class命名规范

前言

    前端开发无论web还是h5都会涉及各种规范，脚手架使用规范、目录规范、命名规范、文档规范、流程规范等等，本文主要针对前端命名规范中dom元素类名（className）的命名规范提出个人的一些想法，希望能给读者带来帮助或启发。

主流命名规范

1. OOCSS

Object-Oriented CSS，示例：

<div class="sizeOne bgBlue solidGray"></div>

.sizeOne {width: 25%;}
.bgBlue {background:blue;}
.solidGray {border: 1px solid #ccc;}

oocss的核心原则：

1. 独立的结构和样式
2. 独立的容器和内容

其优点：

• 减少CSS代码
• 具有清洁的HTML标记，有语义的类名，逻辑性强的层次关系
• 语义标记，有助于SEO
• 更好的页面优化，更快的加载时间（因为有很多组件重用）
• 可扩展的标记和CSS样式，有更多的组件可以放到库中，而不影响其他的组件
• 能轻松构造新的页面布局，或制作新的页面风格

其缺陷：

• OOCSS适合真正的大型网站开发，因为大型网站用到的可重用性组件特别的多，如果运用在小型项目中可能见不到什么成效。所以用不用OOCSS应该根据你的项目来决定。
• 如果没用巧妙的使用，创建组件可能对于你来说是一堆没用的东西，成为一烂摊子，给你的维护带来意想不到的杯具，说不定还是个维护的噩梦。
• 最好给每一个组件备写一份说明文档，有助于调用与维护
  参考链接：www.w3cplus.com/css/oocss-c…

2. SMACSS

参考链接：medium.com/@savemuse/s…

3. SUITCSS

参考链接：w3ctech.com/topic/1939

4. Atomic

参考链接：www.geeksforgeeks.org/introductio…

5. BEM

参考链接：getbem.com/introductio…

Block、Element、Modifier，BEM是我目前在使用的命名方式，也是本文重点要讲述的，基于BEM的规范制定了一套符合业务、框架以及开发模式的规范。首先简单介绍下BEM，详细内容可查看参考链接。

Block

独立的有意义的实体，eg：

header、container、menu、checkbox、input、footer等，它是在整个页面布局时，划分的单独模块。

Element

元素，是Block下的子元素，其没有独立的意义，但属于Block的一部分，eg：

menu item、 list item、 checkbox caption、 header title

Modifier

Block或Element上的标志标识，用来改变外观、状态、行为、标记等，eg：

disabled、 highlighted、 checked、 fixed、 size big、 color yellow

我的命名规范

在我们使用vue、react或者angular开发业务时，势必会涉及到这几个概念：

1. 页面组件；
2. 全局通用组件；
3. 模块内通用组件；
4. 页面独有的组件；

针对这些场景，我们如何命名区分，达到通过类名就能大致了解组件的用途，甚至自注释，同时也能有效的防止命名重复导致的样式冲突呢？

1. 页面组件

<项目缩写>__<页面>--page

eg：
项目：淘宝个人中心（taobao personal center）；
页面：我的订单；
命名：tpc__my-orders--page

2. 全局通用组件

<项目缩写>__<组件名>--global-component

eg:
项目：淘宝个人中心（taobao personal center）
通用组件：按钮组件
命名：tpc__button--global-component

3. 模块内通用组件

<项目缩写>__<组件名>--module-component

eg：
项目：淘宝个人中心（taobao personal center）
模块内通用组件：弹窗组件
命名：tpc__modal--module-component

4. 页面独有的组件

<项目缩写>__<组件名>--component

eg：
项目：淘宝个人中心（taobao personal center）
模块内通用组件：标签组件
命名：tpc__tag--component

modifier新增四种：page、global-component、module-component、component。

组件名、模块名、页面名称都使用 ‘-’ 连接。

组件内子元素按照element的类型去命名，例如：tpc__button__label。

如果涉及状态、标识，例如：tpc__button--disabled。

在组件开发过程中，建议可以将前缀使用变量保存，css也是。如此去命名你的class，既明了，又能防止命名重复导致样式冲突，让每一个类变得更有意义。可能有的前端比较反感命名长，喜欢用简短的命名，不妨也尝试下如此命名，会让你的业务更清晰，html的结构层次也更明了。