CSS命名规范

一、NEC (nice easy css)

NEC是一种模块化命名的方式，可以使CSS代码整洁易维护。
简单来说，就是利用不同的前缀来区分不同样式。

名称	前缀	说明
布局(grid)	g-	如头部，尾部，主体，侧栏等
模块(module)	m-	通常是一个语义化的可以重复使用的较大的整体，如登录注册，搜索等
元件(unit)	u-	不可再分个体，例如按钮，input框等
功能(function)	f-	使用频率较高的样式，例如清除浮动
皮肤(skin)	s-	文字色，背景色，边框色等，非换肤型网站通常只提取文字色
状态	z-	标识状态类样式，只能组合使用或作为后代出现
重置和默认	reset、base	消除默认样式和浏览器差异，并设置部分标签的初始样式

注意：
如果以上的分类不能满足你的需求，你可以另外定义一个或多个大类，但必须符合 单个字母+"-"为前缀的命名规则，即 .x- 的格式。（特殊情况：.j-将被专用于JS获取节点，请勿使用.j-定义样式。）

更详细的规定，可以去官网查看：http://nec.netease.com/

二、BEM

BEM其实就是块（block）,元素（element）和修饰符（modifier）的缩写。

• 块：一个块是设计或布局的一部分，在大多数情况下，任何独立的页面元素（或复杂或简单）都可以被视作一个块。
• 元素：块中的子元素是块的子元素，一个块中元素的类名必须用父级块的名称作为前缀。
• 修饰符：一个“修饰符”可以理解为一个块的特定状态，标识着它持有一个特定的属性。

在选择器中，由以下三种符号来表示扩展的关系：

" - " 中划线：仅作为连字符使用，表示某个块或者某个子元素的多单词之间的连接记号。
" __ " 双下划线：用来连接块和块的子元素
" _ " 单下划线：用来描述一个块或者块的子元素的一种状态
例子：type-block__element_modifier

三、其他规范

OOCSS

• Object Oriented CSS，面向对象的CSS，旨在编写高可复用、低耦合和高扩展的CSS代码。
• OOCSS是以面向对象的思想去定义样式，将抽象和实现分离，抽离公共代码。

SMACSS

• Scalable and Modular Architecture for CSS，可扩展模块化的CSS，它的核心就是结构化CSS代码，提出了一种CSS分类规则，分为五种类型：Base、Layout、Module、State、Theme
• SMACSS定义了一种css文件的组织方式，其横向的切分，使css文件更具有结构化、高可维护性。

SUITCSS

• SUIT CSS是一种专注于为基于组件的开发改善CSS创作体验的方法
• 基于组件的系统允许将松散耦合的独立单元实现和组合为定义明确的复合对象。组件已封装，但能够通过接口/事件进行互操作

AMCSS

• Attribute Modules for CSS CSS的属性模块，是一种使用HTML 属性及其值而非样式元素的类的技术。
• 每个属性都可以有效地声明一个单独的命名空间来封装样式信息，从而使HTML和CSS更具可读性和可维护性。简单来说就是通过css属性选择器来模块化CSS

---

今天刷面试题，碰到了一道命名规范的题目，以上就作为一个简单的整理，作为常识性的了解。

参考资料：
https://segmentfault.com/a/1190000007956424
https://www.w3cschool.cn/weflow/weflow-bem.html
https://segmentfault.com/a/1190000005123938
https://blog.csdn.net/Jsoning/article/details/103787035/