問題描述

問題解答

沒有必要對一個(gè)個(gè)的零散的重復(fù)屬性糾結(jié)，而應(yīng)該把重心放到可重用的模塊上。不然你會(huì)越來越無法自拔，題目中開頭那段代碼我覺得就是最好的

可以利用js

可以花個(gè)10分鐘了解一下sass

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

假如你有3個(gè)元素

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

它們都有一個(gè)公共的postion:absolute;然后你提取出來單獨(dú)寫

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

可以看出，這樣毫無意義，就一條代碼，提不提出來都無所謂。。最多增強(qiáng)一點(diǎn)微不足道的可讀性

但是如果是一大串功能性代碼，比如清除浮動(dòng)，那么肯定要提取出來方便復(fù)用，比如SASS的做法：

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

那么隨便你再哪里調(diào)用它，比如

.demo1{@extend %clearfix;.....其他代碼}.nav{@extend %clearfix;......其他代碼}sub-nav{@extend %clearfix;......其他代碼}最后都會(huì)自動(dòng)合并為.demo1,.nav,.sub-nav{清除浮動(dòng)公共代碼}

其實(shí)這和JS的function一樣，大量復(fù)用的自然做成插件，單獨(dú)一句console.log(XXX),雖然也到處寫，難道你還需要給它做成個(gè)插件么？直接寫就行了，不用糾結(jié)