【CSS設計】ITCSSとFLOCSSを比較してみた。

フロントエンド
3303 view

【CSS設計】ITCSSとFLOCSSを比較してみた。

最終更新日:2018/12/07

itcss

FLOCSSやSMACSS、OOCSSなどCSSの設計方法は沢山あります。

最近ITCSSというCSS設計手法を知ったので、FLOCSSとITCSSの設計思想を紹介&比較していこうと思います。
後発の為、OOCSSやSMACSSよりFLOCSSの方が優れているだろう。

という安直な考えの下、FLOCSSとITCSSを比較しています。

公式とかスライド
・ ITCSS: Scalable and Maintainable CSS Architecture – Xfive
・ Managing CSS Projects with ITCSS
・ GitHub – hiloki/flocss: CSS organization methodology.

ITCSS
FLOCSS
早速比較していこう
ITCSSとFLOCSSの比較まとめ
- - WINDII
  - 最新記事 by WINDII (全て見る)

ITCSS

InvertedTriangleCSS(逆三角形）の略

ITCSSはプリプロセッサと一緒に、あるいはプリプロセッサなしで使用でき、BEM、SMACSS、OOCSSなどのCSSメソドロジと互換性がある。

一つのディレクトリで管理されているのが特徴。

詳しくは、以下の記事で紹介されています。
ITCSSまとめ

FLOCSS

FLOCSS（フロックス）は、OOCSSやSMACSS、BEM、SuitCSSのコンセプトを取り入れた、モジュラーなアプローチのためのCSS構成案。
Foundation,Layout,Objectの頭をとってFLOCSS。

早速比較していこう

【比較①】ドキュメントの量

ドキュメントの量はFLOCSSの方が多く、結構面白い記事が多いです。
ITCSSはメインで紹介されている記事が少なく、日本語のドキュメントがあまりない印象を持ちました。

qiita投稿数。
ITCSS　16
FLOCSS 64

【比較②】命名規則

ITCSSは自由？
FLOCSSはMindBEMding

MindBEMding

【比較③】レイヤー構造とディレクトリ構造

ITCSS
7つのレイヤーに別れていて、１つのディレクトリに配置されています。

itcss/itcss-netmag

各パーシャルファイルの先頭に、属するレイヤー名をつける形をとる。
これをレイヤー順にimportすることで、ITCSSの方法論に従ったCSSということになる。

FLOCSS
3つのレイヤーと、Objectレイヤーの子レイヤーで構成されています。

Foundation – reset/normalize/base…
Layout – header/main/sidebar/footer…
Object
Component – grid/button/form/media…
Project – articles/ranking/promo…
Utility – clearfix/display/margin…

いいなと思ったところ。

ITCSS
・一つのディレクトリにフラットに配置すると移動が楽そう。
・ !important;を記述するのを想定したレイヤーがあるので!important信者としては取っ付きやすい。

FLOCSS
・ OOCSS、SMACSS、BEMとかの良いところが詰まっている。
・日本人が作っているので、比較的普及している？

FLOCSSとITCSSのデメリット

ITCSS
・あまりドキュメントと導入事例が落ちていない。

FLOCSS
・ ComponentとProjectの区別が大変。
・若干学習コストが高い。

ITCSSとFLOCSSの比較まとめ

FLOCSSのが若干種類わけが多く大変そう。
ITCSSは、学習コストも低くて簡単そう。
だけど導入事例もあまりないので、国産のFLOCSSの方がオススメ！

リンク
FLOCSSを使ってCSSファイルを20,000行から9,000行にした話
 [WIP] もうFLOCSSで消耗するのはやめよう！単一ファイルコンポーネント時代の新しいCSS設計

最近では、CSSを書かなくてもデザインが全てできる、マテリアルデザインなども流行っています！

Vuetifyチュートリアル。CSSを書かないマテリアルデザイン

VuetifyとはVue.jsで使える、マテリアルデザインのフレームワークです。Vuetifyにはマージンの調整、文字サイズの変更等デザインをする上で便利なクラスや、マテリアル。マテリアルにまつわるオプションがデフォルトで備わっています。マテリアルやオプションを使い...

この記事を書いた人
最新の記事

WINDII

WINDII（ウィンディ）は、フリーランスエンジニアが運営するテックメディアです。日々の業務で得た知見を、皆さんに役立つコンテンツにして発信していくので応援よろしくお願いします！また、Slackで無料コミュニティも運営しています。たくさんのエンジニアが参加していて、プログラミングの相談や雑談などをしている楽しいコミュニティなので、興味ある方はぜひお気軽にご参加ください。 Slackコミュニティはこちらから

現役フリーランスエンジニアが運営するテックメディア。日々の業務で得た知識を発信していきます！

WINDIIテック