SMACSS や OOCSS などの CSS コーディング方法論を調べています。下調べをして、大規模なサイト (Google、Facebook など) のスタイルを調べた後、._50x4 のように、スタイルやコンテンツ セマンティクスのない非常に複雑なセレクター名に気付きました。
これらの大規模なサイトが css セレクターの命名にある種の名前マングリングを使用しているのだろうか?
質問する
1025 次
1 に答える
4
._50x4質問で指定した特定のセレクターを再確認してください。
このセレクターは奇妙に見えますが、実際には無効でも破損でもありません。
クラス (または ID) セレクターが数字で始まることは無効であるため、.55x4無効になります。ただし、アンダースコアはクラスの有効な最初の文字です。
したがって、セレクター._55x4は実際には という名前のクラスを持つ方法にすぎませんが、55x4それを有効にするために先頭にアンダースコアを付けます。
という名前のクラスが必要なのはなぜ55x4ですか? 本当の答えを知りたい場合は、サイトの開発者にそのサイトを見つけたのか尋ねる必要がありますが、あなたは Facebook と Google について言及していたので、少し推測することができます.
Facebook と Google はどちらも非常にトラフィックの多いサイトです。したがって、彼らに関する限り、HTML/CSS/JS コードのサイズを 1 文字でも減らすだけで、帯域幅コストに大きな違いが生じます。
あなたまたは私はより読みやすい名前でクラスに名前を付けたかもしれませんが、帯域幅の可能なすべてのバイトを節約しようとすると、賢明な名前は窓の外に出ます。Javascript コードを判読不能にまで縮小したのと同じように、HTML および CSS コードも最適化して、可能な限り小さくします。このようなクレイジーなクラス名はその結果です。
このクラス名が完全にクレイジーだと言っているわけではありません。完全に文脈から外れて引用したため、55 と 4 という数字がページ上の何かに適用される可能性は十分にあります。私にはわかりませんし、文脈がなければ、他の誰にもわかりません。
しかし、これだけは言えます。これは、Facebook と Google をコピーすることが必ずしも最善のアイデアではないという 1 つのケースです。彼らと同じトラフィック レベルはありません。コードから最後の 1 バイトを削ることは、彼らと同じ種類の優先順位を持つべきではありません。確かに最適化はできますが、そのようなクラス名を書く必要はありません。
もう 1 つ言えることは、SEO の目的では、適切なクラス名が非常に役立つということです。Facebook と (特に) Google は、SEO ランキングを無視しても問題ありませんが、それ以外の企業はできません。
したがって、方法論に関係なく、クラス名はセマンティックである必要があります。つまり、意味があり、要素の目的を読者が理解できるようにする必要があります。
よく知られているサイトを調べて、そのサイトが何をしているのかを確認するのは正しいことですが、自分のサイトに近い他のサイトを調べてみることをお勧めします。Facebook と Google は、物事を行う方法に関しては常に少し「異なる」でしょう。それらは必ずしも最良の例ではありません。
于 2013-04-26T14:53:32.380 に答える