CSSクラスを呼び出す方法

このトピックと個人的な経験に関する私のお気に入りの記事に基づいて、CSSクラスの命名方法に関する私の5セントを紹介します。

0.クラス名について考える前に、HTML要素の適切な名前を選択します

このフィールドの場合、 input要素を使用しinput

HTMLドキュメントの読み取りがはるかに簡単になります。

例：

 <div class='submit'/> <!-- ? --> <input class='submit'/> <!-- ,  --> 

出典： Raphael Goiter（フランス語の記事）

1. DOMツリーで可能な限り低いクラスを割り当てます

これは、クラスの名前に影響します。 余分な労力が必要な場合でも、装飾が必要なHTML要素に常にクラスの名前を直接記述します。 理由が明確でない場合は、以下のクリスコイヤーの記事をご覧ください。

例：

 <main class='mainly'> <p>Lorem ipsum</p> <!--       --> </main> 

 main.mainly p { /*    */ } /*      p : <p class='paragraphly' /> */ .paragraphly { } 

ソース： クリスコイヤー

2.コンテンツごとにクラスに名前を付けます。

例：

 .c-header-logo { /*    ,  ,        . */ } 

ソース： phpied.com

3.絵がはっきりしている場合は、内容でクラスに名前を付けないでください

ヘッダーのロゴが実際に次のように見えるとしましょう：


次に、header-logoと呼ばないでください。

 .guillotine { /* ,  ,     */ } 

4.コードの移植性を高めるには、 -likeサフィックスを試してください。

例：

 h3, .h3-like { /* -  */ } 

 <p class='h3-like'> <!--    h3,        ,         --> </p> 

出典： KNACSS v4

5.キャメルレジスターを使用しないでください

これにより、読みにくくなります。

例：

 .navToOneModuleICreated { font-size:2em; } /*  */ .nav-to-one-module-i-created { font-size:2em; } 

出典： ハリー・ロバーツ

6. BEMを試す

今日、これは最も人気のある契約の1つです。

• 最初は奇妙に思えますが、恐れることはありません。
• 入場閾値が非常に低い
• これで、プロジェクトの任意の部分で使用できます。
• 長期的な見通しは巨大です。

（二重ハイフン）は、要素のバリアントを意味します。

（二重下線）は子を意味します。

例：

 <button class='btn btn--warning'> <!-- o   .btn — .btn--warning --> <div class='btn__text'></div> <!--     .btn — .btn__text--> </button> 

 .btn--warning { /* !    ,       «warning»,     HTML-.  ! */ } .btn__text { /*      ,         */ } 

出典： Calig、50色のBEM

推奨： Smashing Magazine、ファイティングBEM

7.さらに悪くする

BEMは、最初は合意が下手に見えても、新しい可能性を開きます。

それにもかかわらず、この特異性は目が何が起こっているかの本質を即座につかむのを助けます、そして、BEMの場合には、それが働くと信じてください。

これで、プロジェクト全体を通して合意に固執しながら、より卑劣な合意を試みることができます。

例：

 .DIMENSIONS_OF_mycomponent { /*   .   ,   . */ /*     -  SASS. */ /*       . */ } 

8.説明的な言葉を短くしないでください

すでに確立されているnav 、 txt 、 url以外に、略語は避けてください。

ソース： phpied.com

9.意味のあるプレフィックスとして1文字のみを使用するようにします

ビジュアルコンポーネントの場合はc-で始まり、 o-オブジェクト（レイアウトなど）の場合は、このハリーロバーツのトリックが好きです。

例：

 <button class='o-layout'> <div class='o-layout-item o-grid c-button'></div> <!--     HTML ,    .-> </button> 

出典： ハリー・ロバーツ

10.同じタイプのクラスが多すぎる場合は[]試してください

この小さなトリックは、HTMLをより速く学習するのに役立ちます。 CSSファイルにはクラスがないことに注意してください.[そして.] 、ここで必要なのは、他の人がHTMLを読むのを助けるためだけです。

例：

 <button class='[ o-layout ]'> <div class='[ o-layout-item o-layout-item--first ] c-button'></div> <!--     HTML ,    .--> </button> 

ソース： イヌイットキッチンシンクのソースコード

11. JavaScriptにのみ使用される場合は、 js-プレフィックスを使用します

Javascriptが要素を選択する必要がある場合、CSSスタイルに依存しないでください。 js-ような特別なプレフィックスを設定します。

例：

 <button class='js-click-me'> <!--    HTML  ,      CSS-  .  JavaScript  , ,   - . --> </button> 

出典： Derik Bailey、marionnette.jsの本

12.親を子から分離しようとする

クラスの責任が多すぎる場合は、2つの個別のプロパティに分けます。

例：

（悪い）

 <button class='a'> <!--      ,       ab,   —   bc, CSS-   .--> <div class='child-of-a-and-parent-of-c'> <div class='c'> </div> </div> </button> 

（良い）

 <button class='a'> <!--   2 --> <div class='child-of-a parent-of-c'> <div class='c'> </div> </div> </button> 

13.非セマンティッククラスは、プロパティを明示的に記述する必要があります。

それらのほとんどにはプロパティが1つしか含まれていないため、非表示にする必要はありません。

 .horizontal-alignment { /*   .      ,       HTML-   ,    . */ text-align: center; } /*   .         */ .u-text-align--center { text-align: center; } 

14.明示的なハッキング（I）

CSSセレクターに満足できない場合は、みんなに言ってください。

とにかく、これは最高のCSSスーパーペロ（in）でも発生するので、恥ずかしがらないでください。

そのような場合に適切なチーム内の単語を選択し、プロジェクト全体でそれに従ってください。

個人的には、Atom IDEが自動的に強調表示するため、「HACK」という言葉を使用します。

例：

 .my-component { margin-left: -7px; /*  :  , ,    */ } 

15.明示的なハッキング（II）

別の賢明なオプションは、「 oddities 」を持つすべてのコードを別のファイルshame.cssに収集することです

再び、ハリー・ロバーツは促した

出典： ハリー・ロバーツ

16. 1つの名前に3つ以上の単語を使用しないようにします

名前は、1語または2語でそれ自体で話す必要があります。

例：

 .button { /*  */ } .dropdown-button { /*    */ } .dropdown-button-part-one { /* , - ,       , : */ } .dropdown-button-part-one__button-admin { /* , !!! */ } 

17. data-state属性を使用して、コンポーネントの状態を示します

状態の操作は珍しくありません。 条件の特別な属性が、長期的には時間とエネルギーを節約することが頻繁に起こります。

例：

 <button class='c-button c-button--warning is-active'> <!--    --> </button> <button class='c-button c-button--warning' data-state='is-active'> <!-- - .    ,    ,   ,   Sass,    .--> </button> 

出典：残念ながら、誰がこのことについて書いたかは思い出せませんが、彼のアドバイスはとても役に立ちました。

18.状態にhas-またはis-を使用する

状態の操作は非常に頻繁に発生します（もう一度）。 したがって、州の厳密な命名規則に従うことは非常に有益です。

例：

 .activated { /*   .    ,    ? */ } .is-activated { /* ,   . */ } 

ソース： Mobifyでのコード生成

19.複数の状態を組み合わせるときは、接頭辞としてハイフンを使用します

条件の組み合わせは、すべてのコストで回避する必要があります。 これが不可能な場合、Ben Smifetの非常に有用なトリックが助けになります。

例：

 <button class="btn -color-red -size-large -shape-round"></button> 

出典： ベンスマイフェット

20. HTMLでセレクターを宣言するときは、二重引用符ではなく単一引用符を使用します

これにより、ドキュメントが読みやすくなります。

例：

 <button class="c-button"> <!--  :    "  '.         ,        HTML-,   —  . --> </button> <button class='c-button'> <!-- !--> </button> 

出典： Predicsisチームと一緒に仕事をしたときに見つけた

21.規則に従わない

私は、個人的な経験と記事に基づいて、私にとって最も有用であることが判明したいくつかの提案をしようとしました。

あなたの場合にもこれがすべて役に立つと言っているわけではないので、私の最善のアドバイスは：

1）クラスの命名方法を改善し、2）特定のプロジェクトで一貫性を保ち、3）複雑すぎないようにします。

ルールがあなたに合わない場合は、スキップしてください

お楽しみください！

@HugoGiraudel 、 @kaelig 、および@gaetanbtのフィードバックに感謝します。