CSS設計ネーミング仕様BEM

1.グローバルネーミングスペース
設計システムに関連するすべてのclassesは、一般的に会社名(company name)であるグローバルネーミングスペースを追加します.

.cn-

2.class接頭辞
グローバルネーミングスペースを追加する以外に、クラスに接頭辞を追加して、このクラスの主な職責が何であるかを示すために使用します.次の一般的な接頭辞があります.

c:UI components、例えば.cn-c-cardまたは.cn-c-header

を表す.

l:layout関連の様式、例えばcn-l-grid__item or cn-l--two-column

を表す.

u:utilities、ツール、例えば.cn-u-margin-bottom-double or .cn-u-padding-right

を表す.

is- , has-:特定の状態を表す、例えば.cn-is-active or .cn-is-disabled

.

js-:js固有の機能、例えば.js-modal-triggerを表す.このクラスはスタイルをバインドすることができず、動作面

のみを担当する.
3.BEM構文
BEMはBlock-Emement-MOdifierを表します.

Block:.cn-c-card or .cn-c-btn

のような基本的なコンポーネントブロックである.

Element:.cn-c-card__title

のような基本ブロックの下のサブエレメントである.

Modifier:コンポーネントスタイルの変種、例えば.cn-c-alert--error

である.
この比喩方式は流行しており、ネーミング空間、クラス接頭辞を組み合わせて、より表示され、パッケージ性の良いclass namesを作成することができる.
4.すべてを結合する:classの解剖
グローバルネーミングスペース、クラス接頭辞、BEM構文を組み合わせると、明示的な(間違いなく、冗長な)クラス文字列が生成され、UIの役割が何であるかを推定できます.
次の例1を参照してください.

.cn-c-btn--secondary
//   
cn-:                 
c-: class   ， 'c-'      
btn: block name(Block)
--secondary:    ，       (Modifier)

例2:

.cn-l-grid__item
//   
cn-:     
l-: class   ， 'l-'       
grid: block name(Block)
__item:   （Element）

例3:

.cn-c-primary-nav__submenu
//   
cn-:     
c-: class   ，     
primary-nav: block name
__submenu:   

5.その他のテクニック
1.SASS親セレクタ
指定したCSSルールをどこに配置するかが問題です.primary navigationコンポーネントに位置合わせを調整したい場合は、sass親セレクタを使用します.

.cn-c-primary-nav {
    /*
     * Nav   Header,   
     */
    
    .cn-c-header & {
        margin-left: auto
    }
}

これは、primary navigationのスタイルがprimary navigation Sass partialに配置されることを意味し、各ファイルに分割するのではなく、primary navigation Sass partialに配置されることを意味します.
2.SASSネスト明示規則
SASSのネストは非常に便利ですが、特に長いセレクタを招く可能性があります.ネストは3層を超えないで、CSSの設計を平らに保つという原則があります.私たちは次の4つの方法でネストを減らすことができます.

blockにModifiers(Modifiers of a style block)

を追加

メディアクエリ

親セレクタ

状態(states)

コンポーネントブロック修飾子
修飾子の場合、ルールが数行しかない場合、修飾子は子要素にネストできます.

.cn-c-alert {
  border: 1px solid #ccc;
  color: gray;

  //     
  &--error {
    border-color: red;
    color: red
  } 
}

メディアクエリ
コンポーネント固有のメディアクエリは、コンポーネントブロックにネストできます.

.cn-c-primary-nav {
  //     

  @meida all and (min-width: 40em) {
    display: flex;
  }
}

≪ステータス｜Status｜emdw≫
ステータスにはhover,focus,active,ツールクラスis-,has-が含まれます.

.cn-c-accordion__panel {
  overflow: hidden;
  max-height: 0;

  &.cn-is-active {
    max-height: 40em;
  }
}

まとめ

原文リンクCSS設計アーキテクチャ

SASSネスト選択のルール

詳しい指導:CSSガイドBEM

CSSアーキテクチャ検討及びBEM

CSS軽設計指導(書)

BEM命名規範検討

メンテナンス設計システム