0

虽然这个流行的问题及其答案涵盖了该主题的相当多的基础，但我很好奇什么是有效的类名（在撰写本文时）。

<edit>为了扩展这一点，因为它是我关注的核心，我们是否不是在用户代理技术和标准支持的发展中，可以放弃某些命名黑客，而是重新利用它们以提高常用的鲁棒性? 可以理解的是，总会有边缘情况（有人可能正在使用NN6，无意停止），但我主张在 90% 的浏览器中让事情按预期工作（阅读：尽可能完美像素），期望其余的人会有“可接受的”体验。</edit>

即，前缀（或一般使用）下划线（_）和连字符（-）。虽然 CSS 规范继续说，通过转义，基本上任何字符（save forNUL）都是有效的，但有效性仅与其相应的支持一样好。

那么，在当前的浏览器环境中，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 */

虽然转义当然是一种选择，但我认为这对于简单的实现来说是不可行的。我对下划线和连字符的担忧来自于它们的普遍使用，但（似乎）跨浏览器的支持不一致；至少在历史上。

4

1 回答 1

1

一般来说，您应该完全避免使用下划线，并使用连字符-。连字符应该用来表示一个新的“词”。比如.left-column反对.leftColumn或.left_column。永远不要以连字符开头的类名，没有理由这样做。

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

.foo { }        
.foo-bar { }

以下是可以接受的，但如果你需要三个“词”来描述一个类，你就太具描述性了

.foo-bar-baz { }

这份关于 HTML 和 CSS 的 Google 样式指南可能对您有所帮助

重要位：

/* 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 {}
于 2013-01-24T14:54:24.517 回答