BEM, Books, CodeGrid, CSS, FLOCSS, OOCSS, SMACSS

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

公開日: 2015/01/28
更新日: 2018/12/26

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

[markdown]
## CSS Architecture 全般

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

モダンなCSS設計パターンを考える from 拓樹谷

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

> * [CSS Nite LP32フォローアップ（8）高津戸壮さん（ピクセルグリッド） | CSS Nite公式サイト](http://cssnite.jp/archives/post_2661.html)

[en.ja Article](http://article.enja.io/) の記事はどれも興味深いですが、以下の3つが CSS 設計に関する記事かなと。

> * [en.ja Article](http://article.enja.io/)
>
> en.ja Articleではハイクオリティな海外のフロントエンドにまつわる記事の翻訳を掲載しています。

1. [CSS Architecture | en.ja Article](http://article.enja.io/articles/css-architecture.html)
2. [About HTML semantics and front-end architecture | en.ja Article](http://article.enja.io/articles/about-html-semantics-and-front-end-architecture.html)
3. [Code smells in CSS | en.ja Article](http://article.enja.io/articles/code-smells-in-css.html)

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

> * [BEMという命名規則とSass 3.3の新しい記法 – アインシュタインの電話番号](http://blog.ruedap.com/2013/10/29/block-element-modifier)

## OOCSS

> * [Takazudolog – OOCSSとSass](http://takazudo.github.io/blog/entry/2012-12-10-oocsssass.html)

[CSS Architecture Advent Calendar 2014 – Adventar](http://www.adventar.org/calendars/337)

> * [[CSS] Object Oriented CSSを学んで綺麗なコードを書く – YoheiM .NET](http://www.yoheim.net/blog.php?q=20141201)

CodeGrid 有料記事

> * [知っておきたいHTMLテンプレート設計法 – OOCSSの基本 | CodeGrid](https://app.codegrid.net/entry/oocss-1)

## SMACSS

> * [SMACSS 読んだ – CHROMA](http://chroma.hatenablog.com/entry/2013/07/22/120818)

電子書籍(日本語)

> * [Ja – Scalable and Modular Architecture for CSS](https://smacss.com/ja)

CodeGrid 有料記事

> * [SMACSSによるCSSの設計 – ベースとレイアウト | CodeGrid](https://app.codegrid.net/entry/smacss-1)

## BEM

[BEM. Block, Element, Modifier](http://bem.info/) の一部日本語訳。

> * [juno/bem-methodology-ja](https://github.com/juno/bem-methodology-ja)

[MindBEMding – getting your head ’round BEM syntax – CSS Wizardry – CSS, OOCSS, front-end architecture, performance and more, by Harry Roberts](http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/) の日本語抄訳。

> * [Summary of http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/ エッセンスだけ訳。翻訳の正しさは微妙。](https://gist.github.com/juno/6182957)

CodeGrid 有料記事

> * [BEMによるフロントエンドの設計 – 基本概念とルール | CodeGrid](https://app.codegrid.net/entry/bem-basic-1)

## CSS コーディング規約

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

> * [「Google HTML/CSS Style Guide」を適当に和訳してみた | REFLECTDESIGN](http://re-dzine.net/2012/05/google-htmlcss-style-guide/)
> * [Styleguide](https://github.com/styleguide/)
> * [SMACSSを参考にしたCSSコーディング規約 – Qiita](http://qiita.com/kechol/items/3a2b7407aa3adfe01385)
> * [こんなHTMLとCSSのコーディング規約で書きたい – Qiita](http://qiita.com/pugiemonn/items/964203782e1fcb3d02c3)

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

> * [Experimenting with component-based HTML/CSS naming and patterns](https://gist.github.com/juno/6666298)

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

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

## FLOCSS

[hiloki](https://github.com/hiloki) さんが提案されています。

> * [hiloki/flocss](https://github.com/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](http://www.torounit.com/blog/2014/10/17/1847/)
> * [CSS設計の教科書 – CHROMA](http://chroma.hatenablog.com/entry/2014/08/01/190931)
> * [『web制作者のためのcss設計の教科書』出版記念イベント@大阪に行ってきたので考えをまとめてみました | web sign*](http://gakublog.com/archives/1172)
> * [Web制作者のためのCSS設計の教科書書評 | 1000ch.net](https://1000ch.net/posts/2014/css-architecture-textbook.html)

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

## 補遺

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

> * [泉水翔吾 | HTML5Experts.jp](http://html5experts.jp/1000ch/)
> * [話題のMaterial DesignをWebで実現！Polymerで「Paper Elements」を試そう | HTML5Experts.jp](http://html5experts.jp/ahomu/9307/)

CodeGrid 有料記事

> * [Web Components最新事情 2014 – Web Componentsの仕様 | CodeGrid](https://app.codegrid.net/entry/web-components-1)
[/markdown]