Question

我正在尝试找出命名和包装css类和id的最佳实践，尤其是多个单词名称。

例如，假设我有<div>我想要命名为“角色技能”。似乎有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。这是非常重要的，我打败了这个旧的答案，因为IMO应该劝阻连字符，即使是下划线也比连字符更好。

为什么呢？因为每个其他语言都不能有带连字符的变量名。例如，您的IDE可能会也可能不会正确地进行自动完成。（我的IDE不能，它是VI：P）

CSS与JavaScript密切相关，带连字符的classname也使得难以与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-addressing_letter（正确，保留原意）
a-self-addressing-letter（哎哟！如果我们将它转换回来，我们会得到“一封自我写信”！）

最好始终使用全部小写的css名称，因为它们不区分大小写？

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

Answer 3

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

Answer 4

我看到了以下套管样式：

characterSkills， CharacterSkills

但是，在一天结束时，选择哪种风格无关紧要。只需在您自己的应用程序中保持一致。

Answer 5

我已经看到了这个问题的几个不同答案，取决于你问的是谁。涵盖您提到的所有可能性，甚至可能更多。然而，我最常参考的那个是使用下划线（character_skills）和全部小写。

总是提到的一个答案，可以说比你选择哪种方法更重要，就是选择一个并坚持下去。在整个过程中保持一致，可以避免以后出现混淆和其他问题。

Answer 6

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

#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

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

使用连字符显示层次结构，例如#products-MainContent {}或#maincontent-Summary {}。对我来说，这意味着MainContent是产品div的孩子。
将heirarchy中的第一个元素后的每个单词大写为ID。对于类使用全部小写，例如#summary-Statistics（ID）或.summary-statistics（类）

这对我现在有用。我不想使用连字符来分隔单词，因为我认为连字符应该显示依赖关系/关系。此外，我不想混淆ID和类，因为它们看起来很相似所以我改变了它们的编写案例。

Answer 8

我建议使用 BEM （块元素修饰符）。

取自其网站：

BEM - 块元素修饰符是一种可以帮助您创建的方法前端开发中可重用的组件和代码共享。

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

http://getbem.com/naming/

命名和封装多字CSS类和id的最佳实践是什么？

8 个答案: