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

キーテイクアウト

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

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には問題がある場合があります。含まれるタイトルブロックには、競合するよりも封筒と同じ子孫セレクタークラスが同じ場合、その場合、コンテナとして機能するタイトルブロックで子の組み合わせを使用する必要があります。
問題を示すために、以下は問題を伴ういくつかのサンプルマークアップです。
および付随する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クラスの名前を付けるためのベストプラクティスは何ですか？

CSSクラスを命名するためのベストプラクティスは、意味のある説明的な名前を使用することです。プレゼンテーションや場所固有の単語の使用は避けてください。代わりに、要素の目的または内容を反映した名前を使用します。また、ハイフンを使用してクラス名の単語を分離し、名前をできるだけ短く保ちます。ただし、一般的に、特殊文字の使用を避けることをお勧めします。

CSSの特定のタイトル属性を持つ要素を選択するにはどうすればよいですか？

​​

CSSの属性セレクターを使用して、特定のタイトル属性を持つ要素を選択できます。たとえば、div [title =” example”]は、「例」のタイトル属性値を持つすべてのdiv要素を選択します。最初のキャラクターは、文字、ハイフン、またはアンダースコアでなければなりません。

HTML要素に複数のクラスを追加するにはどうすればよいですか？

クラス属性内のスペースを分離して、HTML要素に複数のクラスを追加できます。たとえば、

。

CSSを使用してHTML要素のタイトル属性を変更できますか？ JavaScriptまたはjQueryを使用して、HTML要素のタイトル属性を変更する必要があります。

以上がタイトルCSS：CSSクラスの命名に対する簡単なアプローチの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。