精简高效的css命名准则
对于css,为了避免样式冲突,我们总会赋予相当特殊的命名,或是在选择符上添加html标记,或是使用层级。我们为避免在冲突上做文章,就会把代码的命名变得复杂化。 如果css的重用性越高,相比就越高效。如果名字越普通就越没有含义,越容易被重用,所以css想要重用性高,就需要命名简单。但是,简单的命名越容易造成冲突 面向属性的命名方法
我们习惯在css命名的时候掺杂语义,这样可以让代码更易懂。例如淘宝中免费注册:help-guest-regist
.l{float:left} .r{float:right} .c{clear:both} .f16{font-size:16px;} .w265{width:265px;} .ml62{margin-left:62px;}
当然,如果网站本身的架构不是每个侧栏内容进行模块化处理的话,说实话,这里标题的分离还是有点危险的。想想看,如果哪天产品经理说底部padding值要改成10 像素,如果你的网站架构不合理,含这类标题的模块到处是,会改到你急活攻心,兔血三升而亡 千万不要对网站通用的元素进行分离
精简高效css命名之“三五原则”
- 无ID
- 无标签
- 无辈分层级
- css的命名就应该最简单、最直接,直捣黄龙,没有html标签,没有层级,这些通通滚蛋,
原因解释
1.限制重用 我们会使用层级(#test .test)(ul .test)可能是习惯没有多想,或是为了避免冲突。但是,这些的写法以后都不要用 如果你限制的越多的话,越会使css 的重用性降低。例如#test .test{}这种写法,里面的css 的重用性多大,完全被限死在id为test中了,没有重用性可言了, ul .test 这个ul标签 如果想要体改css优先级,把那个字母长的让人发毛的!important干掉的 降低渲染效率
现在要给ul这个标签一个样式,比如说padding-left:25px;那么下面四种写法那个渲染的速度比较快
#test .test{}. ul .test{} #test ul{} .test{}
如果单纯的ul,.test PK拿不准哥哥的渲染速度会更快些。但是,一旦牵扯到层级与标签,.test这种最直接的命名方式渲染速度最高的 css渲染速度和使用javascript获取页面元素那是完全不一样的。如果使用javascript获取dom元素,则#test ul速度是最快的,先获取id在tag获取, 这些都是javascript的内置方法。但是,css的渲染方式则是属于外太空的了,《高性能网站进阶指南》中提到css的渲染方式是从右往左渲染的,就拿#test ul 是先渲染页面上所有的ul元素,再去查询id为test元素 ;这种渲染差异最大为200ms(这里的差异不是单纯一个样式发的差异,而是这些写法泛滥的页面的全部渲染)