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"）来命名HTML元素，然后在CSS中描述标题或号召性用语的样式。如果您想稍后进行更改，则可以通过简单地编辑CSS来进行更改，而无需更改HTML。

更不用说如果您使用Javascript来操作元素，则使用document.getElementsByClassName('et-margin-top-30')a）很难理解脚本和HTML结构的含义，b）每次您想进行调整时都需要修改HTML，CSS 和Javascript元素的外观。这样，使用描述性的类名就变得非常重要。