sass(scss)を使用しないFLOCSS設計を考えてみる

公開日:2019-03-18
最終更新:2019-03-19

sass(scss)を使用しないFLOCSS設計

CSS設計でFLOCSSを採用する場合はsass(scss)を利用すると思いますが、それらを利用しない場合のディレクトリ構成を考えてみました。

公式のレイヤー構成

まず公式のレイヤー構成は下記のようになっています。

  • Foundation - リセット、ベースデザインのレイヤー。
  • Layout - ヘッダーやフッターなどのレイアウトレイヤー。
  • Object
    • Component - 最低限の機能を持ったボタンなどのレイヤー。
    • Project - 記事やカードなどの固有なビジュアルパターンのレイヤー。
    • Utility - マージンやパディングなどの調整用のレイヤー。

sass(scss)を利用した場合は下記のようなディレクトリ構成になると思います。※style.scssにfoundation、layout、objectが結合されます。

scss  
|   style.scss  
|  
+---foundation  
|       _base.scss  
|       _mixin.scss  
|       _reset.scss  
|  
+---layout  
|       _footer.scss  
|       _header.scss  
|  
\---object  
    +---component  
    |       _breadcrumb.scss  
    |       _button.scss  
    |       _input.scss  
    |  
    +---project  
    |       _article.scss  
    |       _card.scss  
    |  
    \---utility  
            _margin.scss  
            _padding.scss

sass(scss)を利用しない場合のcssのディレクトリ構成

sass(scss)を利用しない場合のcssのディレクトリ構成を下記のようにしてみました。

project  
│  
└─css  
        foundation.css  
        layout.css  
        object.css

foundationの記述をfoundation.cssに、layoutの記述をlayout.cssに、object内の記述をobject.cssにまとめています。
はじめはscssのディレクトリ構成でのfoundation内にある「 _base.scss」を「 base.css」にして読み込もうと考えたのですが、その場合ファイル数やリクエスト数が多くなるので上記のように考えてみました。

Pagesがある場合を考える

次によくあるそのページでしか利用しないデザインがある場合を考えてみます。pagesというフォルダを作り、コンテンツと同じフォルダ名称で利用していきます。
pages直下のindex.cssがトップページ専用、contactがお問い合わせ専用となる構成です。

project  
│  
└─css  
    │  foundation.css  
    │  layout.css  
    │  object.css  
    │  
    └─pages  
        │  index.css  
        │  
        └─contact  
                index.css

何らかの理由でpagesに記述したスタイルが専用ではなくなり、他のページでも同じデザインが存在する場合はobject.cssに移動します。

Pagesのモジュールに対しプレフィックス(接頭辞)をつける。

FLOCSSは下記のようにレイヤーの各モジュールにプレフィックスをつけています。

  • Layout:.l-*
  • Component:.c-*
  • Project:.p-*
  • Utility:.u-*

上記にならい、pagesのモジュールに対してのプレフィックス(接頭辞)は下記のようにします。

  • Pages:.pa-*

pagesを公式のレイヤー構成に追加する

pagesを公式のレイヤー構成に下記のように追加します。

  • Foundation - リセット、ベースデザインのレイヤー。
  • Layout - ヘッダーやフッターなどのレイアウトレイヤー。
  • Object
    • Component - 最低限の機能を持ったボタンなどのレイヤー。
    • Project - 記事やカードなどの固有なビジュアルパターンのレイヤー。
    • Utility - マージンやパディングなどの調整用のレイヤー。
  • Pages- そのページ専用のレイヤー。//Pagesを追加

本来は調整用のUtilityがあるObjectが最後に来るのですが、pagesに記述したスタイルが専用ではなくなり、他のページでも同じデザインが存在する場合はobject.cssに移動し、pagesのファイル自体が必要なくなることを考え、Foundation > Layout > Object > Pages といった順にPagesは例外的に最後に読み込むようにします。

最後に

FLOCSSはsass(scss)との相性がよいので、そのままCSSで利用している記事は観測している範囲では見つからなかったので、オレオレも交えて記載いたしました。

記事が少しでもいいなと思ったらクラップを送ってみよう!
18
+1
@aBcSiwClZ6Xycv2hの技術ブログ

よく一緒に読まれている記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう
目次をみる

技術ブログをはじめよう

Qrunch(クランチ)は、ITエンジニアリングに携わる全ての人のための技術ブログプラットフォームです。

技術ブログを開設する

Qrunchでアウトプットをはじめよう

Qrunch(クランチ)は、ITエンジニアリングに携わる全ての人のための技術ブログプラットフォームです。

Markdownで書ける

ログ機能でアウトプットを加速

デザインのカスタマイズが可能

技術ブログ開設

ここから先はアカウント(ブログ)開設が必要です

英数字4文字以上
.qrunch.io
英数字6文字以上
ログインする