CSS Helper 类的使用答案

【问题标题】：Use of CSS Helper ClassCSS Helper 类的使用
【发布时间】：2012-06-21 10:39:46
【问题描述】：

我今天尝试以“帮助类样式”编写 CSS，但 Twitter 上的许多开发人员表示这是一种不好的做法。

这是一个例子：

<span class="et-margin-top-30 et-width-400 et-display-inline">
    <p class="et-common-frame-shadow et-inner-img-shadow">
        <img class="et-common-frame-img" src="img3.jpg"/>
    </p>
    <h3 class="et-margin-top-10 et-fontsize-26 et-fontweight-bold">foo</h3>
    <p class="et-margin-top-10">bar</p>
</span>

为什么这是一种不好的做法？我们什么时候应该使用 .clear 之类的辅助类？

【问题讨论】：

标签： css helper abstraction

【解决方案1】：

通过 CSS 进行样式化的想法是分离内容和样式。您的内容采用 HTML 格式，CSS 提供了有关如何直观显示的信息。如果你想改变一个，你可以在不改变另一个的情况下这样做。

通过将您的类命名为et-margin-top-30，您将样式信息放回到您的HTML 中。你也可以写style="margin-top: 30px"。因为如果您决定该元素毕竟应该有 50 个像素边距，那么您需要同时更改 CSS 和 HTML。这就是为什么它的风格不好。

您应该按功能命名您的 HTML 元素（例如 class="headline" 或 class="call-to-action"），然后在您的 CSS 中描述标题或 号召性用语 应该有样式。如果您想稍后更改，只需编辑 CSS 即可，无需更改 HTML。

更不用说如果你使用 Javascript 来操作元素，使用document.getElementsByClassName('et-margin-top-30') a) 很难理解你的脚本和 HTML 结构的含义 b) 需要你修改你的 HTML、CSS 和 Javascript 每次您想要调整元素的视觉外观时。那么使用描述性的类名就变得更加重要了。

【讨论】：

【解决方案2】：

你在那里尝试做的事情看起来很可怕。看起来您有一个适用于所有不同样式属性的类。它不仅会使您的 HTML 不可读，而且还会扩大文件大小。

如果一个元素“附加”了 15 种样式怎么办。会有 15 节课吗？

我也认为这只会使渲染速度变慢（这只是我刚刚编造的东西，我没有证据），因为它必须查找所有这些类。

我看不出做<p style="color: red;"></p>有什么不同。

【讨论】：