2017年03月1日(水)

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

• 0
• 48
• 0
• 1

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

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

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

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

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

・優れた命名法とは

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

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

ここで...