タイトルCSS：CSSクラスの命名に対する簡単なアプローチ-CSSチュートリアル-php.cn

Title CSS: A Simple Approach to CSS Class Naming

タイトルCSS：CSSクラスの命名に対する簡単なアプローチ

キーテイクアウト

タイトルCSSは、グローバルクラスの大文字の名前を使用して、修飾子または子孫クラスに小文字名を使用してCSSクラスの命名を簡素化する方法論です。このアプローチは、クラス名にプレフィックスや特殊文字を追加せずにBEMの利点を提供します。
タイトルCSSの潜在的な問題は、タイトルブロックに同じ子孫セレクタークラスを持つ他のブロックが含まれている場合に発生します。スタイルの競合を避けるために、子供のコンビネーター（>）をコンテナとして機能するタイトルブロックで使用できます。スタイルは、同じクラス名を持つネストされた要素をさらに監督することでのみ適用されるようにします。
あなたが私のようであるなら、あなたは要素の完璧なクラス名を思いつく時間を過ごしすぎます。同義語のためにGoogleをGoogleであるか、この要素が実際のオブジェクトである場合はどうなるか想像するかもしれません。あなたはセマンティック名が機能することを知っていますが、どういうわけか完璧な名前を考えようとすることはそれだけの価値があるようです。

CSS方法論の例

OOCSSは、リサイクルスタイルを通じて持続可能なクラスを書くのに役立つ環境にやさしいアドバイスです。

SMACSSは、すべての適切なテクニックを通してあなたを指導するすべての包括的なCSSゲームプランです。

Idiomatic CSSは分析的なハウスクリーナーであり、認識と安心のためにすべてをユニフォームで整理しています。

とベム？まあ、BEMはCSSクラスの命名のゴールドスタンダードであり、そのうちすべてのCSSクラスの命名スキームが測定されます。

では、なぜクラスの命名についてこれ以上話すのですか？

BEMアプローチは、読みやすさと衝突の回避に重点を置いたスケーラブルなCSSを作成することです。要するに、BEMはBlock__Element – Modifierの略です。ブロックは、関連する要素の小さな塊を含む要素です（SMACSSでは、モジュールと呼ばれます）。要素はブロックの子孫であり、通常はブロックの存在なしには存在しません。修飾子はブロックの状態を制御します

BEMでは、ブロックの通常のクラス名を書き、任意の要素については、ブロック名をコピーして要素名を追加します。

従来のBemは次のようになります：

これは良いことです。なぜなら、誰もが「ブロック__ELEMENT」が「ブロック」に関連していることを理解するからです。クラス「Block__Element」がプロジェクトのどこでも使用されている可能性はほとんどありません。

しかし、このアプローチには問題があります。あなたは一日中CSSを書き、あなたのきれいなマークアップを泥だらけにする長いクラスの名前を書きたくありません。

タイトルCSSとは、クラス名にプレフィックスや特殊文字を追加することなく、BEMの利点を提供することです。

CSSのタイトルのトリックは単純です

タイトルCSSを使用すると、次のことを行います。グローバルCSSクラスでは、大文字（タイトルケース）を使用します。修飾子または子孫のクラスには、名前の先頭に小文字を使用してください。

これは、タイトルCSSで、親クラスなしでスタイルシートで参照されるクラス名を大文字にすることを意味します。これは、OOCSSのオブジェクトでさえ大文字になることを意味します。区別は簡単です。 StyleSheetで大文字になっているものはすべて、再度使用してはなりません。

タイトルCSSを使用するときにマークアップがどのように見えるかの例です。

そして、対応するCSSがどのように見えるかを次に示します

タイトルCSSが機能する理由

<span><span><span><div</span> class<span>="block block--modifier"</span>></span>
</span>    <span><span><span><p</span> class<span>="block__element"</span>></span>
</span><span><span><span></div</span>></span></span>

ログイン後にコピー

ブロック識別子または「タイトル」クラスは、ブロック内のすべての子孫クラスのスコープを作成します。子孫のクラスは、スタイルの衝突なしに他のタイトルブロックで繰り返すことができます。

これは方法論が機能するためには不可欠ではありませんが、HTMLクラス名はケースに敏感であるため、「タイトル」クラスも子孫クラスとして自由に繰り返されます。

タイトルCSSはどのように役立ちますか？

<span><span><span><div</span> class<span>="Title isModified"</span>></span>
</span>    <span><span><span><p</span> class<span>="descendant"</span>></span>
</span><span><span><span></div</span>></span></span>

ログイン後にコピー

タイトルCSSメソッドを使用すると、次の利点が表示されます。

CSSクラスをより自然な方法で書き込みます。

CSSセレクターは、大文字で始まる英語の文のように、書かれた言語に似ています。

クラス名の短いものは入力が速く、スキャンが簡単です。

タイトルケースクラスは、マークアップで簡単に見つけることができます。小文字の子孫クラスがどのようなものに属しているかを確認するには、タイトルクラスのノードを横断するだけです。

落とし穴と回避策

タイトルCSSには問題がある場合があります。含まれるタイトルブロックには、競合するよりも封筒と同じ子孫セレクタークラスが同じ場合、その場合、コンテナとして機能するタイトルブロックで子の組み合わせを使用する必要があります。
.headerおよび.body Elements内の.body要素に適用されるスタイルは、他の.headerおよび.body要素にさらにネストされていることに注意してください。これを回避するために、解決策は次のとおりです

sass

についての言葉

前処理者は、タイトルCSSを書くための優れた方法を提供します。ネスティング能力により、スタイルシートでタイトルブロックを簡単に識別できます。

ここにSCSSのタイトルCSSの例があります：

<span><span><span><div</span> class<span>="block block--modifier"</span>></span>
</span>    <span><span><span><p</span> class<span>="block__element"</span>></span>
</span><span><span><span></div</span>></span></span>

ログイン後にコピー

フィードバック？

BEM、SMACSS、およびOOCSSが示唆するように、ブロックまたはモジュールを小さく保つことが重要です。タイトルクラスに密接に関連する要素のみを含むパフォーマンスと保守性の利点があります。

タイトルCSSに関する観察やフィードバックがある場合、コメントでそれらを聞いてうれしいです。さらに情報を入手したい場合、またはコラボレーションしたい場合は、タイトルCSSのGitHubリポジトリをチェックしてください。

CSSタイトルとクラスの命名に関するよくある質問（FAQ） CSSタイトルとクラスの命名の重要性は何ですか？

CSSタイトルとクラスの命名は、Web開発の重要な側面です。 CSSコードの整理に役立ち、読み取り、理解、保守が容易になります。適切な命名規則は、CSSセレクターの効率を改善し、Webページの読み込みをより速くすることもできます。さらに、他の開発者にコードを明確に理解するため、コラボレーションを支援します。ただし、JavaScriptまたはjQueryを使用して、タイトル属性を要素に動的に追加できます。または、attr（）関数を使用してCSSコンテンツプロパティを使用してタイトル属性値を表示することもできますが、実際にはタイトル属性を要素に追加するわけではありません。

CSS属性セレクターと使用する方法は何ですか？これらを使用して、特定の属性または属性値を持つ要素をスタイリングできます。たとえば、入力[type =” text”]はすべてのテキスト入力フィールドを選択してスタイリングします。多くの場合、ユーザーが要素の上に浮かぶときにツールチップとして表示されます。ほぼすべてのHTML要素に追加できます。たとえば、私の上にCSSクラスの名前を付けるためのベストプラクティスは何ですか？