是否有用于命名类的标准方法？

Question

例如：

class="profile profile-image profile-image-large"

要么

class="profile profile-image profile-image-small"

这些名称或破折号有问题吗？

Answer 1

老实说，这取决于个人开发人员和他们自己的感受。就像您建议的那样，有两种同样好的构造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原则，因此我尝试避免这样做。

那么什么是TL; DR？

我认为，没有“正确答案”。从约定的角度来看，值得注意的是，像Twitter-Boostrap这样的框架使用了两种样式的混合体-
可以在任何地方应用的全局类，与保护孩子样式的前缀类混合在一起。

对于 任何 程序员而言，最重要的是，您的代码清晰易读且易于定义，并且无论使用哪种方法，都使用尽可能少的代码来实现结果。