为什么我经常在常用库中看到 .closed-dialogue 和 .open-dialogue 而不是 .closed.dialogue 和 .open.dialogue?
每个元素一个类的问题
要使用第一种方法格式化所有对话，您已经需要在选择器中使用两个类。
每次添加另一个差异时，f.e.一些颜色，你会乘以选择器中的类数:.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 这样的库倾向于为所有类添加唯一值的前缀。
关于css - 串联类(class)是好的做法吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17749607/