CSSクラス名の簡単な付け方、見た目でつけるのはやめておけ

midashi_classname

CSSのクラス名の付け方って結構最初悩む方多いのではないでしょうか？

特に自分でこだわって作った我が子（見出し）にはカッコいいクラス名を付けてあげたくなっちゃいますよね。。

自分もその一人で、一生懸命画像を加工して作ったチェックボックスの見出し用クラスに「checkbox」ってスパッと命名しました。

が、こうゆう風に安易に見た目でクラス名を決めると後々困ることがある。。

まず、自分の作ったチェックボックスのCSSというのがコチラ。

headline_sanple

どんな記事かはさておき、どうです？まさにチェックボックスでしょう。

このチェックボックスをHPのあらゆる箇所で使用していたんですね。

ですがある日、ちょっとフラットデザインに寄せたいなと思い、こんな感じの見出しに変更しようと思いました。

headline_sample2

どうでしょう。結構イメージが変わってきますよね？背景が画面いっぱいに広がるだけのシンプルなデザインです。

ただ、ここで問題が起こります。

いままで使用していたCSSを変更するわけですから、CSS名はそのままに、クラスに適用していたスタイルを変更することになりますよね。

そうすると、

クラス名：checkbox

なんですが、全然チェックボックスじゃない、クラス名と全然違うスタイルになってしまう。ということに気が付いたんですよね…Oh God。。

結果としてすべての記事のHTMLに記述したクラス名を変更するという荒行が発生。

恐ろしく無駄な時間を費やすこととなりました。チーン

ピンポイントに使用するものなら見た目でクラス名を付けるのもアリと思いますが、サイト内で多用する可能性があるのであれば、もうh3midashi_1とかh3_headline1とかシンプルにつけるべき。

もしも特定のカテゴリの記事に適用するとか事前に「決め」があればh3_●カテゴリー名●でつけるのはギリギリセーフかな…でも、このクラスを別のカテゴリーにつけたくなる可能性もあるしね。

やっぱりクラス名には意味を持たせないほうがよさそう。

というのも、いろいろなワードプレスのテーマとか、テンプレートとかを見てきたけど、見出しにつけるクラス名は前者みたく意味を持たせていない場合がほとんど。

以下は大手サイトでのクラス名の付け方。こんな風になってました。。

やっぱり、どんな見た目のCSSか？じゃなく、HPのどこに使用するCSSか？で命名している。

ただ、あんまりクラス名をシンプルにしすぎるとテーマとかテンプレートに標準装備されているCSSとバッティングする可能性もあるのでそこは慎重に。

myheadingとか、文頭に抽象的な単語や、etc-h4みたく自分のサイト名の接頭語（英語3文字で表現した略称。WHOとかETCとか）なんかを入れておくと簡単。

挙動がおかしかったら逐一デベロッパーツールで確認するようにしましょう！

見出し名までこだわると大変なことになる。よくできたものならなおさら他の場所で使いたくなる可能性が高いからできるかぎりシンプルに。

というわけで、これからまた見出し付け替え作業の続きに戻りたいと思います。（コンヤガヤマダ…）

同じ失敗を犯さないようにしてくださいね。

ではみなさんごきげんよう！

プログラミンGOO