以前に比べてCSSの設計ができるようになってきました。以前はoocssも使って、smacssも使って、bemも使ってと自分でもまとまりのない設計をしてるなと感じておりました。

最近のよく行うCSS設計についてまとめてみます。

CSS Architecture

よく言われているCSS Architectureです。4つのゴールが示されています。壊れにくいcssを設計するために必要なことが書かれています。

予測しやすい

予測しやすいCSSとはルールが期待通りに振る舞うことを意味する。ルールを追加・更新したとき、そのルールが意図せずサイトの一部に影響を与えるべきではない。

再利用しやすい

CSSのルールは抽象的で、十分に分離されているべきである。それはパターンとすでに解決した問題を書きなおす必要なく、既存のパーツから新しいコンポーネントを速くつくることができるということだ。

保守しやすい

サイトに新しいコンポーネントと機能が追加・更新されるか、再編される必要があるとき、既存のCSSのリファクタリングを必要とすべきではない。

拡張しやすい

サイトが大きく、複雑に成長していくにつれて、通常はたくさんのデベロッパがメンテナンスのために必要となる。拡張しやすいCSSとはひとりのデベロッパか、大きなエンジニアチームかを問わず、容易に管理できることを意味する。またそのサイトのCSS アーキテクチャに、巨大な学習曲線を必要することなく容易に近づけるという意味でもある。

FLOCSS

よくCSS設計の手法としてFLOCSSを使っています。「CSS設計の教科書」を読んだ時に初めて言葉を知りました。実際に提唱された方の勉強会にも参加したり、個人サイトで使ってみたりした結果、体系的にoocss,smacss,bemなどをまとめられていて構造などが最も分かりやすいなと感じました。

Google HTML/CSS Style Guide

何かコードの規約がほしいと思い、Googleが提案しているコーディング規約を参考にしています。コードは人によって書き方が違うと思いますが、見慣れないコードの書き方は読むのに時間がかかってしまうため、ある程度の細かい規約は必要だと感じています。