CSSセレクタ名のマングリング？

Question

私は、SMACSSやOOCSSのようなCSSコーディング手法を検討してきました。いくつかの宿題を行い、大規模なサイト（Google、Facebookなど）のスタイルを調べた後、私は、文章やコンテンツのセマンティクスを持たない._50x4など、非常に難解なセレクタ名に気付きました。

これらの大きなサイトでは、CSSセレクタの名前付けに何らかの名前のマングリングが使用されているのでしょうか？

Answer 1

あなたが指定した特定のセレクター：._50x4質問に戻る

このセレクタは奇妙に見えますが、実際には無効または乱雑ではありません。

クラス（またはID）セレクタが数字で始まるのは無効です。.55x4は無効です。しかし、アンダースコアはクラスにとって有効な最初の文字です。

したがって、セレクタ._55x4は実際には55x4という名前のクラスを持つ方法ですが、有効にするには先頭にアンダースコアを付けます。

なぜ55x4という名前のクラスが必要ですか？実際の答えが必要な場合はサイトの開発者に尋ねる必要がありますが、FacebookとGoogleについて言及しているので少し推測することができます。

FacebookとGoogleはともにです。トラフィックが多いサイトはです。したがって、彼らが関心している限り、HTML/CSS/JSコードのサイズを1文字でも減らすと、帯域幅コストに大きな違いが生じます。

クラスの名前を読みやすい名前にしている可能性がありますが、帯域幅の可能なすべてのバイトを保存しようとすると、わかりやすい名前がウィンドウから消えます。 Javascriptコードを解読できないほどに縮小したのと同じくらい、HTMLとCSSコードを最適化してできるだけ小さくするようにしています。このようなクレイジーなクラス名が結果です。

このクラス名は完全に狂っているとは言えません。完全に文脈から引用しているので、数字55と4がページの何かに当てはまる可能性があります。私は知らないし、何の文脈もなく、他の誰もしない。

私はこれを多く言うことができます。これはFacebookとGoogleのコピーが必ずしも最良のアイディアではない場合の1つです。あなたはトラフィックのレベルと同じレベルを持っていませんし、コードから最後の1バイトを削っても、あなたのために同じ優先度を持つべきではありません。確かにあなたはものを最適化することができますが、そのように見えるクラス名を書く必要はありません。

SEOの目的のために、分かりやすいクラス名が非常に役立つと言います。 Facebookと（特に）GoogleはSEOのランキングを無視して逃げることができますが、私たちの残りはできません。

あなたの方法論にかかわらず、クラス名は意味論的でなければなりません。すなわち、意味があり、要素が何であるかを読者が理解できるようにする必要があります。

あなたはよく知っているサイトを見て、自分が何をしているのかを見て正しいことをしていますが、私のアドバイスはあなたの近くにある他のサイトを見てみることです。 FacebookとGoogleは、彼らが自分のやり方を考えるとき、いつも少し違うだろう。彼らは常に最高の例ではありません。