css命名之——3无原则

（原创）

从事前端行业数十年了（2007~2018），一直在寻找一种无意招胜有招的css命名法则，并且能够快速的运用到项目中去，所以这么多年来，css命名一直在变化，以下是最近的心得：

遵循3无原则

此“三无原则”就是：无ID，无层级，无标签

无id

id一般在网页里面只允许出现一次，有悖于样式的通用性原则，所以我们把id命名留给JS，而把class命名留给样式。

无层级

我们不允许有层级的出现，层级关系让CSS优先级变得复杂，这样有悖于简单、直接的命名，我们需要直捣黄龙。

无标签

标签命名降低了渲染效率，我们要知道，CSS渲染元素和JavaScript获取页面元素是完全不一样的（或者说是相反的），如果是JS获取DOM，#test ul 是最快的，因为JS会先找到#test然后在#test下面找到ul，js的底层是这样写的。如果是css那则是相反的，先渲染所有的ul元素，然后在去渲染id为test的元素。

是不是很恐怖？

正确命名法则

.header{}

.header-logo{}

.header-nav{}

.login-wrap{}

.login-form{}

.login-form-input{}

.login-form-submit{}

最新命名法

如何规范的命名，并且容易传授，是我一直在思考的，最近频繁的在国外网站看到了这样的命名：

.slider-nav_item{}

.slider-arrow_left{}

.slider-arrow_right{}

我的理解

用“—”去定义一个模块，用“_”去定义模块里面的细节，比如我们通过.main-register去定义了主体部分的注册表单的整体部分，但是注册表单又分为了头部，身体部分，尾巴部分，那么我们就这么命名：

.main-register{}

.main-register_head{}

.main-register_body{}

.main-register_foot{}

目前最新命名法已经在切图网项目里面小规模使用。