ラブグラフのエンジニアの熊谷です。
8年以上同じリポジトリを運用していると、その時々色々な思いを持ってのコミットが積み上がってくるものですよね。そんな中、今回はCSSクラス名を気軽に統一していく開発ルールについて、書こうと思います。
結論
まずは結論からということで、弊社ラブグラフではケバブケースで命名を統一して運用していくことにしました。
背景
冒頭にも書きましたが、統一しようとしても色々な考えを持って命名されるケースもあり、統一されていなかったのが事実です。
とはいえ定期的にはBEMを意識した命名にしていこうと思いつつも、命名について思考する時間もかかりつつ、正しくBEMを使っていくのも難しかったため（レベルが高いチームにとっては全くハードルを感じないかもしれないですが）、運用しきれませんでした。
目指しているところ
コーディングに慣れていないメンバーも含めて、コーディングの時間を下げること。
つまり、直感的に命名できるというのをゴールにしています。
※ここで、プロジェクト全体で同名のクラス名が使われてしまう問題も出てきてしまいますが、弊社では次項にあるページ単位で適用されるファイルを分けることによって、基本的にコンフリクトが発生しないようにしています。
基本的なファイルのフォルダ構成
ここで弊社の開発環境について軽く触れておきます。弊社は Ruby on Rails でアプリケーションを作成していて、CSS も基本的にはコントローラー名&アクション名を元にページごとのスタイルを書いていくようにしています。
※CSSと言っていますが、記法はSCSSを利用しています。
レイアウトファイルの body タグの attribute に、コントローラー名とアクション名を追加しています。
以下の例を参考
<body controller="CONTROLLER_NAME" action="ACTION_NAME">
<div>Content...</div>
<body>
個別の scss ファイルは基本的に
body[controller="CONTROLLER_NAME"][action="ACTION_NAME"] {
// ここにCSSを記載
}
で囲って、他のページに影響がないようにしています。
共通化はなるべくおこなっていない
こうしてページごとに、CSSファイルを分けていると共通化できないのでは？という疑問が出てきますが、ほとんどの場合、共通化はおこなわない方針で実装を進めています。
一見デメリットに見えるかもしれませんが、toCサイトを運営していくにあたって共通化して進めていっても、細かい施策変更を加えていくケースが多く、共通コンポーネントを使っていても各ページで独自スタイルを上書きするケースが多かったのが実状です。
一般的な命名、設計手法の一例と個人的な所感
ここでよくある設計手法の選択肢と、それぞれについての私の所感を振り返ります。
-
BEM に関して
どこまでが Block なのか Element なのか結局命名が難しいなと感じています。社内で一度勉強会を開いたのですが、なかなか理解が進みませんでした。 -
OOCSS
意識していませんがこのブログを書くに当たって色々記事を見ていると、OOCSSが近いのかもと思ってきました。
ケバブケースでの統一のみで運用していく背景
なによりもクラス名に対して「悩む時間を短くする」ことが一番だと思っています。それに加えて、新規にアサインするエンジニアにとっても馴染みのないCSS設計手法をインプットする必要もなく運用できると思っています。
まとめ
これまでつらつらと話して来ましたが、ルール決めにはなんといってもチームの状況と方針次第であるということ。が大前提にあると思っています。
コーディングチームが独立してある状態などでは、思い切って厳格に管理していくのも素晴らしいと思っています。
皆さんも素敵なCSSライフを送ってください。
読んでいただき、ありがとうございました。
Discussion