駆け出しWebデザイナーの皆さん、気づいたらCSSがごちゃごちゃになってしまっていた…なんてことはありませんか？
自分の書いたコードを数日後や数週間後に見返したときに、
「どこをどう直せばいいかわからない…」
「同じような指定があちこちに散らばっている」
みたいなことってよくありますよね…。
私も会社に入ったばかりのころは、つい「早く完成させないと」と焦ってしまい、コードを見やすく整理するところまで気が回っていませんでした。
ただ、実務では「一度作って終わり」ではなく、そのあとに修正や追加対応が入ることも多く、修正のたびに余計な時間がかかってしまい、あとから見てもわかりやすいcssを書くことの大切さを実感しました。
そこで今回は、基本的な内容ではありますが、私が実務で必ず意識している、見やすく整理されたcssを書くためのコツを４つ、順番にご紹介します。
コツ① インデント（字下げ）と改行を整える
まず意識したいのが、インデント（字下げ）と改行を整えることです。
たったこれだけでも、CSSの構造がかなり見やすくなります。
❌NG例
OK例
いかがですか？
同じCSSでも、改行やインデントが整っているだけで、コードのまとまりが把握しやすくなり、どの要素に何が指定されているかを追いやすくなりますよね。
私は普段VS Codeを使用して、コードを書いているのですが、「Prettier」というプラグインを入れて、保存すると自動的にインデントが整うようにしています。
毎回手動で整えようとすると意外と手間がかかりますし、急いでいるとつい後回しにしてしまいがちなので、最初から自動で整う環境を作っておくのがおすすめです。
コツ② コメントアウトを増やしすぎない
コメントアウトは、コードを見やすくするために入れるものですが、増やしすぎるとかえって読みにくくなってしまいます。
そのため、コメントアウトは必要なところだけにしぼって、なるべくシンプルに入れるのがおすすめです。
✅コメントアウトを入れるおすすめの箇所
私が特に入れておくと便利だと感じるのは、次のような箇所です。
①セクションの区切り ②スマホ用・PC用の区切り ③どうしても補足が必要な部分
このように、コメントアウトは必要な区切りや補足が必要な部分だけに絞って入れるほうが、全体が見やすくなります。
あくまで「あとから見返したときに分かりやすくするための目印」としてなるべくシンプルにするのがおすすめです。
コツ③ 共通部分のCSSはまとめて書く
CSSを書いていると、ボタンや見出し、テキストなど、いろいろな場所で同じ色や余白、角丸などを指定することがありますよね。そのたびに同じ指定をそれぞれに書いていると、コードが増えて見づらくなり、修正が必要になった時に、該当箇所を一つずつ探して直さなければならず、手間がかかってしまいます。
そのため、共通している指定は、できるだけまとめて書くのがおすすめです。
共通部分と違う部分を分けて整理しておくことで、コードがすっきり見やすくなり、修正もしやすくなります。
❌NG例
背景色以外は同じ指定なのに、それ以外の共通した指定までそれぞれに書いてしまっている例です。
OK例
共通部分をまとめて、違う部分だけを分けて書いた例です。
このように、共通部分と違う部分を分けて書くことで、コードがすっきり見やすくなり、あとから修正が必要になった場合も、一箇所修正するだけで済むので、管理もかなりしやすくなります。
変数でまとめるのも便利
少し慣れてきたら、 CSSカスタムプロパティ（変数） を使うのもおすすめです。
CSSカスタムプロパティとは、よく使う色や余白、角丸などの値に名前をつけて、まとめて管理しやすくする書き方のことです。
あらかじめ変数として定義しておくことで、あとから色や余白、角丸の数値の変更が必要になった場合も、この変数を一か所修正するだけで該当する箇所をまとめて変更できます。
たとえばこのように、よく使う色や角丸の値を変数としてまとめておくと、あとから色や角丸を変えたいときも、一か所修正するだけで該当する箇所をまとめて変更できます。
初心者のうちは、最初から何でも変数でまとめすぎようとしなくて大丈夫です。
まずはよく使う色や角丸など、繰り返し出てくるものから少しずつ取り入れていくのがおすすめです。
コツ④ cssプロパティの書く順番のルールを決めておく
CSSプロパティ の書く順番をある程度決めておくと、あとから修正するときに該当箇所を探しやすくなります。
※CSSプロパティとは、display や padding、color などの指定項目のことです。
書く順番に正解があるわけではありませんが、特に制作会社やチームなど、複数人で作業する場合は、書き方をそろえておくことで、誰が見ても分かりやすく、修正もしやすいコードになります。
私は、レイアウト → 余白 → 文字 → 色 → 見た目の仕上げ という流れを意識して書くことが多いです。
最初から細かくルールを決めすぎなくて大丈夫ですが、たとえば「レイアウト系を先頭に書く」「文字まわりはそのあとに書く」など、自分なりの順番を少し決めておくだけでも、あとからの修正で該当箇所の予想が立てやすくなります。
まとめ
見やすく整理されたCSSを書くためには、まずは基本を意識することが大切です。
今回ご紹介したように、まずは以下の4つのポイントを押さえるだけでも、コードの見やすさはかなり変わってくるはずです。
① インデントと改行を整える
② コメントアウトを増やしすぎない
③ 共通部分のCSSはまとめて書く
④ 書く順番のルールを決めておく
私自身、学校の課題などでコードを書く時は、正直そこまでコードを綺麗に書くことは意識していませんでした。ですが、会社に入ってからは、あとから修正や追加対応が入ったり、自分以外の人がコードをいじったりすることが増えたため、誰が見ても分かるように、見やすく整ったコードを書いておくことの大切さを実感するようになりました。結果的に作業効率アップにもつながっています。
最初から一気にすべてを意識しようとしなくても大丈夫です。できるところから少しずつ取り入れて、見やすく整理されたCSSを目指していきましょう。
