css - 这种零碎的重复样式该怎样写最优~

问题描述

问题解答

没有必要对一个个的零散的重复属性纠结，而应该把重心放到可重用的模块上。不然你会越来越无法自拔，题目中开头那段代码我觉得就是最好的

可以利用js

可以花个10分钟了解一下sass

看公共代码的代码量 和 功能

假如你有3个元素

.demo1{position: absolute;border: 1px solid #000; } .demo2{position: absolute;border: 2px solid #f55; } .demo3{position: absolute;border: 3px solid #f30; }

它们都有一个公共的postion:absolute;然后你提取出来单独写

.demo1,.demo2,.demo3{position: absolute; }

可以看出，这样毫无意义，就一条代码，提不提出来都无所谓。。最多增强一点微不足道的可读性

但是如果是一大串功能性代码，比如清除浮动，那么肯定要提取出来方便复用，比如SASS的做法：

%clearfix { *zoom: 1; &:before, &:after {display: table;content: ’’; } &:after {clear: both;overflow: hidden; }}

那么随便你再哪里调用它，比如

.demo1{@extend %clearfix;.....其他代码}.nav{@extend %clearfix;......其他代码}sub-nav{@extend %clearfix;......其他代码}最后都会自动合并为.demo1,.nav,.sub-nav{清除浮动公共代码}

其实这和JS的function一样，大量复用的自然做成插件，单独一句console.log(XXX),虽然也到处写，难道你还需要给它做成个插件么？直接写就行了，不用纠结