コードを書く時、時間がなくて、その場しのぎの書き方していまっていませんか？
私は、入社した当初、時間に追われてとりあえず完成させようと、適当なクラス名をつけたり、インデントがぐちゃぐちゃになっていたりしました。完成当初は、特にサイトの見た目に問題もなく、完成できてひと安心なのですが…。数ヶ月とか経ってクライアントから修正が入った時に痛い目を見るのは自分です。その場しのぎで命名したクラス名がなんだったか思い出せず、探すのに時間がかかったり、それぞれの要素に細かくサイズ指定をしていて、それぞれのサイズをいちいち修正しないといけなかったり…。時間がなくてもしっかりコードは書いておけばよかったと後悔することが何度もありました。
この記事は、あとからコードを見返しても迷子にならないようにするためのコードの書き方の基本とポイントを解説します。時間がなくてもしっかりとしたコードを書いておくことがあとからの自分を助けることにつながります。派手な裏技ではなく、明日から積み上げられる基本的なコードの書き方・整え方のコツについてご紹介します。
cssのクラス名の付け方
①見た目ではなく“役割”でクラス名をつける
クラス名は、.btnや.about-sectionなど見た目でなく、役割でつけるのが後で困らないようにするためのポイントです。
❌ 初心者がやりがちなミス：見た目で命名してしまう.red-btn や .left のように見た目をそのまま名前にすると、色や配置が変わった瞬間に混乱が起きます。「名前と実態がズレる」状態がいちばん怖いです。
デザイン（色、余白、角丸など）は、後から修正が入ったりして、変わってしまう可能性があります。
でも役割は、変わりにくいんですよね。だから役割で名付けておくと、見た目が変わっても名前が嘘になりません。結果として「どこを触ればいいか」が早く分かって、修正が本当にラクになります。
クラス名を付けるとき、私がいちばん意識するのは「この要素の担当は何？」です。
たとえばボタンなら“青いボタン”ではなく、“主要な行動を促すボタン”。カードなら“白い枠”ではなく、“記事を紹介する部品”。こんなふうに、見た目よりも役割に寄せるだけで、修正に強くなります。
②命名の“ルール”や“型”を固定化する
私も最初は、ページごとに名前がバラバラで、あとから見返したときに迷子になりました…。
そこで助けになったのが、厳密じゃなくてもいいので「部品・中身・バリエーション・状態」を分ける考え方です。
❌初心者がやりがちなミス：命名ルールがページごとにバラバラ
Aページは btn-blue、Bページは button_primary…みたいに揺れると、探すのが本当に大変になります。型を“ゆるく”でも決めておくと、迷いが減ってスピードも上がります。
たとえばカードという部品があって、その中にタイトルや本文がある。さらに影付きなどのバリエーションがある。クリックされてアクティブになる状態がある。
この整理が頭の中にあるだけで、クラス名が自然に揃いやすくなります。
③“数字・仮名”をつけない（あとから見返してもわかる名前にする）
制作中って、つい「とりあえず」で .box2 とか .wrap-a みたいな名前を付けたくなります。私も、納期が近いと普通にやってました。
でもこれ、時間が経つほど自分に返ってきます。
数週間後に修正が来たとき、「2って何？」「aって何？」となって、探す時間が膨らみます。修正って焦ってるときに来るので、ここでつまずくと地味にダメージが大きいです。
だから私は、迷ったら「日本語で説明できる名前」にするようにしています。
“これは記事カードのタイトル”って言えるなら、それがクラス名にできる、という感覚です。
初心者がやりがちなミス：数字で増殖していくbox1 box2 box3 が増えるほど、あとで整理できません。名前が意味を持っていないと、CSSの修正も怖くなって、結果的に上書きを増やしがちです。
散らからないCSS設計のコツ
共通と差分に分ける
CSSが散らかる最大の原因って、技術力というより「コピペの増殖」だと思っています。
忙しいときほど、似た見た目をとりあえず複製して作る。作る瞬間は速いんですが、修正で一気に破綻します。
なので基本は、共通の部分をひとまとめにして、違うところだけ後から足す、という考え方です。
ボタンなら「余白や文字の整え方」は共通にして、「色」だけ差分にする。カードなら「枠・余白」は共通にして、「影」だけ差分にする。
この分け方ができると、修正が入ったときに“直す場所が1箇所”になります。
初心者がやりがちなミス：似たCSSを丸ごと複製する
ボタンの色違いを作るたびに、余白や文字サイズまで全部コピーすると、余白変更だけで地獄になります。差分だけ分ける癖がつくと、修正漏れが減ります。
セレクタを強くしすぎない
CSSが効かないとき、つい「もっと具体的に指定しよう」として、階層を深くしたくなります。
でも、これをやるほど後から上書きが難しくなります。結果として !important を付けて、さらに混乱…というループに入りやすいです（私もやりました）。
❌初心者がやりがちなミス：効かない→階層を深くする→上書きできなくなる
最初は当たっても、修正で別のページに展開すると途端に扱いづらくなります。上書きしにくいCSSは、時間が経つほど触れなくなります。
私が今意識しているのは、「強く当てる」より「直しやすく当てる」。
つまり、なるべくクラス中心で、短く、シンプルに指定すること。
HTMLの構造が少し変わっても壊れにくいし、あとから別の状態やバリエーションを足すときも破綻しにくいです。
“状態”の置き場を決める
修正時にいちばん時間を奪うのが、「結局どれが最終的に効いてるの？」を追う時間です。
これが起きる原因のひとつが、状態のCSSがあちこちに散らばっていること。
❌初心者がやりがちなミス：上書きが別ファイルのあちこちに散る
「とりあえず今効かせたい」で別ファイルに追記すると、後で追跡不能になりやすいです。状態は置き場固定が強いです。
私は、状態（アクティブ・非表示・無効など）は“まとめて管理する”ようにしています。
どのファイルに書くか、どの位置に書くか、置き場が決まるだけで、探す時間が減ります。
ここが安定してくると、修正が本当に怖くなくなります。
コードの整え方のコツ
①インデントと改行で“構造”を見せる
読みやすいコードって、テクニック以前に「構造が見えるか」で決まることが多いです。
HTMLは積み木みたいなものなので、どこが親でどこが子かが分からないと、修正で崩れやすくなります。
インデントが整っていると、閉じタグのミスにも気づきやすいし、「このブロックを丸ごと移動したい」がやりやすい。
だから私は、忙しい時ほどインデントだけは崩さないようにしています。ここは投資効率が高いです。
初心者がやりがちなミス：1行に詰め込む／閉じタグが見えない
その場では動いていても、修正で崩れます。「構造が読めないコード」は修正のたびに怖くなります。
自動整形ができるようにするのがおすすめです。
整ったコードを書こうと思っても、忙しいと必ず崩れます。これは意思が弱いとかじゃなくて、現実的に無理です。
だからおすすめは、頑張らなくても整う環境を作ること。保存したら自動整形されるようにしておくと、書き方が多少雑でも一定の形に戻ります。
コードの読みやすさが“運”じゃなく“安定”になる感覚です。
私はこれを入れてから、チームでのレビューも通りやすくなりました。
②コメントアウトを増やしすぎない
コメントって、書けば書くほどあとで困らない…と思いきや、増やしすぎるとかなりコードが読みにくくなってしまいます。
私も最初の頃は、「一応メモしておこうかな」と思って、かなりコメントアウトを書いていました。
❌初心者がやりがちなミス：コメントが多すぎて逆に迷う
コードよりコメントのほうが目立つと、読むのに疲れます。コメントは“必要なところに短く”が長続きします。
今は、コメントは「探すための目印」と「注意点メモ」に絞っています。どこからヘッダーで、どこからメインで、どこからフッターなのか。ここはJSと連動してるから触らない、ここはCMS都合で固定、など。未来の自分が事故らないための最低限だけ置くのがちょうどいいです。
まとめ
私の経験上、「全部一気に完璧」は続きません。
なので、効果が出やすい順で積み上げるのがおすすめです。
まずはインデントと自動整形で、見た目の読みやすさを安定させる。
次に、役割で命名して迷子を減らす。
そしてCSSは、共通と差分・状態の置き場を決めて、修正が怖くない形にする。
この順で整えると、忙しい時でも崩れにくくなります。
