CSSの命名規則で迷った話

命名規則大事

まあ時間がないときとか書き捨てとかだとてきとうにしてしまいがちだけど、時間があるときは、そして仕事のコードは自分がかくより読まれる機会が圧倒的に多くなるので変数の命名は非常に大事。で、プログラミング言語の命名規則の話はリーダブルコードとか各言語の慣習に合わせればいいと思うけど、CSS のときどうすればいいか迷った。普段あまりマークアップはしていない。

リーダブルコード ―より良いコードを書くためのシンプルで実践的なテクニック (Theory in practice)

いろいろ参考にする

ググって最初にヒットした

参考::CSSや画像の命名規則について｜Web Design KOJIKA17
ふむ。命名を考える上での基本的なカテゴリが参考になる。
ただしここにあるサンプルみたいな「company-photo-area-overview」みたいに4つまでつながるくらいなのは多分危険で、そこまでするなら構造から考えなおすかこの場合 area を消して短くしたほうがいいんじゃないかなとはおもった。たぶん hoge-moge-toge くらいの3つが最大値だと思う。まあベンダープレフィックスつくと -o-border-radius-right とかなるけど、それは別。(ちなみに Opera の -o- プリフィックスは Opera 12.01 くらいから -webkit- に吸収されてなくなっちゃいました……)

-(ハイフン)か_(アンダースコア)のどちらを使うべきか？という話

参考::API Only - Stack Exchange
この答えでは「Youの好きにしちゃいなYO」だけど、「IE6以前は_がだめだった」とかなんか歴史的な経緯があるっぽい？まああとはCSSでのタグが font-family とか - 区切りだったりするし、- で統一するのがいいのかなぁと思う。
まあ個人的には _ の方が補完がききやすかったり word 単位で削除が楽だし他の言語と統一するという意味でも _ で区切るほうが好きではあるけど、仕方ないかなというところ。

グーグルではどうする？っていう話

参考::
「CSS Style Rules」ってあたりから読めばいいと思う。ここでは - 区切りですね。意味と属性を分けてかこうとか、参考になる。

TwitterBootstrop ではどうしている？っていう話

参考::Scaffolding · Twitter Bootstrap
ここも - 区切り。「ある状態の」「ある要素」とかいろいろわけてる。参考になる。

で

どうすればいいんだろってのは場数こなしながらマークアップしないとよくわかんないけど、とりあえず - 区切りにするし、 - は3つまで程度の構造と意味を考えようかナァとは思った。マークアップエンジニアってたいへんダナァ。