【CSS？良いCSS？悪いCSS？】　新人プログラマー必見！CSS設計の基本

公開日 : 2021.07.28 最終更新日 : 2022.10.05

コーディング

はじめに

こんにちは！AndHA新人コーダーのタイガです！

Webコーダーとして働き始めて、二ヶ月が経ち、ちょっとずつ仕事にも慣れてきました！
しかし、まだまだ必要な知識は盛り沢山、、、、。

前回は「新人プログラマーがセマンティック・マークアップを学習してわかったこと。」と題しHTMLのセマンティック・マークアップについて記事にしました！

読んでくれましたか？

今回はすごく大切なスキル「CSS設計」について書いていこうと思います。

CSSとは？

知ってるよ！と言われそうですがあらためておさらいです。(私個人のためにも)

CSS(Cascading Style Sheets、カスケーティング・スタイルシート)とは、Webページの見た目を作るものです。デザインやレイアウトなどをして見栄えを整える役割を担っていますね。

私たち、Webコーダーはデザイナーから渡されたHPやLPのデザインデータを元に、HTMLで文書構造を作成し、CSSでデザイン通りの見た目を再現していきます。

つまり、HTMLとCSSはセットです！

このHTML文書のh1タグのクラスtitleに対して

<h1 class="title">タイトル</h1>
<p>テキスト</p>

このようにCSSでスタイルを指定すると

.title {
  color: red;
}

クラス”title”で囲まれた文字が赤色に変化します。

「HTML側の内容とCSS側の指定がマッチすればスタイルが適用される。」

とってもシンプルな仕組みになっています。
シンプルだからこそ、大規模サイトや複雑なデザインのサイトなど、すぐにCSSが破綻してしまいます。
俗に言う「スパゲッティコード」

「麺だって　一本だけなら　長いだけ、、、、、」

なので、Webコーダーは常に効率の良いCSS設計を心がけなければいけいないのです！

良いCSS設計とは？

じゃあ、良いCSS設計って何？ですよね

予測可能
再利用可能
保守可能
スケーラブル

この四つが重要とされています。

※これに関してはHTML構造も重要になってきます。「新人プログラマーがセマンティック・マークアップを学習してわかったこと。」前回の記事で軽くまとめてますのでよかったら読んでみてください！

予測可能なCSS

予測可能なCSSは、ルールが期待どおりに動作することを意味します。ルールを追加または更新するときに、意図しないサイトの部分に影響を与えることはありません。変更されることはめったにない小さなサイトでは、これはそれほど重要ではありませんが、数十または数百ページの大きなサイトでは、予測可能なCSSが必須です。
引用元：cssアーキテクチャ

新人コーダーあるあるだと思うのですが、CSSでスタイルを適用した際、意図していない場所の色が変わったり、サイズがおかしくなったりすることがありますよね。
模写程度のマークアップならいいのですが、実務となるとそうはいきません。期待通りにスタイルが適用されないと時間のロスにつながってしまいます、、、ぐはぁあっ！！

再利用可能なCSS

CSSルールは抽象化され、十分に分離されている必要があります。これにより、すでに解決したパターンや問題を再コーディングすることなく、既存のパーツから新しいコンポーネントをすばやく構築できます。
引用元：cssアーキテクチャ

デザインを見た時点で、共通点を見つけることが重要だと思います。
紙に書いたりすると、共通のスタイルが使用できそうな(再利用可能な)範囲を見つけることができます！おすすめです！後々、頭の中でできるように一緒に頑張りましょう！

保守可能なCSS

サイトで新しいコンポーネントや機能を追加、更新、または再配置する必要がある場合、既存のCSSをリファクタリングする必要はありません。コンポーネントXをページに追加しても、コンポーネントYが存在するだけで壊れてはなりません。
引用元：cssアーキテクチャ

これまた難しい言い回し。
つまりサイトは作って終わりではなく、その後もとても大切です。運用して行く上で必ずしも修正や改修、更新などは行われます。クライアントさんから「ここを直して欲しい」「ページ追加してほしい」などのご要望にお応えする際、修正・コンポーネント(パーツ)を追加するたびにレイアウトが崩れていては元も子もありません。複数人での開発もあるので、常にメンテナンス性の高く保守しやすいCSS設計を心がけましょう！

スケーラブルなCSS

サイトのサイズと複雑さが増すにつれて、通常、より多くの開発者が維持する必要があります。スケーラブルなCSSは、1人または大規模なエンジニアリングチームが簡単に管理できることを意味します。また、膨大な学習曲線を必要とせずに、サイトのCSSアーキテクチャに簡単にアクセスできることも意味します。あなたが今日CSSに触れている唯一の開発者であるからといって、それが常に当てはまるとは限りません。
引用元：cssアーキテクチャ

スケーラブル(Scalable)とは、拡張性や拡張可能性のことをいいます。
サイトの規模が大きくなったり、複数人で開発する場合、途中参戦する場合、誰が見てもわかるようなクラス命名とCSSの構造を心がけようね！ってことです。それは一人で開発していても言えることですね！