Question

我的CSS文件中有很多重复CSS条件（只有数字差异）。我想知道如何让它的条件更少？

PS。我知道LESS或SASS可以让它变得更容易，但它最终仍会生成相同数量的CSS。

欢迎任何其他反馈！

Answer 1

你无能为力。最后，浏览器会在文件中查找css。

您可以执行以下操作：

1.组合选择器。这可能会影响您的CSS的可读性和结构。

.row div.gutter-lg-10,.row div.gutter-md-10 { padding-right: 10px; }

2.您可以缩小您的生产css，这将节省一些带宽。

Answer 2

你所做的与Good CSS（tm）完全相反。

在HTML旁边使用CSS的重点是语义和表示的分离。这是通过将CSS规则锚定到通用标记来实现的，因此HTML不会受到表达问题的污染。这当然只有在使用与语义相关的泛型类和ID时才有效。例如：

<p class="red-background-with-bold-font">This is extremely wrong</p>

<strong class="error">This is extremely right</strong>

第二个例子很好，因为它并不意味着任何关于演示文稿，并且您可能有一天将其更改为斜体绿色，而不会破坏语义或触摸HTML。

现在看看你的CSS：

.row div.gutter-xs-60 { padding-right: 60px; }
div[class*="col-"][class*="-x-10"] { width: 10px; }
div[class*="col-"][class*="-p-35"] { width: 35%; }

你在这里做的是制作一个巨大的CSS怪物，以避免使用内联样式。然而，绝对没有附加价值，因为HTML最终仍然是硬编码的：你不能将-x-10的含义改为一天宽度为20px而不引起重大混淆，这意味着永远不会分离关注的问题。

所以最后 - 内联样式并不像有时教导的那样总是错误。如果你要渲染一些自定义元素，只需使用它们，它就是它们的用途：

<div style="width:20px;padding-right:60px">This is far better and clearer...</div>

<div class="row-x-20 gutter-xs-60">...than this draconic invention</div>

它也提供了更快的速度，避免了数百个部分类名选择器，并在大多数未使用的CSS中节省了大量带宽。

Answer 3

我想补充一些东西。正如我所看到的，CSS中有许多重复样式可以通过使用简单循环和条件的javascript代码生成，这样您就可以实现更小的CSS文件（以防万一你想节省带宽）。

您可以在此处查看如何在此处执行此操作：How to dynamically create CSS class in JavaScript and apply?

当然，这可能会导致性能问题（因为每次加载该页面时都会生成该脚本），但这一点可以忽略不计。试一试：）

这可能是“CSS文件中的条件较少”的方法之一。

如何才能提高CSS代码的效率？

3 个答案: