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),雖然也到處寫，難道你還需要給它做成個插件么？直接寫就行了，不用糾結