CSS Helper类的使用

Question

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

Answer 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 。 这样，使用描述性的类名就变得非常重要。

Answer 2

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

如果一个元素具有15个“附加”的样式，该怎么办。 它会有15节课吗？

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

我在做<p style="color: red;"></p>没有看到任何区别。