ワードプレス用に自作プラグイン作成してると、
ワードプレスのドキュメントに命名規則（コーディング規約）があり、
そこにハイフン（ - ）とアンダースコア（ _ ）の使い分けが書かれている。
ここでそのハイフンとアンダースコアの使い分けを整理しておくメモ。
※）URLにおけるハイフンとアンダースコアについては以下参照
URLスラッグ（パーマリンク）は「-」「_」のどちらが良い？理由も調べてみた
ワードプレスのコーディング規約
ワードプレスには４つのコーディング規約があり、
その中にあるハイフンとアンダースコアの使い分けの記述箇所のみ抜粋すると
以下のようになる。
| ワードプレスにある命名規則 | ハイフンとアンダースコアの使い分け |
| HTML コーディング規約 | （特に記載なし） |
| CSS コーディング規約 | 【セレクタ】：「ハイフン」 （アンダースコアは禁止） 例）#comment-form ※）アルファベット小文字を使う |
| PHP コーディング規約 | 【ファイル名】：「ハイフン」 【関数名】【変数名】【アクション名】 【クラス名】【定数】：「アンダースコア」 例）my-test-plugin.php ※）アルファベットの小文字 例） function func_name( $variable_name ) { … } ※）関数名、変数名、アクション名のアルファベット小文字を使う ※）camelCase は使わない 例）class Test_Category { … } ※）クラスの単語は大文字始まり 例）define( 'TAX_RATE', 1.1); ※）定数はすべて大文字 |
| JavaScript コーディング規約 | （特に記載なし） |
命名規則として定められているので、ワードプレスで自作プラグインを作ったりする場合にはこうした規則に従ったほうが良いのでしょうけど、気になるのがCSSのセレクタ。
単語と単語をつなげるには「ハイフン」を使い、「アンダースコアは禁止」となってます。
通常CSSでは、セレクタにアンダースコアもバンバン使うと思いますが
（CSSの命名規則で有名なBEMもアンダースコア使ってるし）、
ワードプレスのCSSの命名規則ではなぜかハイフンは使えてもアンダースコアは「禁止」とまでされてます。
「読みやすさ」のために、あえて「アンダースコア」は使わず「ハイフン」のみにそろえている、ということだと思いますが、色々調べてもなぜワードプレスのCSSの命名規約で「アンダースコアは禁止」となっているかまでは情報がないようです。
ということで、あくまで私の場合、となりますが、アンダースコアとハイフンの使い分けは、以下で良いのでは、としています。
- アンダースコア：
基本はアンダースコアを使う - ハイフン：
ファイル名にはハイフンを使う。
CSSのセレクタにも使ってOK。
アンダースコアとハイフンの意味合い
アンダースコア、ハイフンの違いって何か気になってを調べてみると、
各々異なる意味合いがあるようです。
（感覚的に、多分そうかな、となんとなく思っていたのと同じでしたが）
- ハイフン（ - ）：前後の単語を別々のものとしてつなげる
- アンダースコア（ _ ）：前後の単語を１つのものとしてつなげる
たとえば、以下のようにハイフンでつなげると、
切り離された単語が並んでいる、ということで、
「white-house」 では「white house」となって、白い家、
「grand-child」 では「grand child」となって、偉大な子供。
これを以下のようにアンダースコアに変えると、
「white_house」 では「whitehouse」となって、ホワイトハウス（米国大統領官邸）、
「grand_child」 では「grandchild」 となって、孫、
こんな風にとらえられる、ということになりますね。
だからだと思いますが、
ハイフン（ - ）で繋がっている単語をダブルクリックすると、
前後の単語１つしか反転しない。
でもアンダースコア（ _ ）で繋がっている単語をダブルクリックすると、
前後全てが反転し選択される。
細かい話になると思いますので、意味合いまで含めた使い分けは
あまり気にしなくても良さそうです。
