(原创)
从事前端行业数十年了(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 )
最新评论
BEM命名方式