CSS_OOCSS, BEM

コード量を減らすclassの2つのネーミング方法OOCSとBEMについて説明します.
CSSファイルを読み取り可能に書き込むメリットは2つあります.

は審美的な可読性が強い.

は容量が小さく、Webサイトの高速ロードを保証します.

▶️ OOCSS(Object-Oriented CSS)
赤いボタンと青いボタンを作るとします.

  .main-btn-red {
    font-size : 20px;
    padding : 15px;
    border : none;
    cursor : pointer;
    background : red;
  }

  .main-btn-blue {
    font-size : 20px;
    padding : 15px;
    border : none;
    cursor : pointer;
    background : blue;
  }

そうすると、重複するコードが多すぎます.したがって、以下のように記入してください.

  .main-btn {
    font-size : 20px;
    padding : 15px;
    border : none;
    cursor : pointer;
  }

  .bg-red {
    background : red;
  }
  .bg-blue {
    background : blue;
  }

骨組みと肉を分けて記入する.デフォルトスタイルを定義するスケルトンmain-btnと、色を指定するクラスにのみ複数の個別のクラスが作成されます.
このように骨と肉を一つに分けると1繰り返しスタイルを使用できます.メンテナンスが便利です.コードの作成速度が速くなります.

の例のように、色や大きさなどのスケルトンに作用するクラスを実用クラスと呼ぶ.

  .font-small {
    font-size : 12px;
  }
  .font-medium {
    font-size : 16px;
  }
  .font-lg {
    font-size : 20px;
  }

フォントのフォントサイズを頻繁に変更すると、このように多くのユーティリティクラスが作成され、文字のモデリング時に使用されるため、コードの作成が非常に速くなります.(暗記する場合)特にwidth、margin、padding、text-alignなどの要素を調整するユーティリティクラスを多く作成すると便利です.
▶️ BEM
名前付けが難しい場合は、次のBEMとBEMを使用します.
Profileプロファイルセクションを再作成するとします.

  <div>
    <img>
    <h4>이름</h4>
    <p>소개글</p>
    <button>빨간버튼</button>
    <button>파란버튼</button>
  </div>

BEMルールに従ってクラスの名前を付けましょう.
1.ブロック名で始まる(Block)

  <div class="profile">
    <img class="profile">
    <h4 class="profile">이름</h4>
    <p class="profile">소개글</p>
    <button class="profile">빨간버튼</button>
    <button class="profile">파란버튼</button>
  </div>

2.各ラベルに異なるclass名を付けるには、ラベルを追加します.(Element)

  <div class="profile">
    <img class="profile__img">
    <h4 class="profile__h4">이름</h4>
    <p class="profile__content">소개글</p>
    <button class="profile__button">빨간버튼</button>
    <button class="profile__button">파란버튼</button>
  </div>

3.同じラベルのデザインを区別するには--(Modifier)

  <div class="profile">
    <img class="profile__img">
    <h4 class="profile__h4">이름</h4>
    <p class="profile__content">소개글</p>
    <button class="profile__button">빨간버튼</button>
    <button class="profile__button">파란버튼</button>
  </div>

BEMルールを簡単に覚えるには、
Block Element--Modifferはこのように覚えています
HTML要素は英語でElementと呼ばれ、Modifierは修飾語の意味です.
ここで紹介するOOCSSクラスの書き方、BEMの書き方はhtml、cssファイルが大きくて膨大な場合に利点があるので、最近react、Vueを使用してWebアプリケーションを作成する場合にはあまり役に立ちません.
Reactライブラリでは、htmlページ単位ではなく小さなコンポーネントでコードを開発し、クラスが重複していても、スタイルの干渉を避けるためにコンポーネント間でコードを記述できます.代表的に、reactでstyled-conntsライブラリを使用すると、そうなる可能性があります.