class/id の名前にハイフン区切りの文字列が使われているのはある程度歴史的経緯があります。

* CSS では、伝統的にプロパティの名前や擬似要素の名前などはハイフン区切りの文字列で統一されていました。
* CSS2 （CSS2.1 の1つ前の版）では、クラスセレクタ・IDセレクタの名前にアンダースコアを直に（エスケープせずに）含むことが文法的に許されていなかったのに対し、ハイフンは問題なく使用できました。
http://www.w3.org/TR/2008/REC-CSS2-20080411/syndata.html#tokenization
* HTML4.0 （HTML4.01 の1つ前の版）では、要素の属性としてアンダースコアを含む文字列を指定する場合、クォーテーションマークを省略することが許されていませんでしたが、ハイフンを含む属性値に対してクォーテーションマークを省略することは許されていました。
http://www.w3.org/TR/1998/REC-html40-19980424/intro/sgmltut.html#h-3.2.2

（ただし、 HTML4.01/CSS2.1 ではアンダースコアを含んでも良いように文面が修正されました。おそらく世の中のページではアンダースコアがバンバン使われており、ブラウザもそれを受け入れていたために規格が修正されたのだと思います）

記事の筆者の方は他のプログラミング言語と比較されているようですが、 CSS はもともと文法的にハイフン区切りの文字列を推奨するように作られていた節があります。少なくとも、私の知る限り、ハイフン区切りの文字列が文法的に許可されていなかったことはありませんでした。

こういう経緯を見る限り、 class/id の名前にハイフン区切りの文字列を使うのは当たり前の帰結のように思えます。古い規格とは言えど、あえて文法違反を犯す必要はどこにもないですから……