css命名之——3无原则

原创 dingxiangming82 随笔 前端踩坑 241阅读 2018-04-03 09:32:34 举报

(原创)

从事前端行业数十年了(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{}

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

评论 ( 1 )
最新评论