css - 这种零碎的重复样式该怎样写最优~
问题描述
问题解答
回答1:没有必要对一个个的零散的重复属性纠结,而应该把重心放到可重用的模块上。不然你会越来越无法自拔,题目中开头那段代码我觉得就是最好的
回答2:可以利用js
回答3:可以花个10分钟了解一下sass
回答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),虽然也到处写,难道你还需要给它做成个插件么?直接写就行了,不用纠结
相关文章:
1. python - 关于matplotlib的x轴显示的问题2. mysql优化 - mysql慢查询copying to tmp table3. android 文件File删除问题4. javascript - vue生成一维码?求助!!!!!急5. ueditor上传服务器提示后端配置项没有正常加载,求助!!!!!6. css - .clearfix:after中为什么设置display: table7. 请教: 关于 python 反斜杠转义的疑问8. css - transform: translateY(-50%)在360浏览器极速模式下使得文字变模糊了9. angular.js - 怎样在使用ng-repeat属性的标签里面监听单个事件,使其能够单个改变CSS。10. nginx英文文档的WebSocket proxying部分没看太明白,麻烦推荐一点中文文章
