CSS設計とは？設計手法はどれがいいのかまとめてみた

CSS設計とは、CSSのコード管理の方法と、CSSのメンテナンス性や作業の効率化のためにおこなうHTMLクラス名の規則の考え方を指します。
良いCSS設計の条件として、「予測がしやすい」「拡張性がある」「保守性がある」の3つが重要であると言われています。

 

予測がしやすい

CSSのルールは誰が見ても予想通りであることが大事です。ルールの変更や追加をした時にうまくいかないことを避け、なお且つ現存のルールに影響を与えないように注意しておきましょう。

拡張性がある

webサイトの運営をしていけば、それだけでさまざまなコンテンツの追加や修正などをおこない続けることになります。

大規模なサイトであれば、1人だけでなく複数人で作業することにもなります。

そのような点も加味しながら、自分以外がCSSを触ることを考慮した設計・管理を目指す必要があるのです。

保守性がある

コンポーネントやそれ以上の小さな単位への変更を加えた場合に、既存のCSSが効かなくなることを防ぐ必要があります。

CSS設計を導入するメリットは、以下の2つです。

• 大規模なwebサイトや長期間運用する予定のプロジェクトにおいて、複数人で作業する際の品質を担保出来る
• メンテナンス性が向上することで行き届いたコードの記述が可能になり、作業の効率化が見込まれる

 

大規模なサイトや複数人での作業時のクオリティ担保

ランディングページなどのコーディングをおこなう場合はあまり困ることがないのですが、数十ページあるようなwebサイトのコーディングをおこなう場合や、コンポーネントを使い回す必要があった場合は、設計手法や命名規則を事前に設定しておく必要があります。

事前に決定しておかないと、納品が完了する時にはコードがコーダー以外には解読出来ないようなスパゲッティコードと言われる状態になってしまいます。

このような状態になってしまうと、修正が必要な時に修正をしただけのつもりなのに、他の場所にも影響が出てしまったり、依存関係の確認だけで時間を要してしまったり、とても分かりにくいコードが完成してしまうのです。

CSSの設計手法をあらかじめ決めておき、コーディングをおこなうことで、コードの影響範囲が分かりやすくなり、たとえ大規模なwebサイトや長期的運用予定のプロジェクトでも管理の良く行き届いたコードを書くことが可能となるのです。

メンテナンス性向上による作業の効率化

CSS設計の手法を正しく取り入れることで、全体的に行き届いた記述が出来、メンテナンス性が向上。

CSS設計を取り入れずにいた場合、煩雑になってしまったコード上で優先順位が複雑になってしまい、コードが崩壊してしまう恐れがあります。

一度、壊れてしまうと原因の確定にも時間が掛かってしまい、元に戻すまでに大変な時間が掛かってしまいます。

企業やチームによってさまざまなCSSの設計手法が使われていますが、主要なCSSの設計手法として有名なものは以下の5つです。

• OOCSS
• BEM
• SMACSS
• MCSS
• FLOCSS

これらの手法を組み合わせたオリジナルの設計手法を用いている場合もあります。

引き継ぎなどが発生し、他の人が制作したwebサイトを更新する場合にも、そのwebサイトを破綻させてしまうことがないようにしましょう。

レギュレーションやwebサイトの構造を把握して、ルールを理解して更新していくことが重要です。

そのためにも、どのようなCSS設計手法が存在するのかを把握しておくことは大事なことです。

 

OOCSS

OOCSSはOBJECT-ORIENTED（オブジェクト指向）CSSの略で、その名の通りオブジェクト指向を取り入れた設計手法です。

構造、見た目、コンテナ、内容を分けて別々のクラスで指定します。

マルチクラスを用いて使うことが多いという特徴があります。

BEM

BEMは、webサイトのUIをBlockとして考えます。そのBlockに含まれる要素をElementとし、BlockやElementの装飾や動作のパターンをModifierというルールで設定。

もともとはロシアのYandex社が開発したBEM Toolsのこと、またその設計のことを指します。

SMACSS

SMACSSは、CSSをベース、レイアウト、モジュール、ステート、テーマという5つに分類して管理をしています。

公式のドキュメントが電子書籍として販売されているので、導入を検討している方には手をつけやすいもののひとつです。日本語版でも販売されています。

MCSS

BEMとOOCSSの原理をベースに作られたのがMCSSです。

CSSを3つのレイヤーに分ける考えで作られています。

• Base　再利用が可能な標準的なスタイルセット
• Projec　Baseを基本としたプロジェクト毎のスタイル
• Cosmetic　色・サイズなどがわずかに影響するスタイル

それぞれに属するクラスを、複数指定することでUIを作成していきます。

FLOCSS(フロックス)

OOCSS、SMACSS、BEM、MCSSなどの考え方のいいとこどりをした設計手法で、比較的扱いが容易で導入も簡単です。

命令規則はMindBEMdingを採用しています。

結論から言うと、最も優れたCSSの設計手法というものは存在しません。

今回は5つのCSS設計手法をご紹介しましたが、どの設計手法にもメリットやデメリットが存在します。

プロジェクトの規模やwebサイトのサイズによって、その状況に応じたCSS設計手法は異なるのが普通なのです。

CSSの設計手法に捉われるのではなく、自分の担当するwebサイトやプロジェクトに一番マッチするCSS設計を考え、工夫して運用することが一番のおすすめの使用方法といえます。

あくまでもCSSの設計手法は方法の中のひとつであり、万能ではありません。

要するに、CSSの設計手法を取り入れるだけで、どんな問題も解決出来るものではないといえます。

同じ設計手法を使っていたとしても、そのプロジェクトやチーム間でオリジナルの手法が混在している場合もあり、そのまま用いることなど到底出来ないものなのです。

とはいえCSSの設計手法を取り入れるべきwebサイトやプロジェクトは必ず存在します。

もしコーディングを個人だけでなくチーム間でおこなう必要があったり、長期的なプロジェクトなどであったりする場合はCSSの設計手法を取り入れて、
作業の効率化と品質の担保をしっかりとおこなうようにしましょう。

デパート採用情報

株式会社デパートでは一緒に働く仲間を募集しています