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

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

CSS Architecture 全般

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

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

• CSS Nite LP32フォローアップ（8）高津戸 壮さん（ピクセルグリッド ） | CSS Nite公式サイト

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

• en.ja Article

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 」を推されています。

• BEMという命名規則とSass 3.3の新しい記法 – アインシュタインの電話番号

OOCSS

• Takazudolog – OOCSSとSass

CSS Architecture Advent Calendar 2014 – Adventar

• [CSS] Object Oriented CSSを学んで綺麗なコードを書く – YoheiM .NET

CodeGrid 有料記事

• 知っておきたいHTMLテンプレート設計法 – OOCSSの基本 | CodeGrid

SMACSS

• SMACSS 読んだ – CHROMA

電子書籍(日本語)

• Ja – Scalable and Modular Architecture for CSS

CodeGrid 有料記事

• SMACSSによるCSSの設計 – ベースとレイアウト | CodeGrid

BEM

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

• juno/bem-methodology-ja

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

• Summary of http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/ エッセンスだけ訳。翻訳の正しさは微妙。

CodeGrid 有料記事

• BEMによるフロントエンドの設計 – 基本概念とルール | CodeGrid

CSS コーディング規約

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

• 「Google HTML/CSS Style Guide」を適当に和訳してみた | REFLECTDESIGN
• Styleguide
• SMACSSを参考にしたCSSコーディング規約 – Qiita
• こんなHTMLとCSSのコーディング規約で書きたい – Qiita

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

• Experimenting with component-based HTML/CSS naming and patterns

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

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

FLOCSS

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

• hiloki/flocss

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

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

Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法

posted with amazlet at 15.01.27

谷 拓樹
インプレス
売り上げランキング: 3,250

Amazon.co.jpで詳細を見る

• 脱カオスなCSSのために実践している7つの事 | Toro_Unit
• CSS設計の教科書 – CHROMA
• 『web制作者のためのcss設計の教科書』出版記念イベント@大阪に行ってきたので考えをまとめてみました | web sign*
• Web制作者のためのCSS設計の教科書 書評 | 1000ch.net

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

補遺

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

• 泉水翔吾 | HTML5Experts.jp
• 話題のMaterial DesignをWebで実現！Polymerで「Paper Elements」を試そう | HTML5Experts.jp

CodeGrid 有料記事

• Web Components最新事情 2014 – Web Componentsの仕様 | CodeGrid