class名命名規則
誰もがつまずくであろう、スタイルシートのclass命名規則。未だに正解が分からずにclass名をつけてる人がいるだろう。
class名について調べても結局、抽象的な答えしか見つからない。ある程度の規則にそっていれば、あとは個人のやりやすういようにと。。
なぜ、抽象的な答えしかないのか。
理由は、プロジェクトごと、企業ごとに命名規則が、設けられていたり、独自の命名規則を採用している。また、
sassを使用できれば、BEM記法が定番であったりと、各環境が異なるため、一概にこの、class名の付け方が正解と言えないのです。
そこで今回は、class名をつけるのに困っている方に
・class名の付け方
・なにを意識しながら付ければいいのか
具体的な、答えを提示します。
＜想定読者＞ スタイルシートのclass名をつけるのに困っている人、始めたばかりの人
＜想定読者＞ コンポーネントの機能ごとに細分化してclass名をつけていない人
以下の理解が、まだだと感じた人は、以下を理解してから読み進んでください。
ずばりclass名はどうすればいいのか。
現在では、いくつかのclass命名規則が存在します。
しかし、規則が違っても、どの命名規則もコンポーネントの機能ごとに細分化を行い、その細分化したコンポーネントごとに、classを命名していくと言うことが理解できます。
この、「コンポーネントの機能ごとにclass名をつける」と言うことが、スタイルシートclass命名の迷いをなくす、最大のポイントです。
この、「コンポーネントの機能ごとにclass名をつける」と言うことができるようになればどの命名規則に直面しても、困る事はありません。
また、class名をつける際に、重要なのは
- 予測しやすい
- 再利用しやすい
- 保守しやすい
- 拡張しやすい
- コンポーネントでまとめる
・予測しやすい
予測しやすい、と言うのは期待どうりに振舞うかどうか、と言うことです。他のルールが影響して、記述したルール通りの振る舞いを見栄えにならない または追加したルールが他のルールに影響を与えることがないようにすると言うこと。
・再利用しやすい
スタイルがコピーアンドペーストされてふくらみ続けるCSSにならないためにも、再利用しやすいルールを持つ事は重要です。再利用しやすいルールと言うのは 抽象的で、機能ごとに分離されている必要があります。遭遇したuiデザインのマーックアップ、CSSを一度作れば、再度同じようなUIに遭遇した ときに、わざわざ書き直す必要がないようにするのが理想です。
・保守しやすい
新しいルールを追加、更新するときに既存のルールのリファクタリングを必要としない事が大事です。追加したルールによって、既存のルールを壊してしまうのは避けましょう。
・拡張しやすい
自分と、自分以外のプロジェクトに関わる開発者にとってメンテナンス・管理がしやすいものであると言うこと。
これらを、意識して細分化しclass名をつけてください。この意識は絶対にしてください。
そして、「コンポーネントの機能ごとにclass名をつける」と言うことを理解し、できるようになるまで、
『OOCSSの規則でclass名をつけてください。』
OOCSSを使用することで、オブジェクト思考でコンポーネントを簡単なclass名をつけるので、わかりやすくコンポーネントごとに細分化することができ
また、コンポーネントの機能を英語でclass名にするで、余計な事は考えずにclass名を決められます。class名を英語にするのに困ったらこちらを参照してください。
正しくコンポーネントごとに、細分化すると言う意識を理解していないのがclass命名で困る原因です。
OOCSSで行う理由は、コンポーネントごとにclass名をつけるのが一番容易であること、またコンポーネントごと細分化することに慣れることができることです。
そうすることで、class命名に困ることなくはなくなります。また、上記の五つの意識がOOCSSでできるように
なれば、どの規則にも細かい規則に気をつければ、応用ができます。
働いている会社が、BEM記法を採用しているから、BEM記法だけで行うのではなく、一度OOCSSで、class名をつける基礎を固めることが重要です。
そうすれば、今後class名をつけるのに困る事はないでしょう。
目安として、コーディング練習ができるデザインを配布している命名
することに、慣れました。是非この方法を試してみてください。
実際に、私は三回これをこなすことで、コンポーネントごとに、細分化しそれらに、class名をつけることに慣れました。
意識するのは、その各要素がなんの機能なのか、理解すること。スタイルを当てるためにclass名をつけることのないようにすること。
この理解ができていないと、よくないclass名をつけたり、class名をつけるのに時間がかかってしまいます。
最期に、もう一度言います。「コンポーネントの機能ごとにclass名をつける」これが本当に大事です。
まとめ
スタイルシートclass命名に困っていたら、OOCSSでコンポーネントの機能ごとに細分化し、それにclass名をつけていく。 コンポーネントごとに細分化することの大切さを理解する。 ただ、今回紹介した方法は、どの場面でも使えると言うわけではありません。そのとき、そのときでclass命名の規則は変わります。 どんな、状況、命名規則に遭遇しても困らないために、備えることのできる方法です。