CSSのclass名を連番にするメリット・デメリット

「プログラムで最も難しいのは命名である」

とは、誰かが言っていた言葉ですが、実際に私も心底共感しており、特にCSSのclass名の命名では苦労してまいりました。

一旦現時点の答えとしては、数値連番を最適解としております。

その考えに至った経緯や、命名の仕方におけるメリット・デメリット等を語らせて頂きたいと思います。

数値連番でないclass名のメリット・デメリット

まずは恐らく一般的であろう、英語でどの場所なのかがわかる書き方について。

「article」「wrapper」「inner」などなど。

といったところでしょうか。

たしかに、classを見ればどこを指定しているものかはわかりやすいですが、「名前を考える手間がかかる」ということと、ひょっとしたら追記した時に既存のclass名と重複してしまうのではないかという不安が私の中にはあります。

数値連番のclass名のメリット・デメリット

それに対して、反対のメリット・デメリットがある数値連番のclass名ですが、

といった点が挙げられます。

私が考える開発時の最重要事項：確認作業

ちょっと話は逸れますが、html／cssコーディングにおいて、私が開発時に最も大事だと考えていることを述べます。

それは、確認作業です。

・・・はい、そんなの当然ですね。

あるclassの内容を変更した際には、そのclassが使用されている箇所全てに表示異常が起きていないかを確認するべきです。

これを怠った場合、サイト内で原因不明の表示崩れが発生する可能性があり、どのタイミングで発生したのか遡って原因調査・修正を行わなければならず、余計な労力が発生します。

class名で用途がわかるからといって、変更に対して確認もなしにOKというわけにはいきません。

どちらにせよ、そのclassが使われている箇所を「検索」する必要が出てきます。

class名で意味が分かろうが分かるまいが、作業内容は変わらない

つまり、「該当箇所を調べて、実際に見なければならない」のだから、class名で意味が分かろうが分かるまいが、作業内容は変わらないのです。

なんなら、既存のクラス名とバッティングしないかどうかも事前に検索しないとわからないのだから、連番ならその確認の手間も省くことが出来るという利点があります。

この検索効率を上げるという意味で、数字連番のclass名に軍配が上がります。

ちなみに、数字連番のみだと、桁が枯渇する可能性がありますが（二桁連番であればアルファベット全種の26進にすれば26 * 26 -1 = 675個の連番が割り振れるが、これで十分かも不明）、連番に接頭辞をつけることで桁枯渇を防ぎます。

桁枯渇はいつになっても可能性は残されますが、桁が枯渇するなら接頭辞を変えれば済むし、その接頭辞自体は意味がわかるものにしておき、全く意味がわからない連番ではなく、ある程度規則性を持たせられればよいでしょう。

とはいえ

この意見は少数派かもしれません。

少なくとも、同じ考えの人がいるかどうか調べてみましたが、どちらかというと連番NG派の方が多かったようにも思えます。

また考えが変わったらその際はそう至った経緯を含めて綴りたいと思いますが、現状の私のclass名の命名ポリシーは以上の通りでございます。

-WEB