CSS实用程序类 - 违反关注点分离

Question

在使用CSS预处理时考虑这一点：

.pull-right {
    float:right;
}

<div class="pull-right"><span>My content being pulled to the right</span></div>

OR

.pull-right {
    float:right;
}

.login {
    .pull-right;
}

<div class="login">My login form</div>

教条地说，我不喜欢实用程序类将样式问题放到我的文档标记中。

实际上，我喜欢实用程序类的易用性，而且我不需要单独的类来将我需要的每个元素定位到右边。

有没有人在大型项目中使用实用程序类而被烧毁，其中结构必须改变，从而意味着HTML标记和样式的变化？如果我正在开展一个非常大的UI项目，我是否应该避免将样式问题纳入我的标记的实用程序类？

Answer 1

这是一个有点主观的问题，它不适合StackOverflow。但是，让我试着用这种方式回答。

1. “有人曾经在一个大项目中使用实用程序类进行过刻录。”我毫不怀疑有些人在某个时间。每当你将明显的外观类混合到html中时，如果外观必须改变，则可以使用刻录的 。
2. 实用程序类的用法比您描述的要多。 Javascript可用于在某些点动态添加类，允许该类影响html。当然，这与你的第一个例子有关，但没有硬编码到html中，所以避免你问的问题。
3. 最后，如何使用它真的取决于您的需求和期望。使用您的特定示例，将float: right添加到.logo类比在其上使用实用程序mixin一样容易，因为在该mixin中只有一行CSS代码。如果有十行，那么使用mixin进行.logo会更有意义。我假设bootstrap将mixin定义为直接类，以便您可以根据需要灵活地使用它，无论是直接添加类还是作为mixin添加类。如果他们纯粹将它作为一个mixin，那么他们的定义就是.pull-right()（带括号），这样它就不会创建将pull-right添加为元素类的选项。

所以，你是否应该避免将它作为一个直接的课程使用，这取决于你所描述的场景中你愿意承担的风险。你可以烧，但也许不会。这一切都取决于变化的可能性，你将它引入html的次数，以及可能还有一些我没想到的其他因素。只有您可以将风险等级评估为是否使用它的奖励等级。