深入理解网易NECCSS框架：规范、应用与学习心得

### 前言

初次接触网易NEC是在三个月前，由一位拥有三年前端开发经验的大牛推荐。经过一段时间的研究和实践，我发现它在组织和优化CSS方面有着独特的优势，因此决定将其引入到公司的项目中，并逐渐喜欢上了这种风格。

最近，我再次阅读了新浪前端专家曹刘阳的《编写高质量代码——Web前端开发修炼之道》（2010年出版），这本书中关于CSS样式文件的分类、整理以及如何写出简洁、高效、可复用的CSS的观点，与NEC的很多理念不谋而合。

### 正文

#### CSS文件分类

根据NEC的建议，CSS文件可以分为三类：

1. **公共型样式**：包括标签重置、默认样式设置、通用布局、模块及扩展、元件及扩展、功能类样式和皮肤类样式。这部分主要用于确保网站的整体布局和基本控件的一致性。

2. **特殊型样式**：当某个页面或模块的样式与整体差异较大时，可以独立引用一个样式文件。这部分主要处理页面具体模块和业务相关的差异性CSS。

3. **皮肤型样式**：如果产品需要换肤功能，可以将颜色、背景等抽离出来，以便于更换网站风格。

这些分类与《编写高质量代码》一书中提到的base.css、common.css和page.css的划分非常相似。

#### CSS内容分类

NEC将CSS内容分为八类，并对各类型的命名给出了建议：

1. **重置（reset）和默认（base）（tags）**：消除浏览器默认样式差异，保证一致性。

2. **统一处理**：统一调用背景图、清除浮动等通用设置。

3. **布局（grid）（.g-）**：分割页面结构，如头部、主体、侧栏等。

4. **模块（module）（.m-）**：语义化的可复用大组件，如导航、登录、评论等。

5. **元件（unit）（.u-）**：不可再分的小控件，如按钮、输入框等。

6. **功能（function）（.f-）**：常用的定位、浮动、边距等样式。

7. **皮肤（skin）（.s-）**：文字色、背景色等，非换肤型网站通常只提取文字色。

8. **状态（.z-）**：表示选中、禁用、激活等状态。

#### CSS命名规范

1. **选择器使用**：建议使用类选择器，避免使用ID选择器以提高复用性。

2. **分类命名方法**：使用单个字母+“-”为前缀，如.g-、.m-、.u-等。

3. **后代选择器命名**：长度大于等于2的类选择器为后代选择器，如.m-list .item、.m-list .text。

4. **简约而不失语义**：相同语义的不同类可以通过加数字或字母区分，如.m-list、.m-list2等。

5. **模块和元件的扩展类**：基类和扩展类的命名方式，如.m-list、.m-list-1等。

6. **防止污染和被污染**：慎用标签选择器，采用类选择器并注意命名方式，如.m-layer.layerxxx、.m-list2 .list2xxx。

### 结语

总的来说，网易NEC的CSS规范非常合理且实用，能够帮助我们组织整站的CSS，写出简洁、规范、高度复用且易于维护的代码。目前，我们的项目中已经全面采用这一写法，并引入了LESS来进一步提升开发效率。