テックブログ

  1. CSS
  2. 531 view

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

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

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つのレイヤーに別れていて、1つのディレクトリに配置されています。


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を書かなくてもデザインが全てできる、マテリアルデザインなども流行っています!

The following two tabs change content below.

zoe

1994年、京都生まれ。麻布高校卒業後、2年間FPSのクランマスターとして活躍し、駒澤大学の経営学部に進学 → 中退→ とんかつ屋→ WINDII→ Sier→ ベンチャー→ WINDII
  • コメント: 0

CSSの最近記事

  1. Flexboxを習得して使いこなす【CSS】

  2. WordPressで目次をサイドバーに固定する方法【JS不要】

  3. 【脱初心者!】CSSでの文字装飾を徹底解説

  4. GRID入門 CSSでHTMLをレスポンシブ対応にする方法

  5. 【超簡単】Angular6でPug + Stylusを導入して爆速コーディングする方法

関連記事

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。