CSSレイアウトをする際にオススメしないクラス名やID名【With-D】

今管理しているサイトで使わないようにしているclass名やid名

タイトルの通り、使わないほうがいいと思われるclassとidです。つけ方はそれこそ人それぞれで好みなどがあるかとは思いますが、これは最低限運営するに当たってしといた方がいいよ。というのを書いてみたいと思います。

class="left"やclass="right"などの位置の名前

なんで？そのまま名前の通りでわかりやすいんじゃ？と思うかもしれないのですが、これちょっと効果的にいまいちだったし左右を入れ替えたいな。って思った時には非常に最悪です。classがleftなのに、視覚的には右側にあって...といった事になりかねません。なので私が管理する時は、mainとsubにしたり、contentsとmenuといった名前の付け方にしています

class="box"やclass="wrap"などの抽象的なボックス名

これは使いどころにもよるのですが、たまに新しく入ってきた方にコーディングまかせると、なんでもかんでも、box1とかbox2とかbox3とか使って、上から順に1,2,3ならいいんですが、途中で構成に修正入って、ソースの上からbox2,box3,box1といった順番になってたりして、どれがどれ？ってなりえるので、個人的には基本使わないほうがいいのでは？と思ってます。

逆に、共通で使う部分にはwrapといった感じで使ったりしますし、何かしら意味がある場合のboxだったりの使い方は全然OKだとは思うのですが、うえから順にとりあえずbox1,box2,box3といった感じだと後々しんどいことになるので、NGとしています。

clearのみを利用したクラスの作成

これは少しおまけ的な感じですが、floatを使った際にclearしなければいけない状況で、よくみんないろんなタグと絡ませてclearを使ってますが、個人的にはこれが大嫌いなため、というかclearするために無駄に空のdivを使ったり、brを使ったりするのはおかしいでしょ。ということで社内サイトでは禁止しています。

じゃぁどうすんの？と言われるので、とりあえずclearfixを使ってます。cssハックも本来禁止しているのですが（ハックなしでIE6以降、Firefox、Safariで正常表示がルール）clearfixのみ利用可能ということにしています。

とりあえず、もっと会社内では禁止しているというかなるべく使わないように。とルール付けしているクラス名などはあるのですが、いったん代表的なものを書いてみました。

もともと数人のデザイナーでサイト作ってたのですが、見事なまでにばらばらで統一のないclassになっていたので、こういうルールをつけて統一することで、更新する際には非常に作業時間が短縮することができました。

普段ブログなど、自分一人で管理しているだけなら、全部自分が作ったものなのですぐわかるのですが、他人が作ったソースなどは思っている以上にどれとどれが繋がってて...とhtmlとcssを見て編集しなければいけないので、大変だったりします。

私自身、本当に効率がいいのか？といわれると誰かの下でコーディングとかを習ったわけではなく、基本自己流だったりするので、こうした方がいい。とかいい効率を生めるclass名やid名のつけ方などご存知の方はぜひとも教えてください。