哪种HTML CLASS定义是正确的解决方案？

Question

现在用于控件的框架就像这样

HTML <{{html_tag}} class="ui-accordion ui-widget ui-helper-reset" />

CSS .ui-accordion.ui-widget { {{style}} } .ui-widget.ui-helper-reset { {{style}} }

有一段时间来找我更合乎逻辑

HTML <{{html_tag}} class="ui accordion widget helper reset" />

的CSS .ui.accordion.widget { {{style}} } .ui.widget.helper.reset { {{style}} }

有没有人有任何利弊？

Answer 1

在您的第一个示例中，因为框架缩写已添加为每个类的前缀，特别是相关到框架：

1. 它允许您清楚地识别特定于框架的类（与您可能添加的内容相比）

2. 它减少了与您自己的班级发生碰撞的可能性

3. 这些类的编写与目的有关，分裂它们可能会从目的中抽象出类的含义

Answer 2

除了SW4的答案之外，它还具有使用以下选择器分别选择包含或以ui-开头的类的任何元素的好处：

*[class|=ui] *[class^=ui-]