前端开发工程师CSS命名规则——表现到极致

前端开发工程师css命名|前端开发者

众所周知,css 在进行命名的时候,为了避免冲突,我们都会在这个样式名前加上各种前缀,一是为了优先级的,第二就是为了避免命名冲突这个问题。

可是这样一来,无形中就增加了css 文件的大小,我们写的css 文件名就变成了,老太太的裹脚布,十分不利于网站资源优化。
如何命名才能让css发挥最大的重用性潜力呢?我们之前取名的时候,第一感觉,就是让命名更有语义化,这样一来,命名自然而然的会变长的,如何使css命名达到精简,更高效的渲染网站呢?
我看了,一篇博客,上面提到了,”面向属性的命名”这一观点,感觉很有道理,这样的话,同一属性的样式,就可以复用css了,这样的话,css 的复用性,就会被利用到漓淋尽致了,至于冲突,那就不会发生了。
样式分离为什么可以让样式的重用性放大至最大,就是因为分离后样式的命名就是样式本身。例如:

.side-item-header{padding:0 0 8px; text-align:right;}
要是我,我会对其进行分离。在实际项目时,text-align:right;这个属性早就在CSS通用样式库里面了,而padding:0 0 8px;则会以padding-bottom:8px;的形式放在网站通用样式库里了最后,CSS命名与样式会如下:
.tr{text-align:right;}
.pb8{padding-bottom:8px;}
而这里分离出来的样式又可以被其他地方使用。是不是感觉很爽。
当然,如果网站本身的架构不是对每个侧栏内容进行模块化处理的话,说实话,这里标题的分离还是有点危险的。想想看,如果那天产品经理说底部padding值要改成10像素,啊哦,如果你的网站架构不合理,含这类标题的模块到处塞,会改到你急火攻心,吐血三升而亡的。所以,对于分离,我反复强调,“千万不要对网站通用的元素进行分离”。
所以,记住精简高效的CSS命名准则之一:[color=Red]对于网站非通用元素,如果样式简单(1~2个属性),对其分离并使用面向属性的命名方法。
[/color]

还有就是,不要进行各种不必要的前缀,要尽量做到,无id ,无层级,无标签

CSS命名就应该最简单。没有html标签,没有层级,为什么不要,有三大原因:

  1. 限制重用
    我们会使用层级(#test .test),会使用标签(ul.test),可能是习惯(没多想),或是为了避免冲突。但是,我跟你说,从今以后,这种写法让他见鬼去吧(如果不是为了改变CSS优先级的话)。正如开篇论述的哲学观点,你限制越多,越抑制了CSS的重用性。例如#test .test{}这种写法,里面的CSS重用性多大,完全限死在了id为test的元素下,哪有重用性可言;又如ul.test,我勒个去,这个ul标签十有八九就是装饰用的,往这儿一放,同样CSS样式的div标签可以用吗?哭爹喊娘,眼泪汪汪也不管用啊。所以,相信我,层级啊,标签啊什么的,通通见鬼去吧。要知道,层级啊,标签啊作用是什么,是用来提高CSS优先级,把那个字母长的让人发毛的”!important”干掉的。

2.降低了渲染效率
来个例子考考大家(以后我面试别人可能就会考这题),html如下:
<div id=”test”>
<ul class=”test”></ul>
</div>
现在要给这里的ul标签一个样式,比如说padding-left:25px;那么下面四种写法哪个渲染速度最快?

test .test{}, ul.test{},#test ul{} 以及.test{}。

如果单纯的ul与.test PK,我还真拿不定谁的渲染速度更快些。但是,一旦牵扯到层级与标签,我100%确定,.test这种最直接的命名方式渲染效率是最高的。要知道,CSS渲染元素和使用JavaScript获取页面元素那是完全不一样的。如果是使用JavaScript获取DOM元素,则#test ul{}速度是最快的,先id获取,再tag获取,这些可都是JavaScript内置的方法。但是,CSS的渲染方式则是属于外太空系的了,《高性能网站进阶指南》一书曾提到CSS的渲染方式是“从右往左”渲染的,就拿#test ul{}举例,先渲染页面上所有的ul标签,再去寻找id为test的元素,所以,[color=Red]出现#test div{}这种写法的人都是傻×的,页面先渲染id为test的元素?非也!先渲染页面上所有的div,再去寻找其老爸有没有id为test的元素。由于这种渲染差异最大就200~300毫秒(补充:这里的差异不是说单纯一个样式的差异,而是这些写法泛滥的页面的全部渲染,其渲染差异数据可以参见“翻译-不同CSS技术及其CSS性能”一文),我们人一般是感觉不到的。所以,长久以来,也都不以为然。[/color]但是,我是绝对容不下这种写法的,还有,要是让我看到类似于ul#test{}这样子的命名,不好意思,面试肯定过不了。
所以,CSS命名,只要出现了层级,出现了标签,就是一次额外的渲染,层级越多,渲染的开销也就越大,这就是为什么一些前辈的文章会建议要尽量避免过深的层级。这也是为什么要“无层级”,“无标签”。

那么问题来了,css 在命名的时候,进行无层级,无id 的话,会不会出现命名冲突呢?如何避免这个问题

那这就需要,在团队开发之前,先定义好规范,所有人的命名方法,或许采取模块化命名规则,例如:属于 广告区域的, 前面的css 都可以加上 ad-XX,这样就不会出现冲突的问题了。

前端开发工程师css命名|网站前端开发

» 本文来自:前端开发者 » 《前端开发工程师CSS命名规则——表现到极致》
» 本文链接地址:https://www.rokub.com/3280.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!