コードを書く時、時間がなくて、その場しのぎの書き方していまっていませんか？
私は、入社した当初、時間に追われてとりあえず完成させようと、適当なクラス名をつけたり、インデントがぐちゃぐちゃになっていたりしました。完成当初は、特にサイトの見た目に問題もなく、完成できてひと安心なのですが…。数ヶ月とか経ってクライアントから修正が入った時に痛い目を見るのは自分です。その場しのぎで命名したクラス名がなんだったか思い出せず、探すのに時間がかかったり、それぞれの要素に細かくサイズ指定をしていて、それぞれのサイズをいちいち修正しないといけなかったり…。時間がなくてもしっかりコードは書いておけばよかったと後悔することが何度もありました。
この記事は、あとからコードを見返しても迷子にならないようにするためのコードの書き方の基本とポイントを解説します。時間がなくてもしっかりとしたコードを書いておくことがあとからの自分を助けることにつながります。派手な裏技ではなく、明日から積み上げられる基本的なコードの書き方・整え方のコツについてご紹介します。
cssのクラス名の付け方
①見た目ではなく“役割”でクラス名をつける
クラス名は、.btnや.about-sectionなど見た目でなく、役割でつけるのが後で困らないようにするためのポイントです。
❌ 初心者がやりがちなミス：見た目で命名してしまう.red-btn や .left のように見た目をそのまま名前にすると、色や配置が変わった瞬間に混乱が起きます。「名前と実態がズレる」状態がいちばん怖いです。
デザイン（色、余白、角丸など）は、後から修正が入ったりして、変わってしまう可能性があります。
でも役割は、変わりにくいんですよね。だから役割で名付けておくと、見た目が変わっても名前が嘘になりません。結果として「どこを触ればいいか」が早く分かって、修正が本当にラクになります。
クラス名を付けるとき、私がいちばん意識するのは「この要素の担当は何？」です。
たとえばボタンなら“青いボタン”ではなく、“主要な行動を促すボタン”。カードなら“白い枠”ではなく、“記事を紹介する部品”。こんなふうに、見た目よりも役割に寄せるだけで、修正に強くなります。
②命名の“ルール”や“型”を固定化する
私も最初は、ページごとに名前がバラバラで、あとから見返したときに迷子になりました…。
そこで助けになったのが、厳密じゃなくてもいいので「部品・中身・バリエーション・状態」を分ける考え方です。
❌初心者がやりがちなミス：命名ルールがページごとにバラバラ
Aページは btn-blue、Bページは button_primary…みたいに揺れると、探すのが本当に大変になります。型を“ゆるく”でも決めておくと、迷いが減ってスピードも上がります。
たとえばカードという部品があって、その中にタイトルや本文がある。さらに影付きなどのバリエーションがある。クリックされてアクティブになる状態がある。
この整理が頭の中にあるだけで、クラス名が自然に揃いやすくなります。
③“数字・仮名”をつけない（あとから見返してもわかる名前にする）
制作中って、つい「とりあえず」で .box2 とか .wrap-a みたいな名前を付けたくなります。私も、納期が近いと普通にやってました。
でもこれ、時間が経つほど自分に返ってきます。
数週間後に修正が来たとき、「2って何？」「aって何？」となって、探す時間が膨らみます。修正って焦ってるときに来るので、ここでつまずくと地味にダメージが大きいです。
だから私は、迷ったら「日本語で説明できる名前」にするようにしています。
“これは記事カードのタイトル”って言えるなら、それがクラス名にできる、という感覚です。
初心者がやりがちなミス：数字で増殖していくbox1 box2 box3 が増えるほど、あとで整理できません。名前が意味を持っていないと、CSSの修正も怖くなって、結果的に上書きを増やしがちです。
散らからないCSS設計のコツ
セレクタを強くしすぎない
CSSが効かないとき、つい「もっと具体的に指定しよう」として、階層を深くしたくなります。
でも、これをやるほど後から上書きが難しくなります。結果として !important を付けて、さらに混乱…というループに入りやすいです（私もやりました）。
❌初心者がやりがちなミス：効かない→階層を深くする→上書きできなくなる
最初は当たっても、修正で別のページに展開すると途端に扱いづらくなります。上書きしにくいCSSは、時間が経つほど触れなくなります。
私が今意識しているのは、「強く当てる」より「直しやすく当てる」。
つまり、なるべくクラス中心で、短く、シンプルに指定すること。
HTMLの構造が少し変わっても壊れにくいし、あとから別の状態やバリエーションを足すときも破綻しにくいです。
まとめ
私の経験上、「全部一気に完璧」は続きません。
なので、効果が出やすい順で積み上げるのがおすすめです。
まずはインデントと自動整形で、見た目の読みやすさを安定させる。
次に、役割で命名して迷子を減らす。
そしてCSSは、共通と差分・状態の置き場を決めて、修正が怖くない形にする。
この順で整えると、忙しい時でも崩れにくくなります。
