创建更少的智能实用程序填充和边距类？
我觉得应该有一种方法来创建一组更智能的实用程序类，这样我就可以将像<div class="margin-top-6">这样的类添加到HTML本身中的标记中，而更少的工具也可以使用它来运行，并应用一个CSS规则，在元素的顶部添加6px的边距。
这个是可能的吗？
我坚信工作更聪明，而不是更努力，但现在我有一个疯狂的笨重，感觉它可以更聪明一点，更少的知识。
所以我想知道是否有更好的东西。这里是我所拥有的填充部分的一个样本。完整的代码是重复的，就像每个类集的25 it以下一样，但是有一个完全灵活的设置是很好的。我在想一些带有变量或混合变量的东西，或者一些类似于.padding-@var1-@var2的规则，然后检查vars是否存在，如果是，那么它们是什么，then...etc。
较少
.padding {
&-1 { padding: 1px !important; }
&-2 { padding: 2px !important; }
&-3 { padding: 3px !important; }
&-...
&-height-1 { padding-top: 1px !important; padding-bottom: 1px !important; }
&-height-2 { padding-top: 2px !important; padding-bottom: 2px !important; }
&-height-3 { padding-top: 3px !important; padding-bottom: 3px !important; }
&-...
&-top-1 { padding-top: 1px !important; }
&-top-2 { padding-top: 2px !important; }
&-top-3 { padding-top: 3px !important; }
&-...
&-bottom-1 { padding-bottom: 1px !important; }
&-bottom-2 { padding-bottom: 2px !important; }
&-bottom-3 { padding-bottom: 3px !important; }
&-...
&-width-1 { padding-right: 1px !important; padding-left: 1px !important; }
&-width-2 { padding-right: 2px !important; padding-left: 2px !important; }
&-width-3 { padding-right: 3px !important; padding-left: 3px !important; }
&-...
&-right-1 { padding-right: 1px !important; }
&-right-2 { padding-right: 2px !important; }
&-right-3 { padding-right: 3px !important; }
&-...
&-left-1 { padding-left: 1px !important; }
&-left-2 { padding-left: 2px !important; }
&-left-3 { padding-left: 3px !important; }
&-...
}HTML使用：
<div class="listItem margin-top-6 padding-width-14">
...content here...
</div>有什么想法吗？
非常感谢大家在这方面的时间和想法！
回答 1
Stack Overflow用户
发布于 2014-06-24 17:13:13
很抱歉打断了你，但这是更努力的工作，而不是更聪明。
为什么要费劲地生成大量CSS类来对元素的框模型进行微观调整呢？只需使用HTML的内置特性：style属性。
而不是：
<div class="listItem margin-top-6 padding-width-14">
...content here...
</div>你可以：
<div class="listItem" style="margin-top: 6px; padding: 0 14px;">
...content here...
</div>...and不必生成任何魔法类。
如果您想更聪明地工作，可以将这种微调整移动到CSS文件中，并将它们附加到有意义的类名上：
<div class="listItem listItem-special">
...content here...
</div>然后，你可以使用较少的力量。( 参数混合器)为了缩短您需要编写的CSS：
.listItem-special {
.padding-width(4);
margin-top:6px;
}下面是上面使用的混合内容：
.padding-width(@width){
padding-left: (@width)px;
padding-right: (@width)px;
}通过类名listItem-special抽象样式，可以重用标记中的多个位置的样式。此外，当您需要跨站点更改listItem-special的样式时，只需更新该类的CSS定义即可！
通常认为，将样式与标记分离是一种最佳实践。关于这个话题有很多资源。这是“粉碎杂志”的一篇。
https://stackoverflow.com/questions/24391165
复制相似问题
腾讯云开发者
