0

While this popular question, and it's answers cover a fair bit of ground on the subject, I'm curious about what constitutes a valid class name in the wild (at the time of this writing).

<edit> To expand on this, as it is the core of my concern, are we not at a point in the evolution of user-agent technology and standard support, that certain naming hacks can be abandoned, instead re-purposing them for robustness in common use? Understandably, there will always be edge-cases (someone is probably using NN6, with no intention to stop) but I'm an advocate of making things work as expected (read: as pixel-perfect as possible) in 90% of browsers, expecting that the remainder will have an "acceptable" experience. </edit>

Namely, prefixing (or general use of) underscores (_) and hyphens (-). While the CSS spec goes on to say that with escaping, essentially any character (save for NUL) is valid, validity is only as good as it's corresponding support.

So, in the current browser landscape, what are the "do's" and "do not do's" of CSS class naming? Would it be unwise to use any of the following:

.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 */

While escaping is of course an option, I don't think it's feasible for anything more than a trivial implementation. My concern with underscores and hyphens comes from their prevalence of use, but (seemingly) inconsistent support across browsers; at least historically.

4

1 に答える 1

1

一般に、アンダースコアを完全に避け、ハイフンを使用する必要があります-。ハイフンは、新しい「単語」を表すために使用する必要があります。またはと.left-columnは対照的に。ただし、クラス名をハイフンで始めないでください。そうする理由はありません。.leftColumn.left_column

選択肢のうち、理想的なものは次のとおりです。

.foo { }        
.foo-bar { }

以下は許容されますが、クラスを説明するために 3 つの「単語」が必要な場合は、説明的すぎます。

.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 に答える