【次からすごく便利に！】スケーラブルCSSでの命名法について考える

あなたはスケーラブルなCSSでどのようにサイズの命名をしていますか？

スケーラブルCSSではパターンを作り、コードベースを越えてコンポーネントを使えるようにします。たとえばこちらのコードをご覧ください。

 

 

このパターンの再利用性を上げているのが修飾語（BEMのMにあたります）です。

この命名法ではスモールからラージまで明確に名前を付け、使い分けることができます。これを読んだ開発者はきっとこのクラスに気付き、CSSを遡ることなく何が起こるのかを理解できるでしょう。

 

この例は基本的なものでしたが、これを応用すれば様々な場面で同じ効果を期待できるようになります。

 

 

 

・優れた命名法とは

サイズに関する理想的な命名法は以下の条件を満たしています。

• ・名前に意味を持ち、何を表しているのかがわかりやすい。先の例ではスモール～ラージの表記で、CSSを探し回らずとも意味が通じる。
• ・覚えやすいもの。
• ・スケーラビリティがあるもの、つまりCSSが大きくなっても利用できるもの。

 

 

ここで次の例を見てみましょう。先ほどと同じような命名法を使いました。今度はどうなっているでしょうか？

 

 

それぞれの名前がしっかりと意味を持っています。

.o-media–spacing-largeと.o-media–spacing-smallを見比べれば、前者がより大きなスペースを持っているのがすぐに推測できます。また命名法も覚えやすく、CSSを探し回る必要もありません。

 

ただし、スケーラビリティも重要です。たとえば1年後、修正が必要になり今度はmargin-right: 50px;を利用したくなったとしましょう。largeより大きなこれを.o-media–spacing-extra-largeと名付けます。しっかりと意味のある名前です。ではこれを繰り返すとどうなるでしょう？

 

 

だいぶ複雑になってしまいました。.o-media–spacing-mediumはもはやミディアム、つまり中間ではなくなり、意味を失っています。これでも問題なく動きはしますが、雑然としています。

 

 

 

・サイズの命名をスケーラブルにする

ではスケーラブルな命名法とはどのようなものでしょうか？いくつかご紹介します。

1. 1.意味を犠牲にする

順序のある語句を入れることで、将来数が増えても対応できるようにします。今回はフォネティックアルファベットを使いましょう。

 

 

各クラスの名前から意味がなくなってしまいましたが、かわりにスケーラビリティは大きく向上します。大規模なサイトでは意味よりもスケーラビリティを優先する方がいいというのが個人的な考えです。

 

2. 2.接尾辞で対応する

 

 

名前の持つ意味が崩れないよう、番号をつけて対応します。名前がどんどん長くなる問題を解決することができ、名前の意味と順序も保たれます。ただ、やはりこれも完璧ではありません。

 

 

 

命名法には様々な考え方があります。何を優先するかで手法は大きく変わるでしょう。自分なりの命名法について考えてみてください。

 

 

 

※本稿は 「Naming Conventions for Sizes in Scalable CSS」を翻訳・再編集したものです。