Html 如何使CSS代码更高效？

我的CSS文件中有很多重复的

CSS

条件（只有数字差异）。我想知道我怎样才能使它有更少的条件

另外，我知道更少或SASS可以使它更容易，但它最终仍会生成相同数量的CSS

---

欢迎任何其他反馈

你真的无能为力。最后，浏览器将在查看文件时解释css

不过，您可以执行以下操作：

1.将选择器分组在一起。这可能会影响css的可读性和结构

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

---

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

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

将CSS放在HTML旁边的目的是将语义和表示分离。这是通过将CSS规则锚定到通用标记来实现的，这样HTML就不会被表示问题所污染。当然，这仅在使用与语义相关的泛型类和ID时有效。例如：

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

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

你在这里要做的就是制作一个巨大的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中节省了大量带宽。

我想添加一些内容。正如我所看到的，CSS中有许多重复的样式，这些样式可以由javascript代码使用简单的循环和条件生成，这样可以实现更小的CSS文件（以防您想要节省带宽）

您可以在这里看到如何做到这一点：

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

---

这可能是“减少CSS文件中的条件”的一种方法。您可以缩小CSS以进行生产您好，所有这些类都会被使用吗？您可以运行冗余检查以查找任何未使用的css：我也知道，但这不会缩小条件。所有类都可以使用，这取决于css文件的用户愿意使用哪个类。感谢您的提示，我将调整

.row div.gutter-lg-10..

的部分。当然，我会缩小它。（检查github项目）您忘记了它是一个网格CSS，那么在您的示例中，媒体查询在哪里？还有重复使用我在你的例子中没有看到的样式。第二件事是，这只是我的一个想法，我正在尝试找出最有效的方法。另一件事是，你可以在css中做以下事情：

这更好，并且有更多的可重用性

不，这同样糟糕，你仍然在存储表示信息（

红色

，

背景

和

粗体

）在您的HTML中。语义描述内容，而不是样式。网格在这方面并不重要。请始终考虑您的HTML将如何在盲文浏览器或语音浏览器中呈现。在没有屏幕媒体的情况下，这些类仍然必须相关。但唯一的方法是使用类似引导的柱网，但这将限制您在fl中当然是可行的。或者你可以选择完全没有网格，只是简单的css。我同意你的观点，课堂上的表现信息需要被阻止。但在这个想法中，我无法通过它。（除非你有想法）。而且媒体查询仍然没有通过内联css解决。我也在考虑这一点，但性能问题对我来说是不可能的。无论如何，谢谢！一个24kB的bandwitch问题（缩小后甚至更低），真的吗？@singe31可能对一些人来说，可能对其他人来说不是。我知道，但你说你建议一个Javascript解决方案来保存bandwitch（对于24KB^^）我只是一个优化狂：D

<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>