类有标准的命名方法吗？

Question

例如：

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

或

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

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

Answer 1

老实说，这取决于各个开发人员和他们自己的感受。有两种同样好的构造 CSS classes 的方法，就像你建议的那样：

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

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

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

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

.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 是一件坏事 - 它们有助于为您的代码定义命名空间，所以在维护 模块化 代码的意义上，在您的样式前加上标识符将有助于防止冲突，特别是如果您在将要重复使用的网络代理中开发代码，或者如果您'正在构建一个插件（在这种情况下，绝对需要样式前缀）。

使用像 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。非常相似 - 但是 both 样式仅限于它们的父元素 .profile 并且不能全局使用。样式受到保护，而在我的第一个 'natural' CSS 示例中，blue class 可以由 any 自由添加和合并HTML 页中的元素。

编辑：您仍然可以在 SASS 代码中使用全局 .image 样式，然后覆盖个别示例，但我个人认为违反了DRY原则，我尽量避免这样做。

那么 TL;DR 是什么？

在我看来，没有 "right answer"。从约定的角度来看，值得注意的是像 Twitter-Boostrap 这样的框架使用了两种风格的混合体——可以在任何地方应用的全局 classes，与保护其子级的前缀 classes 混合样式。

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

Answer 2

命名 classes 的一个很好的经验法则是描述元素内容的用途。

首选

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

          OR

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

相比之下，由于下述原因，应避免过于精确。

益处不大

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

          OR

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

这里有一些 guidelines from the W3C:

Use class with semantics in mind.

Often people use class names like bluetext, or redborder. A much better way to name your classes is with the role a certain HTML element of that class has.

Good names don't change

Think about why you want something to look a certain way, and not really about how it should look. Looks can always change, but the reasons for giving something a look stay the same.

Good names
warning, important, downloadableImage and submenu are all good names. They describe what a certain element represents, and they are not likely to change. A warning will always remain a warning, no matter how much the look of the page changes.

Bad names
border4px, lighttext and prettybackground are examples of bad names. You might fatten that border to a whopping 5 pixels, or the background may look pretty old after a while, and not pretty at all. An advantage of using CSS is that you won't have to change much in order to change the looks of your website. If you have to change all light text into dark text, and thus change all classes lighttext to darktext in all your HTML pages, you're likely to miss a few.

所以，回答问题：

Is there something wrong with this?
class="profile profile-image profile-image-large"
class="profile profile-image profile-image-small"

嗯，这些class名字代表"the role [the] HTML element of that class has"吗？

好坏参半。 profile 和 profile-image 是明确的角色。但是 large 和 small 只是表示图像的外观，正如 W3C 指出的那样，它可以改变。如果大小发生变化，那么 class 名称也可能必须更改。

这让我想到了这个：真正重要的问题并不是 class 名称的前缀、后缀或连字符。真正重要的是名字本身的质量。

也许这会与 W3C 准则保持一致，并在可重用性、灵活性和维护方面提供更大的好处。

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

类有标准的命名方法吗？

Is there a standard method for naming classes?

html

css

naming-conventions

semantic-markup

所以，回答问题：

类 有标准的命名方法吗？

Is there a standard method for naming classes?

html

css

naming-conventions

semantic-markup

所以，回答问题：

类有标准的命名方法吗？