2

我今天尝试用“帮助类样式”编写 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 之类的辅助类？

4

2 回答 2

5

通过 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元素的视觉外观。使用描述性的类名变得更加重要。

于 2012-06-21T10:47:10.717 回答
1

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

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

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

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

于 2012-06-21T10:47:24.557 回答