BEM.md

BEM

• Block
  • nameは目的を説明する
  • 再利用可能な、機能的に独立したページ コンポーネント。
  • 見え方を表すものではない
  • ブロックは互いに入れ子にすることができる。ネストレベルに制限はない。
• Element
  • 単体では使えないブロックの複合パーツ。ブロックの中で使用される。
  • nameは目的を説明する。
• Modifier
  • 外観、動作を表す。

MindBEMding

クラスの命名規則 .Block__Element--Modifier

https://en.bem.info/

FLOCSS.md

FLOCSS

https://github.com/hiloki/flocss

• Foundation - reset, normalize, 基本的なスタイル定義
• Layout - .l-*, ID セレクタ, 属性セレクタ. pageで唯一の要素。 SMACSSのLayoutとほぼ同じ。ただしGRIDは含まない。
• Object
  • Component - .c-*
  • Project - .p-*
  • Utility - .u-*

OOCSS.md

Object-oriented CSS

• 基本的にIDやタグによる記述は使用しない。マルチクラスで装飾していく。
  • 悪い例

    #sample
      key: value
      
    h1
      key: value

構造とスキンを分離する

• 多くある説明では、構造はHTMLの構造、スキンは見た目の変更とある。
• しかしCSSは基本的にすべて見た目に影響するものであり、サイズであれば構造なのかというとあいまいである。
• 構造は共通のもの、スキンは変化するものと考えるのがよさそう。

.button
  display: inline-block
  border: solid black 1px

.background-pink
  background-color: pink
  
.background-yellow
  background-color: yellow

コンテンツとコンテナを分ける

クラスセレクタ間の依存関係がないほうが、汎用的に使える

悪い例

/* container */
.container
  sample1: value1

/* content */  
.container .header
  sample2: value2

.container .body
  sample3: value3

.container .footer
  sample4: value4

良い例

/* container */
.container
  sample1: value1

/* content */
.container-header
  sample2: value2
  
.container-body
  sample3: value3

.container-footer
  sample4: value4

関連 http://oocss.org/ manabuyasuda/styleguide#28 https://zenn.dev/arisa_dev/books/markup-lesson5/viewer/chapter7 https://webukatu.com/wordpress/blog/9398/#CSSOOCSS-2 https://www.mediaplex.co.jp/blogs/creative/oocss/

SMACSS.md

SMACSS (Scalable and Modular Architecture)

CSSのカテゴリを定義した。

• structure
  • Base
    • using an element selector, a descendent selector, or a child selector, along with any pseudo-classes.
    • A CSS Reset is a set of Base style
  • Layout
    • can be divided into major and minor styles based on reuse
    • naming
      • The declarations that use ID selectors are named accurately and with no particular namespacing.
      • The class-based selectors, however, do use an l- prefix.
    • pageの主要なコンポーネント
  • Module
    • ページ内の小さめのコンポーネント
    • レイアウトコンポーネントの中にはいる。
    • クラス名のみを使用する。要素セレクタは使わない。
  • State
    • 全てのスタイルを拡張・上書きするもの
    • 状態を表す。
    • is- から始まる。
  • Theme
    • スタイル、外観、雰囲気を変えるためのクラス。

https://smacss.com/

PureCSSで使用されている。