方法論

BEM (Block Element Modifier)

ブロック(ブロック全体を囲む要素)element(内部要素)--modifier(機能/修正)

B (Block)

ブロック(block)は、段落全体に適用される要素または要素を含むコンテナです.

ヘッダー、フッター、およびメイン領域がある場合、これらの領域はブロック

とみなされます.

ブロック要素形成クラスの語根は、常に一番前の

に位置する.

ブロックが定義されると、ブロックが形成するクラスの語根が一番前に配置され、ブロックに含まれる要素のクラス名

が決定する.

E (Element)

要素(要素)は、ブロックに含むブロックであり、ブロックを構成する要素ユニット

である.

要素はブロック要素のサブ要素概念であるため、ブロック要素の形式

に依存する.

要素は2つの下線で接続され、ブロックの後の

に位置する.

M (Modifiers)

修飾子は、ブロックまたは要素の属性(属性/修正)

である.

この属性は、ブロックまたは要素の外観または状態

を変更することができる.

特定の要素のスタイルを変更する必要がある場合は、修飾子

のみを使用します.

修飾子を区別するために、要素またはブロックの後に2つのハイフン(-)を追加して修飾子

を表示する.
👍 長所

直感的なクラス名で、寸法構造を表示することなく、構造

を簡単に識別できます.
👎 短所

クラス名は比較的長い構造であり、コードが長くなり複雑になる

既存の寸法に新しい機能が追加すると、カテゴリ

の名前を変更することは難しい.
🤷‍♂️ 例

<header class="header">
  <p class="header__title">헤더 제목</p>
  <div class="header__logo">헤더 로고</div>
  <form>    
    <fieldset>
      <div class="header__search">
        <input type="text" class="header__search--insert">
        <button type="submit" class="header__search--btn">검색</button>
      </div>
      <div class="header__search--result">검색결과</div>
    </fieldset>
  <form>
</header>

OOCSS (Object Oriented CSS)

Nicole Sullivanが開発したフレームワークは、CSSをモジュール化して符号化することで、重複データを最小限に抑える
原則を書く.👉 構造と外形の分離+容器と内容の分離

構造と外形の分離

構造:幅、高さ、充填、エッジ、border

外形:色、枠線色、フォント色、背景色

コンテナとコンテンツの分離

位置に依存しないスタイル定義

任意のラベルは、同じ外形

を有する.

クラスベースのモジュールを導入し、

を任意の場所で繰り返し使用できます.
👍 長所

コードの再使用によりコード量が減少した.CSSファイルのサイズを減らすことで、

の高速化を実現

新しい要素を追加すると、既存のモジュールを再利用して簡単に拡張でき、

のメンテナンスが容易になります.
👎 短所

には多くの汎用クラスがあり、修正時に複数のクラス

を使用する必要がある.

の複数のレベルの増加に伴い、メンテナンスが困難になる

コード可読性差

🤷‍♂️ 例

<button type="button" class="btn-base cart">장바구니</button>
<button type="button" class="btn-base buy">바로구매</button> 

/* 버튼 구조 ; 공통적인 구조 지정 */
.btn-base { ... }

/* 버튼 외형 */
.cart { ... }
.buy { ... } 

SMACSS (Scalable and Modular Architecture for CSS)

CSSを拡張可能なモジュール構造の形で5つの独立したカテゴリに符号化する方法:

Base

デフォルトスタイル(Reset,Default...)

基本モデルは!重要な使用は必要ありません.

Layout

のレイアウトに関連するスタイル

を定義します.

クラス名に「l-」接尾辞(接尾辞)を付けます.

Module

モジュールに関するスタイル定義

スタイル再利用要素

Block, Element, Module

IDと要素の使用を禁止する(要素を使用する必要がある場合はサブセレクタを使用する)

.

State

の状態を表すスタイル定義

hidden、expand、active、hover等

クラス名に「s-」接尾辞を付けます.

Theme

サイトの全面的な外観制御

色または画像を不変のスタイルから分離→既存のスタイルを再宣言できます.

適用範囲が広い場合は、「theme-」接尾辞を付けます.

注意事項
派生セレクタの使用を禁止
使用禁止ID
!重要な使用を禁止
👍 長所

クラス名は、予測を支援します->jsイベント

を再利用することによりコード

を簡略化する.

拡張性

👎 短所

カテゴリを区分する基準は、著者によって異なる場合がある

コードを区切る必要があるため、CSS

を使用するのは難しい.
🤷‍♂️ 例

<!-- 레이아웃 요소, 접힌 상태 -->
<div id="header" class="is-collapsed">
  <form>
    <!-- 모듈, 오류 상태 -->
    <div class="msg is-error">
      There is an error!
    </div>
    <!-- 연관된 라벨이 숨겨진 상태 -->
    <label for="search" class="is-hidden">Search</label>
    <input type="text" id="search">
  </form>
</div>