为什么在常用库中经常看到.closed-dialogue和.open-dialogue而不是.closed.dialogue和.open.dialogue？
每个元素只有一个类的问题
要使用第一种方法设置所有对话的格式，选择器中已经需要两个类。
每次添加另一个差异时，某些颜色，您可以将选择器中的类数量乘以.warning-dialogue-closed, .error-dialogue-closed, .warning-dialogue-open, .error-dialogue-open。
现在怎么可能是个好习惯？这很难维持！
您甚至无法在模块中分离代码，因为对话的基本选择器需要知道所有存在的对话！
每个元素几个类可以解决这个问题
通过串联几个类，代码将更短，更易于维护且更易于阅读：.dialogue格式化所有对话，无论您有多少不同。.error.dialogue和.warning.dialogue会添加两种口味的更改。 .open.dialogue和.closed.dialogue将解决另一个区别。
您甚至可以使用另一个隔离的模块来定义大小对话，而基本模块甚至不必知道它。
那么，为什么我从未见过？
最佳答案
您的方法的问题在于，它更可能与其他类冲突。
如果页面本身还有其他一些不相关的open类，则class="open dialog"会选择该类的规则并弄乱。
这就是为什么像jQuery UI这样的库倾向于为所有类添加唯一值的前缀。