class名命名規則

誰もがつまずくであろう、スタイルシートのclass命名規則。未だに正解が分からずにclass名をつけてる人がいるだろう。

class名について調べても結局、抽象的な答えしか見つからない。ある程度の規則にそっていれば、あとは個人のやりやすういようにと。。なぜ、抽象的な答えしかないのか。
理由は、プロジェクトごと、企業ごとに命名規則が、設けられていたり、独自の命名規則を採用している。また、 sassを使用できれば、BEM記法が定番であったりと、各環境が異なるため、一概にこの、class名の付け方が正解と言えないのです。

そこで今回は、class名をつけるのに困っている方に
・class名の付け方
・なにを意識しながら付ければいいのか
具体的な、答えを提示します。

＜想定読者＞　スタイルシートのclass名をつけるのに困っている人、始めたばかりの人
＜想定読者＞コンポーネントの機能ごとに細分化してclass名をつけていない人

以下の理解が、まだだと感じた人は、以下を理解してから読み進んでください。

・class命名規則（BEM,OOCSS,SMACSSS、など）・コンポーネントの理解

ずばり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名をつけることに慣れました。

USAGI DESING

意識するのは、その各要素がなんの機能なのか、理解すること。スタイルを当てるためにclass名をつけることのないようにすること。
この理解ができていないと、よくないclass名をつけたり、class名をつけるのに時間がかかってしまいます。最期に、もう一度言います。「コンポーネントの機能ごとにclass名をつける」これが本当に大事です。

まとめ

スタイルシートclass命名に困っていたら、OOCSSでコンポーネントの機能ごとに細分化し、それにclass名をつけていく。コンポーネントごとに細分化することの大切さを理解する。ただ、今回紹介した方法は、どの場面でも使えると言うわけではありません。そのとき、そのときでclass命名の規則は変わります。どんな、状況、命名規則に遭遇しても困らないために、備えることのできる方法です。