.profile.image.large{
    width: 300px;
}

/* Or: */
.profile-image-large{
    width:300px;
}

他们实现了同样的目标,但是当你开始广泛思考时,你会发现这些风格之间的差距有多大.

分离类使它们可以重复使用：DRY惯例永远不会重复.通过分离大类或图像类,我们可以重用相同的类：

.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 */
}

在一个像边框这样的简单例子中,这似乎并不重要.但是考虑到一个更大的CSS块,您可能希望在整个代码中重复使用数十次.你会经常重复自己.

逻辑分组样式仍然是一件好事：我不是说 – 类是一件坏事 – 它们有助于为代码定义命名空间,因此在维护模块化代码的意义上,为样式添加标识符前缀有助于防止冲突特别是如果你在一个可以重复使用的web代理中开发代码,或者你正在构建一个插件(在这种情况下,绝对需要样式前缀).

使用SCSS(我的首选环境)等编译语言进行开发也会改变您的想法.在SASS / SCSS中,我们可以轻松地执行此操作：

.profile{
    display: block;

    &-image{
        border: 1px solid blue;
    }
}

并且评估与元素上的配置文件profile-image相同.另外,SASS还支持：

.profile{
    display: block;

    &.image{
        border: 1px solid blue;
    }
}

其中评估分析元素上的图像.非常相似 – 但两种样式都仅限于其父元素.profile,不能全局使用.样式受到保护,而在我的第一个“自然”CSS示例中,蓝色类可以自由添加并由HTML页面中的任何元素合并.

编辑：您仍然可以在SASS代码中使用全局.image样式,然后覆盖单个示例,但就个人而言,我觉得这违反了DRY原则,我尽量避免在可能的情况下执行此操作.

什么是TL; DR？

在我看来,没有“正确答案”.从常规的角度来看,值得注意的是,像Twitter-Boostrap这样的框架使用了两种风格的混合 – 全局类可以应用到任何地方,与保护孩子风格的前缀类混合在一起.

对于任何程序员来说,最重要的是你的代码清晰可读和定义,并且你使用尽可能少的代码来实现你的结果 – 无论你使用什么方法.