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

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是最好的做法,因为它有助于提高可读性.