SMACSSとFlocssに触れてみて思ったこと

HTML/CSS

メンテナンス性の高いCSSを書くための手法として多くのCSS設計手法があります。その中でも有名なSMACSSとFLOCSSを小規模サイトのCSS設計で使ってみた感想を少しだけ記しておきます。

SMACSS

Jonathan Snookさん考案の設計手法です。日本語翻訳版の電子書籍が販売されています。

Scalable and Modular Architecture for CSS

レイアウトルールとモジュールをどう分けるか

レイアウトルールはページ全体のヘッダーやフッターなど一意の要素のほか、モジュールを配置するためなどに利用します。

一意の要素のルールを決める分には特に混乱はないのですが、モジュールの配置を決める際には少し迷いました。例えばモジュール中にあるモジュールをfloatするときに、レイアウトとして処理するのか、モジュールとして処理するのか、といった具合です。

bootstrapなどのフレームワークを使うとさらに混乱するかもしれません。bootstrapにおけるグリッドシステムはSMACSSにおいてはモジュールともとれてしまうからです。

レイアウトルールとモジュールの線引きをどこでするのか事前に明確にしておく必要がありそうです。

モジュールをどう分けるか

モジュールの中にも一意のものと再利用するものとがあると思います。例えばサイトの“ヘッダーに配置するロゴ周りのルール”とかはあまり他所では流用しませんよね。

SMACSSでは絶対に一度しか使わないであろうモジュールと、汎用性のあるモジュールとの間に線引きがありません。なので両者の線引きは設計者がすることになります。

用途にあわせてモジュールをまとめ、ファイル分けを徹底することなどで対処するのがいいのでしょうか。

flocss

谷拓樹さんが考案された設計手法です。有名な「緑の本」で紹介されているものです。

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

GitHub – hiloki/flocss: CSS organization methodology.

小規模サイトにおけるComponetntとProject

小規模のサイトだと再利用できるパーツがあまりないので、ほとんどのObjectがProjectとして記述されることになると思います。小規模サイトだとあまりComponentとProjectを細かく分ける必要性はないのかなと感じました。

フレームワークが扱いやすい

SMACSSに比べるとbootstrapなどのフレームワークが扱いやすいように思います。ComponentやUtilityとして扱えばわりと自然に利用できるからです。フレームワークのルールと、独自のルールを混同しないようクラスの命名ルールだけはきっちりと決めておいた方がいいかもしれません。

結論

どちらの手法をベースにつかうにしても、原則にこだわり過ぎるとかえってその有用性が薄れてしまいそうです。サイトの規模や性質、開発環境などに合わせてルールを調整するのがいいと思います。

コメント