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

例如：

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

或

---

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

老实说，这取决于个别开发人员和他们自己的感受。有两种同样好的方法可以构建CSS类，正如您所建议的：

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

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

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

分离类使它们可重用：惯例是永远不要重复。通过分离

大类

或

图像

类，我们可以重用相同的类：

.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块，您可能希望在整个代码中重复使用几十次。你会重复很多次

对样式进行逻辑分组仍然是件好事：我不是说

-类
是件坏事-它们有助于为代码定义名称空间，因此在维护模块化代码的意义上，在样式前面加上标识符将有助于防止冲突，特别是当你在一个网络代理中开发代码并重复使用时，或者如果你正在构建一个插件（在这种情况下，样式前缀是绝对必要的）

使用诸如SCSS（我的首选环境）之类的编译语言进行开发也会改变您的思维方式。在SASS/SCSS中，我们可以轻松做到这一点：

.profile{
    display: block;

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

其计算结果与元素上的
profile image
相同。或者，SASS还支持：

.profile{
    display: block;

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

其计算结果为元素上的配置文件图像
。非常相似-但这两种样式仅限于其父元素
.profile
，不能全局使用。样式是受保护的，而在我的第一个“自然”CSS示例中，
blue
类可以通过HTML页面中的任何元素自由添加和合并

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

那么TL是什么；DR？

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

对于任何程序员来说，最重要的是你的代码是清晰可读和定义的，并且你使用尽可能少的代码来实现你的结果——不管你使用什么方法。
老实说，这取决于每个开发人员和他们自己的感受。有两种同样好的方法可以构建CSS类，正如您所建议的：

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

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

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

分离类使它们可重用：惯例是永远不要重复。通过分离
大类
或
图像
类，我们可以重用相同的类：

.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块，您可能希望在整个代码中重复使用几十次。你会重复很多次

对样式进行逻辑分组仍然是件好事：我不是说
-类
是件坏事-它们有助于为代码定义名称空间，因此在维护模块化代码的意义上，在样式前面加上标识符将有助于防止冲突，特别是当你在一个网络代理中开发代码并重复使用时，或者如果你正在构建一个插件（在这种情况下，样式前缀是绝对必要的）

使用诸如SCSS（我的首选环境）之类的编译语言进行开发也会改变您的思维方式。在SASS/SCSS中，我们可以轻松做到这一点：

.profile{
    display: block;

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

其计算结果与元素上的
profile image
相同。或者，SASS还支持：

.profile{
    display: block;

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

其计算结果为元素上的配置文件图像
。非常相似-但这两种样式仅限于其父元素
.profile
，不能全局使用。样式是受保护的，而在我的第一个“自然”CSS示例中，
blue
类可以通过HTML页面中的任何元素自由添加和合并

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

那么TL是什么；DR？

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

对于任何程序员来说，最重要的一点是，您的代码清晰易读且定义明确，并且无论使用何种方法，您都尽可能少地使用代码来实现您的结果。
命名类时的一个好的经验法则是描述元素内容的用途

首选

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

          OR

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

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

首选

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

          OR

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