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

Question

header {
    .dom1 { position: absolute; …… }
    .dom2 { position: absolute; …… }
    .dom3 { position: absolute; …… }
    .dom4 { position: absolute; …… }
}

1. 每个元素都单独写 像上面那样~

2. 统一在一个位置声明

   .dom1, .dom2, .dom3, .dom4…… {
       position: absolute;
   }

   但是这样做多了会乱 而且貌似对性能也有影响吧 每个相同的 dom 重复选取了两遍

3. 定义一个类 但就一个属性有必要定义一个类吗... 而且这种东西似乎叫原子类？好像争议蛮大的~

好纠结 大家都怎么去做的呢?~

Answer 1

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

Answer 2

可以利用js

Answer 3

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

Answer 4

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

假如你有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),虽然也到处写，难道你还需要给它做成个插件么？直接写就行了，不用纠结