ブログ|静的志向

言語言語切替
日本語 English
サイト内検索

札幌在住のTakaによる静的htmlで作成したブログです。

素早く表示されるブログを作ることを目的として書いています。

cssの命名規則を自分なりに統一する

なぜか自作のjavascriptが読み込めない。なんでだろう?...と疑問解決のためググりまくってたところ、命名規則にはsnake,camel,ハイフンの3種類があることがわかりました。

命名規則の確認

今まで知らなかった!ということで、まずは3種類の命名規則についてです。

  1. ハイフン:ハイフン(-)を使う。font-size:などcssで登場
  2. snake:アンダースコア(_)を使う。php_get_template_part()などphpで登場
  3. camel:大文字を使う。document.getElementById()などjavascriptで登場

言語によって使われる命名規則が違うんですね~まったく気にしたことありませんでした。

camel

なおcamelとは英語でラクダのことです。大文字の部分がラクダのこぶに似ているのでしょう。

javascriptでハイフンは演算子

javascriptで変数やファイル名にハイフンを使うと、単語の区切りでなく演算子として扱われます。これを知らなかったせいで「なんでうまく動かないんだろ?」となっていました。

変数にハイフンを使うことはなかったのですが、ファイル名でもハイフンが含まれるとjavascriptは誤作動を起こすっぽいです。昨日はこれではまってしまった...

命名規則を統一したい

ハイフン,snake,camelをどう使うのか?が問題です。

まずjavascriptでハイフンは使えません。snakeかcamelの二択になります。

cssでは font-sizeなどでハイフンが登場します。ハイフンとアンダースコアは混在させたくありません。見間違える可能性があるからです。

したがってcssではハイフンとcamelの二択になります。

camelは読みにくい

javascriptとcssで共存させるなら、命名規則はcamelで統一するのが良いでしょう。

しかしjavascriptはともかく、cssまでcamelを使いたくありません。こんな可読性の低い方法はとりたくないのです。

じゃぁいっそのことアンダースコアで統一するのもありかな~って思いました。でもやっぱりcssにハイフンとアンダースコアを混在させたくありません。見た目が似ているものは排除したいのです。

どうしようかな~と悩んでいたのですが、結果は以下の通りになりました。

idのみcamelで命名しよう

私はjavascripでclass指定を参照しません。classよりもidでピンポイントで参照した方が個人的にはわかりやすいからです。

まぁjavascriptに慣れていないってのもありますけどね。

さて、そんなわけでjavascriptで取り込むcssはclassでなくidです。つまり「cssのidだけハイフンでなくcamalで命名しよう」ということにしました。

これなら今まで通りハイフンが使えるし、cssの名前の変更箇所はid属性のみとなります。

さらにjavascriptで変数を定義するときに、idの名前(mainAreaなど)をそのまま変数に名付けることができます。昨日やってみましたけど、これだと参照元と変数名が統一されるのでわかりやすいのです。

また「やっぱりハイフンでなくアンダースコアにしたい」と思ったときは、一括置換でハイフン→アンダースコアと処理すれば一発で完了します。逆もまた然りでアンダースコア→ハイフンの置換も可能です。

あとがき

ヘッダー内はidの連発だったので、変更処理が大変でした。もう二度とやりたくない!

↓鋭意制作中↓

ダイエットエラミカ

私自身の実践と経験に基づくリバウンドしないダイエットについて詳しく解説しています。

筋肉量31.4kg

BMI21.9 筋肉型スリム

元の用紙はこちら

↑このように私自身の体組成結果をすべて公開しています。現時点で2年以上のデータ、体脂肪率1桁の結果は21ヶ月連続で達成中です。

詳しくは「ダイエットエラミカ」よりご覧ください。

Sponsor Link

シェアしてくれると嬉しいです