Question

虽然this popular question及其答案涵盖了相关主题的一些基础，但我很好奇在野外构成一个有效的类名称（当时写作）。

<edit>为了扩展这一点，因为它是我关注的核心，我们不是在用户代理技术和标准支持的演变中，某些命名黑客可以被放弃，而是 - 将它们用于常用的稳健性？可以理解的是，总会有边缘情况（有人可能正在使用NN6，无意停止）但我是倡导让事情按预期工作的主张（ >在90％的浏览器中读取：尽可能像素完美），期望剩下的将有一个＆＃34;可接受的＆＃34;经验。 </edit>

即，前缀（或的一般用法）下划线（_）和连字符（-）。虽然CSS规范继续说，通过转义，基本上任何字符（保存为NUL ）是有效的，有效性只有它和它一样好。相应的支持。

所以，在current browser landscape中，＆＃34; 做什么＆＃34;和＆＃34; 做不做＆＃39> ＆＃34; CSS类命名？使用以下任何一项是不明智的：

.foo { }         /* for completeness... */
.foo-bar { }     /* hyphenated */
.foo_bar { }     /* underscored */
.foo-bar-baz { } /* multi-hyphenated */
.foo-bar_baz { } /* hyphenated then underscored */
.foo_bar-baz { } /* underscored then hyphenated */
.-foo { }        /* leading hyphen */
.-foo-bar { }    /* leading hyphen and hyphenated */
.-foo_bar { }    /* leading hyphen and underscored */
._foo { }        /* leading underscore */
._foo_bar { }    /* leading underscore and underscored */
._foo-bar { }    /* leading underscore and hyphenated */

虽然逃避当然是一种选择，但我认为除了微不足道的实施之外，我认为它是可行的。我对下划线和连字符的关注源于它们的普遍使用，但是（看似）跨浏览器的不一致支持;至少在历史上。

Answer 1

通常，您应该完全避免使用下划线，并使用连字符-。连字符应该用来表示一个新的“单词”。例如.left-column而不是.leftColumn或.left_column。不要用连字符开始一个类名，但没有理由。

在选择中，理想的选择是：

.foo { }        
.foo-bar { }

以下是可以接受的，但是如果您需要三个“单词”来描述一个类，那么您的描述性太强了

.foo-bar-baz { }

此Google style guide to HTML and CSS可能会对您有所帮助

重点：

/* Not recommended: meaningless */
#yee-1901 {}

/* Not recommended: presentational */
.button-green {}
.clear {}

/* Recommended: specific */
#gallery {}
#login {}
.video {}

/* Recommended: generic */
.aux {}
.alt {}

/* Not recommended */
#navigation {}
.atr {}

/* Recommended */
#nav {}
.author {}

野外的有效CSS类名

1 个答案: