[Front-End General] CSS Architecture (OOCSS, SMACSS, BEM, FLOCSS) に関する日本語情報ソースまとめ

何度も読み直すことになりそうなので、必要なソースをまとめておきます。

CSS Architecture 全般

概要を把握するにはこちらが分かりやすかったです。

以下も同じく、後述する3つの手法の概要。

en.ja Article の記事はどれも興味深いですが、以下の3つが CSS 設計に関する記事かなと。

en.ja Articleではハイクオリティな海外のフロントエンドにまつわる記事の翻訳を掲載しています。

  1. CSS Architecture | en.ja Article
  2. About HTML semantics and front-end architecture | en.ja Article
  3. Code smells in CSS | en.ja Article

下記は BEM に関する記事ですが、リンク先など設計全般に関する情報が網羅されていて必読な気がしています。
en.ja Article 1. 2. の記事にも触れられており、扱う案件の特性から「 シングルクラス設計・MindBEMding 」を推されています。

OOCSS

CSS Architecture Advent Calendar 2014 – Adventar

CodeGrid 有料記事

SMACSS

電子書籍(日本語)

CodeGrid 有料記事

BEM

BEM. Block, Element, Modifier の一部日本語訳。

MindBEMding – getting your head ’round BEM syntax – CSS Wizardry – CSS, OOCSS, front-end architecture, performance and more, by Harry Roberts の日本語抄訳。

CodeGrid 有料記事

CSS コーディング規約

こういった手法を取り入れた規約もあるよう。
探せば他にもあるのかもしれない。

CSS Class の命名に関する規約。

それぞれ以下のような接頭辞を使う。

  • テンプレートコンポーネント t-*
  • ステートコンポーネント is-*
  • JavaScript コンポーネント js-*

FLOCSS

hiloki さんが提案されています。

FLOCSS(フロックス)は、OOCSSやSMACSS、BEM、SuitCSSのコンセプトを取り入れた、モジュラーなアプローチのためのCSS構成案です。
MCSSのレイヤー構成にも大きな影響を受けています。

構成としては「 マルチクラス設計・MindBEMding 」志向のようです。

ぼっちで開発していると、設計・構成のプロセスなどを知る機会がないため、読後、いろいろとモヤモヤしていたポイントがスッキリしました。
できるところから少しずつ実践ですね。(^^;)

補遺

CSS設計の教科書でも触れられている Web Components が理解できていなくてアレなので、メモだけでもしておく。

CodeGrid 有料記事