老实说，这取决于个人开发人员和他们自己的感受。就像您建议的那样，有两种同样好的构造CSS类的方法：
.profile.image.large{
width: 300px;
}
/* Or: */
.profile-image-large{
width:300px;
}
它们可以达到相同的目的，但是当您开始广泛思考时，您会发现这些样式之间的差距有多大。
该干的惯例是从不重复自己。通过分离largeorimage类，我们可以 重用 相同的类：
.blue{
border: 3px solid blue; /* All .blue's will have a blue border */
}
.profile.blue{
border-style: dashed; /* Inherits from the prevIoUs blue and replaces the solid with a dash. */
}
.blue{
border: 3px solid blue; /* All .blue's will have a blue border */
}
.profile-blue{
border: 3px dashed blue; /* We had to redefine the entire style */
}
在像这样的简单示例中border，这似乎无关紧要。但是要考虑到更大的CSS块，您可能希望在整个代码中重复使用数十次。您会重复很多次。
我并不是说这-classes是一件坏事-它们有助于为您的代码定义名称空间，因此在维护 模块化 代码的意义上，用标识符加上前缀将有助于防止冲突，特别是如果您要在要重新使用的Web代理中开发代码，或者要构建插件（在这种情况下，绝对需要样式前缀）。
用诸如SCSS（我的首选环境）之类的编译语言进行开发也会改变您的想法。在SASS/SCSS中，我们可以轻松地做到这一点：
.profile{
display: block;
&-image{
border: 1px solid blue;
}
}
其结果与profile profile-image元素相同。另外，SASS还支持：
.profile{
display: block;
&.image{
border: 1px solid blue;
}
}
profile image对一个元素求值。非常相似-但这_两种_样式都限于其父元素.profile，并且不能全局使用。样式是受保护的，而在我的第一个“自然” CSS示例中，blue可以通过HTML页面中的 元素自由添加和合并类。
编辑： 您仍然可以.image在SASS代码中使用全局样式，然后覆盖各个示例，但是就我个人而言，我认为这违反了DRY原则，因此我尝试避免这样做。
我认为，没有“正确答案”。从约定的角度来看，值得注意的是，像Twitter-Boostrap这样的框架使用了两种样式的混合体- 可以在任何地方应用的全局类，与保护孩子样式的前缀类混合在一起。
602392714
清零编程群