CSSのコードを整理し、効率的に管理する方法のまとめ

CSSのコードを書くことは簡単ですが、コードを整理し、効率的に管理する方法は難しいものです。大規模なプロジェクトだけでなく、小規模なプロジェクトにも、そして未来の自分のためにも必須と言えます。

CSSを効率的に管理する一連のソリューションについて紹介します。

Methods to Organize CSS

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。

• OOCSSとは
• SMACSSとは
• Atomic CSSとは
• MCSSとは
• AMCSSとは
• FUNとは
• 総括

OOCSSとは

OOCSSはオブジェクト指向のCSSの略です。OOCSSのアプローチには、2つのポイントがあります。

• 構造とデザインの分離
• コンテナとコンテンツの分離

このアプローチにより、制作者は異なる場所でも使用できる総合的なclassを利用することができます。

これには、良いニュースと悪いニュースがあります

• 良いニュース: 再利用することで、コードの量を減らします。「DRY Principle」と呼ばれるものです。
• 悪いニュース: 保守が複雑になります。特定の要素のスタイルを変更する時、ほとんどのclassが共通で使用されているため、そのスタイルのCSSを変更するだけでなく、HTMLにclassを追加する必要があります。

また、OOCSSのアプローチ自体には具体的なルールはありませんが、推奨事項はあります。そのため、OOCSSがプロジェクトにどのように使用されるかはさまざまです。

OOCSSでの考えは、コードの構造は他の人が独自の具体的なものを作成するように促されています。

SMACSSとは

SMACSSはCSSのScalable and Modular Architecture（拡大縮小可能なモジュール式のアーキテクチャ）の略です。SMACSSでのアプローチのゴールは、コードの量を減らし、コードのサポートを簡素化することです。

SMACSSのオーサーであるJonathan Snookは、ルールを5つのパートに分けています。

1. Base Rules

   ベースとなるルール。これらはWebサイトの主要な要素（body, input, button, ul, olなど）のスタイルです。このセクションでは、主にHTMLタグと属性セレクタを使用します。classは例外です。

2. Layout Rules

   レイアウト用のルール。ここではグローバル要素のスタイル、ヘッダやフッタやサイドバーなどがあります。これらの要素はページ内で1回以上出現しないため、セレクタでidを使用することが提案されています。
   しかし私はこれは悪い習慣だと思います。

3. Module Rules

   モジュール用のルール。ここではページ内で繰り返し出現するブロックがあります。モジュールクラスの場合、それぞれ再利用とコンテキストの独立性のために、idとタグセレクタの使用は推奨されません。

4. State Rules

   状態用のルール。ここではモジュールのさまざまなステータスを定義します。 !Importantの使用が許される唯一のセクションです。

5. Theme Rules

   テーマ用のルール。サイトにルックアンドフィールを与えるカラーや画像、取り換える必要があるかもしれないスタイルを定義します。

classの命名は、特定のグループに属しているのが分かるようにし、JavaScriptで使われるclassには独自の名前を使用するように勧められています。

このアプローチはコードの作成と保守が容易になり、多くの制作者を引きつけました。

Atomic CSSとは

Atomic CSSでは、個々のclassがそれぞれ再利用可能なプロパティのために作成されます。例えば「margin-top: 1px;」が「mt-1」、あるいは「width: 200px;」が「w-200」のようなclassです。

このスタイルでは宣言を再利用することで、CSSのコードの量を最小限に抑えることができます。その上、技術的なタスクを変更する場合など、モジュールに変更を加えるのも比較的簡単です。

しかし、このアプローチには重大な欠点があります。

• class名はセマンティックな名前ではなく、説明的な名前になるため、制作が複雑になることがあります。
• 表示に関する指定が、HTML内に直接的に存在します。

こういった欠点があるため、このアプローチはかなりの批判がありました。それにもかかわらず、このアプローチは大規模なプロジェクトで有効です。

また、Atomic CSSはさまざまなフレームワークでも採用されており、要素のスタイルを調整するために使用されています。

MCSSとは

MCSSは、多層のレイヤーで構成されるCSSです。コードの記述方法は、レイヤーを複数の部分に分割することを示しています。

• 最初のレイヤーは、土台（foundation）です。ブラウザのスタイルをリセットするコード（reset.cssやnormalize.css）が記述されます。
• その上のレイヤーはベース（Base）で、サイト上の再利用可能な要素のスタイル（ボタン、テキストの入力フィールドなど）が含まれます。
• プロジェクト（Project）レイヤーには、別々のモジュールとコンテキストが含まれます。コンテキストではクライアントブラウザ、サイトやアプリが表示されているデバイス、ユーザーの役割などによって要素が変更されます。
• 一番上のコスメティック（Cosmetic）レイヤーはOOCSSスタイルで記述され、要素の外観が調整されます。

これらレイヤーは、階層が非常に重要です。

• ベースではニュートラルのスタイルを定義し、他のレイヤーには影響を与えません。
• ベースの要素は、そのレイヤーのclassにのみ影響を与えるだけです。
• プロジェクトの要素は、ベースとプロジェクトの両方に影響を与えることができます。
• コスメティックはOOCSS（Atomic class）で設計され、他のCSSコードには影響を与えません。

AMCSSとは

AMCSSは、Attribute Modules for CSS（CSS のための属性のモジュール）の略です。

例を見てみましょう。

上記のようにclassを連鎖させるのはシンプルではありません。これらの値を属性でグループ化しましょう。

名前の衝突を回避するために、属性にnamespaceを加えることは良いアイデアです。

次に、ボタンのコードは下記の形態をとります。

am-button属性が嫌いな場合は、data-の接頭辞を加えることができます。

AMCSSではあまり知られていないセレクタ「~=」（IE7+）が使用されます。これはclass属性として機能し、属性値に指定された単語がスペースで区切られた要素を選択します。「[class~="link"]」「[class~="button"]」のセレクタは、「a.link.button」に類似しており、詳細度で比較してもそれらは等しくなります。

それを踏まえて、最初のCSSを見てましょう。

変換すると、下記のようになります。

このコードに馴染めない場合は、下記のコードでもAMCSSを使うことができます。

FUNとは

FUNはセレクタのフラットな階層（Flat）、ユーティリティのスタイル（Utility）、名前空間のコンポーネント（Name-spaced）の頭文字を取ったものです。

名前のそれぞれに原則があります。

• Flat: セレクタのフラットな階層では、アイテムを選択するためにidを使わずに、classを使うことが推奨されます。
• Utility: ユーティリティのスタイルでは、よく使用するスタイルにはAtomicスタイルを作成することが推奨されます。例えば、「Width: 100%」は「w100」、「float: right;」は「fr」など。
• Name-spaced: 名前空間のコンポーネントでは、特定のモジュール要素のスタイルを指定するための名前空間を追加することが推奨されます。この方法では、class名が重複しないようにします。

一部の制作者の間では、この原則を使用して記述されたコードはメンテナンス性に優れており、非常に便利であると指摘しています。私はSMACSSの良いとこを採用し、このテクニックをシンプルで簡単な方法で設計しました。

このアプローチでは、プロジェクトとコードの構造にかなりの必要条件が課せられます。条件は、定義されたセレクタが望ましい形式でマークアップに使用される方法を確立することです。小規模なプロジェクトであれば、これらのルールは高品質なコードにするのに十分な効果があります。

総括

ここまで見てきたように現時点で、どのようなプロジェクトでもこれで完璧、という万能なアプローチはありません。

つまり、これらのアプローチはどれも絶対的なものではないということです。それぞれをベースにあなた自身のものを作成したり、ゼロから新しく作成する必要があります。