🍓

BEMとSCSSについて

2023/06/19に公開

はじめに

ポートフォリオ作成中のプログラミング初学者です🔰
まだまだ慣れなくて大変ですが、BEMとSCSSについて学んでいて、実践中のところです！

BEMとSCSSは、CSSをより構造的で、管理しやすく、再利用可能なものにするための強力なツールです。BEMとSCSSを組み合わせて効果的にCSSを書く方法について簡単にまとめてみました。

BEM（Block Element Modifier）
とは、コードを再利用可能で、可読性の高い形に構造化するためのCSSの命名規則です。
ブロック、エレメント、モディファイアという3つの部分から成り立っています。これにより、あるコードの役割と関連性が一目でわかるようになります。

SCSSとは
CSSのプリプロセッサで、CSSの機能を拡張してより効率的で可読性の高いコードの記述を可能にします。変数、ネスト、ミックスイン、関数などの機能が利用できます。

BEMとSCSSを組み合わせると、CSSの再利用性、可読性、メンテナンス性を大幅に向上させることができます。SCSSのネスト機能を活用してBEMのエレメントとモディファイアを視覚的にグループ化することで、その関連性を強調し、コードの見通しを良くすることができます。

BEMとSCSSを効果的に活用するためには、以下の点に留意することが重要です！

ネストの深度に注意する
SCSSでは深いネストが可能ですが、要素と修飾子のネストは1レベルに留めることが推奨されます。これにより、コードの可読性とメンテナンス性が保たれます。
@extendと@mixinsを活用する
これらのSCSSの機能を使って、共通のスタイルルールをまとめて再利用することができます。これにより、コードの重複を避けつつ、DRY（Don't Repeat Yourself）原則を守ることができます。
コンテキストに依存しないスタイリングを行う
BEMはスタイルの一貫性を保つため、あるブロックやエレメントのスタイルが置かれるコンテキストに依存しないことを推奨しています。SCSSを使う場合もこの原則を保つことが重要です。

大規模なプロジェクトでは、CSSの管理は複雑なタスクとなることがあります。SCSSを用いれば、CSSをモジュール化しやすい形にして、より管理しやすくすることができます。

SCSSの基本的なファイル構成を理解することが重要です。一般的には、以下のようなファイル構成を考えます。

意味のあるファイル名を使用する
ファイル名は、そのファイルの内容を明確に示すべきです。具体的なファイル名を使用することで、他の開発者（または未来の自分）がプロジェクトを理解しやすくなります。
一つの責任原則を守る
各ファイルは一つの責任を持つべきです。たとえば、components/ディレクトリ内の各ファイルは、特定のコンポーネントのスタイルを管理することを目的とすべきです。
共通のスタイルルールを抽出する
共通のスタイルルール（色、フォントサイズ、スペーシングなど）は、utils/ディレクトリ内の適切なファイルに抽出すべきです。これにより、スタイルの一貫性を維持しつつ、再利用性とメンテナンス性を向上させることができます。

BEMとSCSSは強力なツールであり、それぞれの特性を理解し組み合わせて使用することで、再利用性、メンテナンス性、可読性の高いCSSを書くことができます🙆🏻‍♀️

これらのツールは効果的に使用するためのベストプラクティスを守ることが重要です。その中でも、適切なネストの深度、共通スタイルルールの再利用、そしてコンテキストに依存しないスタイリングが特に重要です！