Web初心者必見!CSS設計と代表的な手法3つを紹介

Web初心者必見!

Webデザイナー・エンジニアのりうやです。

Web未経験から転職するために
いまでは誰しもがポートフォリオを作成すると思うのですが、

初めてポートフォリオを作成する時ってとにかく形を作るのに必死で、

CSSの記述グチャグチャになりませんか?w

僕はなりました。

CSS設計を頭の片隅に置くことが綺麗なCSSが書けるようになる
一番の近道です!

ということで、この記事ではCSS設計の概念についてご紹介します!

スポンサーリンク

CSS設計とは?

CSS設計とは、簡単に言ってしまえば

CSSを記述するルールのことです。

このルールを決めることで、以下のメリットを享受することができます。

・ソースコードが綺麗になる
・CSSを変更する際に、コードを読み解く工数が削減される
・クラス名を考える工数が削減される
・同じCSSを再利用しやすくなる

実際の現場で仕事をするようになると、
このCSS設計を必ずプロジェクトごとに定義します。

なぜCSS設計が重要なのか?

複数人での作業がしやすくなる

1つのプロジェクトには様々な人が関わります。
最初は1人でコードを書いていたけれど、後から新しい人が入ってくると
いったことも全然あります!

そのため、CSSを記述するルールがないと

個人で好きなように書いてしまい
ぐちゃぐちゃなコードが生まれてしまいます!

結果、

読み解くだけで半日かかってしまったり、
実際に書いた人じゃないとわからないなどの障害が生まれてしまうので
これを阻止することができます。

メンテナンス性が高まる

プロジェクトが終わった後にも、追加作業や回収作業があります。

その際にどの要素に対して編集を行えば良いのかが見つけやすくなり、
迷わず作業することができます。

視認性が高まる

視認性が高まることで、
HTMLのコードを見るだけでどのCSSが適用されているかを理解でき、

Webサイトの保守、拡張がしやすくなります。

CSS設計の代表的な手法3つ

BEM

この設計は以下を達成するのに優れた手法とされています。
(※BEM公式ドキュメント参照)

・長期メンテナンスできる
・チームでの運用性が高い
・CSSを使いまわして書くことができる

BEMは親要素に対して、”__”でつないでいくため

デメリットとして、

クラス名が長く煩雑になりやすいことがあげられます。

SMACCS

SMACCSは、

“コードの記述量を減らしたい”
“とにかくCSSを使い回したい”

という案件にもってこいのCSS設計になります。

記述量を少なく、CSSをガンガン使い回す

ことを重視しているため、ソースコードを厳密に管理しないと
逆に肥大化しやすくなってしまいます。

OOCSS

OOCSSは、”オブジェクト指向CSS”の略称で、

Webサイトのレイアウト部分、
見た目(色など)を分けて記述します。

そのため追加作業が発生した際に、
見た目に関するクラスを追加するのみで済むようになっています。

デメリットとしてはSMACCSと同様に
クラスの影響範囲が大きいため厳密なソース管理が求められます。

まとめ

CSS設計について簡単にご紹介しました。

特にBEM、SMACCS、OOCSSは案件で使われることが多いので
CSSを書く際に、記述も合わせて学習してみてください!