方法論

12291 ワード
CSS TIL テキストリンク

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>
    ランダ式
    オブジェクトの作成と破壊[Java]9