Question

例如：

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

OR

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

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

Answer 1

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

<强>具体

<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：

请考虑使用具有语义的类。

人们经常使用类名称，例如 bluetext 或 redborder 。很多   更好的命名类的方法是使用某个HTML作为角色   该类的元素有。

好名字不会改变

想想为什么你想要某种东西看起来某种方式，而不是   真的是它应该如何看待。看起来总能改变，但是   给出一些外观的原因保持不变。

好名字
  warning，important，downloadableImage和submenu都是border4px   好名字。它们描述了某个元素代表什么，以及它们   不太可能改变。警告始终是警告，不是   无论页面外观有多大变化。

错误名称
  lighttext，prettybackground和lighttext是坏名称的示例。您   可能会使该边框变得高达5个像素，或者背景可能看起来像   一段时间后很老了，而且根本不漂亮。使用的一个优点   CSS是你不必改变太多以改变外观   你的网站。如果您必须将所有浅色文本更改为深色文本，   从而将所有HTML中的所有类darktext更改为class="profile profile-image profile-image-large"   页面，你可能会错过一些。

所以，回答这个问题：

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

那么，这些类名是否代表＆＃34;该类的HTML元素的角色[＆＃34; ？

它是混合的。 profile-image和large是明确的角色。但是small和

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

只是表示图像的外观，正如W3C指出的那样，它可以改变。如果大小发生变化，那么类名也可能不得不改变。

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

这可能符合W3C指南，在可重用性，灵活性和维护方面提供更多好处。

{{1}}

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

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

逻辑分组样式仍然是一件好事：我不是说-classes是一件坏事 - 它们有助于为代码定义命名空间，因此在维护意义上模块化代码，为您的样式添加标识符前缀有助于防止冲突，特别是如果您正在开发可重复使用的Web代理中的代码，或者您正在构建插件（其中case，绝对需要样式前缀。）

使用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这样的框架使用两种样式的混合 - 可以在任何地方应用的全局类，与保护其子项风格的前缀类混合。

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

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

2 个答案:

所以，回答这个问题：