Rollpie は、ベースの上にたくさんのサブアプリケーションがのっています。
上図は Rollpie グラフ でサザエさんの人物関係図をつくったときのスクリーンショット。こうしたプログラムがいくつもあると、スタイルの衝突が心配になります。大量のクラスを管理するため、いくつかの独立したアプリケーションは「パスカルハイフン」というスタイルを使っています。
BEM では panel-header__basic-icon などとします。パスカルハイフンでは PanelHeader-BasicIcon となります。
- 形容詞や名詞の修飾はパスカルケースにする
- ハイフンで親子を示す
- ブロックとエレメントを区別しない（SUIT にしない、つまり、BEM における「エレメント」をキャメルケースにしない）
- 深さとハイフン数は関係ない
Rollpie はフレームワークを使っておらず、ベースのスタイルは BEM で管理しています。パスカルハイフンは「ベースでない」つまり「サブアプリケーションのスタイル」である印になります。
JS で CSS をコントロールする手法をとらず、新技術のスコープも使わず、しかもウェブコンポーネントも採用しない場合、グローバルにたくさんのクラス名がぶら下がります。すると app-panel-header__ といったプレフィックスつきのクラスがいっぱい生まれる。
panel-header
---> app-panel-header
パスカルハイフンといったイレギュラーな命名規則によって、メインから距離をとる特殊なコンポーネントは冗長なプレフィックスから解放されます。