命名和包装多字CSS类和ID的最佳实践是什么?

我也喜欢用连字符的方式。我主要使用这种样式,因为CSS属性遵循相同的大小写。同样,JavaScript函数和变量也倾向于使用小写。例如,要在javascript中更改CSS属性,您可以键入 object.style.textDecoration ,但在CSS中,该属性将被更改为 text-decoration .

我使用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可能不是编程语言,哦,好吧…)都很突出,而且确实如此。 技术上的错误 .

正确的(嗯?)表示空格的方法是下划线。考虑一下这个短语“一封自写的信”,我如何转换空格?

• 一封自述地址的信(正确,保留原意)
• 一封自述地址的信(哎呀!如果我们把它转换回去,我们会得到“一封自己写的信”!)

另外,对于CSS名称始终使用小写字母是一种最佳实践吗,因为它们不区分大小写?

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

我个人使用连字符样式(即 some-class )但是你应该简单地选择你觉得最好的,并且保持一致。这纯粹是一个美学问题。

我经常看到以下套管样式:

特征技能, 人物技巧

但是,归根结底,选择哪种风格并不重要。在你自己的应用程序中保持一致。

我看过这个问题的几个不同答案,这取决于你问的是谁。涵盖你提到的所有可能性,可能更多。不过,我看到的最常引用的是下划线(character_skills)和全小写。

但总有一个答案被提到,而且可以说比你选择哪种方法更重要,那就是选择一种方法并坚持到底。在整个过程中保持一致可以避免以后的混乱和其他问题。

我使用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更小,并减少在设计页面时必须记住的类的总数。

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

1. 使用连字符显示层次结构,例如 #products-MainContent {} 或 #maincontent-Summary {} . 对我来说,这意味着MainContent是Products Div的子级。
2. 将ID继承关系中第一个元素后的每个单词大写。对类使用所有小写字母,例如 #summary-Statistics (ID)或 .summary-statistics (班)

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

我建议使用 边界元法 (块元素修饰符)。

从其网站检索:

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

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

http://getbem.com/naming/