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>没有任何区别。

使用CSS Helper类

2 个答案: