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

当使用CSS预处理时，请考虑这一点：

.pull-right {
    float:right;
}

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

或者

.pull-right {
    float:right;
}

.login {
    .pull-right;
}

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

教条地说，我不喜欢实用程序类将样式关注点渗透到我的文档标记中。
从实用的角度来说，我喜欢实用类的易用性，并且我不需要单独的类来针对需要拉到右边的每个元素。
在一个大型项目中使用实用程序类是否会烧掉任何人？在这个项目中，结构必须更改，从而意味着HTML标记和样式都要更改？如果我正在着手一个非常大的UI项目，我应该避免让样式关注进入我的标记的实用程序类吗？

最佳答案

这是一个有点主观的问题，不适合StackOverflow。但让我试着这样回答。
“有人在一个大项目中使用过实用程序类吗？”我毫不怀疑有些人曾经在某个时候使用过。任何时候，当你将公开的外观类混合到html中时，如果外观必须改变的话，就会发生烧录。
实用程序类比您描述的有第三个用途。Javascript可用于在某个点动态添加类，从而允许该类影响html。当然，这与您的第一个示例有关，但不会硬编码到html中，因此避免您所询问的问题。
最后，如何使用它取决于你的需要和期望。在您的特定示例中，将float: right添加到.logo类同样容易，而不是在其上使用实用程序MIXIN，因为在MIXIN中只有一行CSS代码。如果有十行，那么使用MIXIN为.logo会更有意义。我假设Bootstrap将MIXIN定义为一个直的类，这样您就可以灵活地使用它，或者直接添加类，或者作为MIXIN。如果它们纯粹是一个混合函数，那么它们的定义将是.pull-right()（括号），这样它就不会创建一个在元素上添加pull-right作为类的选项。
所以，你是否应该避免把它作为一个直接的类，这取决于你愿意冒什么样的风险，你描述的场景。你可以被烧死，但也许不能。这一切都取决于某些变化的可能性，你将它引入html的次数，还有一些我没有想到的其他因素。只有你才能将风险水平评估为是否使用的回报水平。

关于html - CSS实用程序类-违反关注点分离，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/15261932/