有没有一种标准的方法来命名类？

Question

例如：

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

或者

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

这些名称或短横线有问题吗？

- Sato

Answer 1

给类命名时的一个好习惯是描述元素内容的目的。 首选

<div class="copyright"></div>

          OR

<div class="social-media-buttons"></div>

相比之下，由于下面所述的原因，过度精确应该避免。

不太有益。

<div class="column-1"></div>

          OR

<div class="right-bottom"></div>

以下是W3C的指南：

以语义为基础使用类。

通常人们使用类名如 bluetext 或 redborder。用一个 HTML 元素的角色来命名你的类是更好的方式。

好的命名不会改变

考虑一下为什么你想让某个东西看起来某种方式，而不是它应该看起来怎样。外观总是可以改变的，但给某个东西外观的原因却不会改变。

好的命名
warning、important、downloadableImage 和 submenu 都是好的命名。它们描述了某个元素代表的含义，并且它们不太可能改变。警告始终是警告，无论页面的外观如何改变。

糟糕的命名
border4px、lighttext 和 prettybackground 是糟糕的命名示例。你可能要将边框加粗到 5 像素，或者背景在一段时间后看起来很旧，根本不漂亮。使用 CSS 的优点是，你不需要改变太多就可以改变网站的外观。如果你必须将所有浅色文本更改为深色文本，因此在所有 HTML 页面中将所有类 lighttext 更改为 darktext，你可能会错过一些。

那么，回答这个问题：

这有什么问题吗？
class="profile profile-image profile-image-large"
class="profile profile-image profile-image-small"

好的，这些类名是否代表了"该类HTML元素的角色"？

有点混淆。 profile 和 profile-image 是明确的角色。但是，large 和 small 只是表示图像应该如何显示，正如W3C指出的那样，这可能会改变。如果大小发生变化，则类名也可能需要更改。

这就引出了这个问题：重要的问题并不是类名的前缀、后缀或连字符。真正重要的是名称本身的质量。

也许这将符合W3C指南，并在可重用性、灵活性和维护方面提供更大的好处。

class="profile profile-image profile-image-main" 
class="profile profile-image profile-image-thumbnail" 

- Michael Benjamin

Answer 2

说实话，这取决于个人开发者和他们自己的感受。就像你建议的那样，有两种同样好的CSS类结构方式：

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

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

他们实现了相同的功能，但是当你开始广泛思考时，你会看到这些样式之间的差距有多大。

将类分开使它们可重用：DRY约定是永远不要重复自己。通过分离large或image类，我们可以重复使用相同的类：

.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 profile-image相同。此外，SASS还支持：

.profile{
    display: block;

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

这个元素评估为profile image。非常相似，但是两种样式都限制在它们的父元素.profile中，并且不能全局使用。这些样式是受保护的，而在我的第一个“自然”的CSS示例中，blue类可以自由地添加并被任何 HTML页面中的元素所使用。

编辑：您仍然可以在SASS代码中使用全局的.image样式，然后覆盖单个示例，但就我个人而言，我觉得这违反了DRY原则，我尽可能避免这样做。

那么TL;DR是什么？

在我看来，没有“正确答案”。从惯例的角度来看，值得注意的是，像Twitter-Boostrap这样的框架使用了两种样式的混合 - 可以应用于所有地方的全局类，与保护其子元素样式的前缀类混合在一起。

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

- Singular1ty