命名和设置多字 CSS 类和 ID 的最佳实践是什么？

Question

我试图找出命名和设置 css 类和 id 的最佳实践，尤其是多个单词名称。

举例来说，假设我有一个

，我想将其命名为“角色技能”。 似乎有 3 个选择：“characterskills”、“character_skills”或“character-skills”。

以下哪一项是命名 css 类和 id 的行业标准？

在 css 名称中拆分多个单词的最佳实践是什么？

另外，最好的做法是始终使用全小写的 css 名称，因为它们不区分大小写？

Answer 1

我也倾向于使用连字符的样式。我主要使用该样式，因为 CSS 属性遵循相同的大小写。同样，JavaScript 函数和变量倾向于使用小驼峰式大小写。例如，要在 JavaScript 中更改 CSS 属性，您可以输入 object.style.textDecoration，但在 CSS 中，该属性将通过 text-decoration 进行更改。

Answer 2

我使用 lowerCamel 作为类名，使用 UpperCamel 作为 ID。这非常重要，我正在击败这个旧答案，因为在我看来，应该劝阻连字符的样式，即使下划线也比连字符更好。

为什么？因为其他所有语言都不能有连字符的变量名称。例如，您的 IDE 可能会也可能不会正确地自动完成。 （我的 IDE 不能，是 VI :P）

CSS 与 JavaScript 密切相关，带连字符的类名也使得与 JavaScript 的互操作变得困难。考虑以下（人为的）jQuery：

// For each of the following class, perform a function
var funcs = 
{
    main: function(){ /* ... */},
    toolbar: function(){ /* ... */ },

    // Oops, need to use a quote because there's this hyphenated name
    'customer-info': function(){ /* ... */ }
};

// Woot, a O(n^2) function
for(var className in funcs)
{
    var func = funcs[className];
    // maybe if we named it $('#some-selector')? The hyphen suddenly feels 
    // like some kind of operator to me. Makes me nervous :/
    $('#SomeSelector div').each(function()
    {
        if($(this).hasClass(className)) func();
    });
}

除了主观美学之外，使用连字符样式没有明显的优势。缺点是它从其他编程语言中脱颖而出（好吧，CSS 可能不是一种编程语言，哦，好吧..），而且它技术上是不正确的。

表示空格的正确（嗯？）方法是下划线。考虑这个短语“一封写给自己的信件”，我该如何转换空格？

• a_self-addressed_letter （正确，保留原来的含义）
• a-self-addressed-letter （哎呀！如果我们将其转换回来，我们会得到“一封自寻址的信”！）

最好的做法是始终使用全小写的 CSS 名称，因为它们不区分大小写？

我想在这种情况下，最好始终使用 PascalCasing，因为它有助于提高可读性。

Answer 3

我个人使用连字符样式（即 some-class），但您应该简单地选择您认为最好的样式并保持一致。这纯粹是一个审美问题。

Answer 4

我经常看到以下外壳样式：

characterSkills，
角色技能

但是，归根结底，您选择哪种风格并不重要。只需在您自己的应用程序中保持一致即可。

Answer 5

我见过这个问题的几个不同的答案，这取决于你问的是谁。涵盖您提到的所有可能性以及可能更多。然而，我看到最常引用的一个是使用下划线（character_skills）并且全部小写。

不过，总是提到的一个答案可能比您选择哪种方法更重要，那就是选择一种方法并始终坚持下去。始终保持统一可以避免以后出现混乱和其他问题。

Answer 6

我使用 lowerCamelCase 表示类，使用 UpperCamel 表示 ID，如下所示：

#HeaderLogo { ... }
.pullQuote { ... }

但只要保持一致，它就完全没有区别:) 哦，并尽可能坚持使用单字类名称 - 您始终可以组合类，像这样：

.boxout { border: 1px solid; padding: 10px; }
.emphasised { font-weight: bold; }
.subtle { font-size: small; }

.boxout.emphasised { background: yellow; }
.boxout.subtle { color: gray; }

...我更喜欢，因为您可以让“基”类保存核心定义，使 CSS 更小，并减少设计页面时必须记住的类总数。

Answer 7

在阅读示例并犯下自己的错误后，我为自己找到了这个解决方案：

1. 使用连字符显示层次结构，例如 #products-MainContent {} 或 #maincontent-Summary {} 。对我来说，这意味着 MainContent 是 products div 的子级。
2. 将 ID 的层次结构中第一个元素后面的每个单词大写。对类使用全部小写，例如 #summary-Statistics (ID) 或 .summary-statistics (class)

这目前对我有用。我不想使用连字符来分隔单词，因为我认为连字符应该显示依赖性/关系。另外，我不想混淆 ID 和类，因为它们看起来很相似，所以我更改了编写它们的大小写。

Answer 8

我建议使用BEM（块元素修改器）。

从其网站检索：

BEM — 块元素修改器是一种帮助您创建
前端开发中的可重用组件和代码共享。

有关更多详细信息，请访问其网站文档：

http://getbem.com/naming/