「一生懸命書いたCSSなのに、
あとで見返すとどこを直せばいいか分からない……」
「一つのボタンの色を変えたら、
全然関係ない場所まで形が崩れてしまった！」
Web制作をしていると、
そんな「CSSの迷子」になってしまうことがよくあります。
実は、プロの現場では「クラス名（名前）の付け方のルール」
を決めることで、この混乱を防いでいるんです。
今日は、初心者の方でも知っておきたい
「コードを美しく保つ整理術」を3つご紹介します。
1. 「パーツを使い回す」賢い仕組み（OOCSS）
「形」と「色」を別々に名前をつけて管理する方法です。
「ボタンの形」というルールと
「赤い色」というルールを組み合わせて使うことで、
無駄なコードを減らし、レゴブロックのようにパーツを
組み合わせてページを作れるようになります。
2. 「見ただけで役割がわかる」厳格なルール（BEM）
「この名前は、カードの中にあるタイトルだな」と、
名前を見ただけでその役割が100%わかるように付ける
ルールです。
少し名前が長くなりますが、
複数人で作業をしても「誰がどこを直したか」が
はっきりするので、大規模なサイト制作では
欠かせない手法です。
3. 「引き出しごとに分ける」収納術（SMACSS）
「土台の設定」「全体の大枠」「部品」というように、
CSSの役割を5つのカテゴリーに分けて整理する方法です。
クローゼットの中を「靴下」「シャツ」「コート」と
分けるように、コードの置き場所をルール化することで、
修正したい場所がすぐに見つかるようになります。
💡 「名前」は未来の自分へのプレゼント
最初はルールを覚えるのが大変に感じるかもしれませんが、
一度身につけてしまえば、1ヶ月後の自分が
「なんて読みやすいコードなんだ！」と
感謝してくれるはずです。
「自分にぴったりの命名規則はどれ？」
「BEMの具体的な書き方を練習したい！」
そんな方は、ぜひ公式HPの「比較表」や
「チェックリスト」を参考に、今日からのコーディングに
取り入れてみてくださいね。
🏠 公式HPで「CSS命名規則の徹底比較ガイド」を見る
https://info-study.com/css-naming-conventions-oocss-bem-smacss/