CSSの命名規則　BEM・OOCSS・SMACSSについて調べてみた

こんにちは、ちゃるです😀

今日はCSSの命名規則について、BEM・OOCSS・SMACSSについて調べてみました！
気まぐれでクラス名をつけていると複雑なWebサイトでは管理しづらくなってしまいますよね。それを防ぐためにクラス名にもルールを決めて運用するというのが命名規則です。

BEM

BEMは、Block, Element, Modifierの略で、WebサイトやWebアプリケーションのデザインやマークアップに使用される命名規則の一つです。この命名規則は、HTMLとCSSを組み合わせる際に、見通しのよいコードを書くために用いられます。

　BEMでは、WebサイトやWebアプリケーションのページを構成する要素を、ブロック、エレメント、モディファイアの3つに分類します。

　・ブロック：ページ全体を構成する大きな枠組みを指します。例えば、ナビゲーションバーやサイドバーなどがこのカテゴリに属します。

　・エレメント：ブロック内に存在する、より小さな単位を指します。例えば、ナビゲーションバー内のリンクやサイドバー内のボタンなどがこのカテゴリに属します。

　・モディファイア：ブロックまたはエレメントの状態や外観を変更するための修飾子を指します。例えば、ナビゲーションバー内のリンクがアクティブであるかどうかなどがこのカテゴリに属します。

　BEMに基づいて名前を付けることで、HTMLとCSSをよりわかりやすく書くことができます。例えば、ナビゲーションバーを表すブロックは「nav」、ナビゲーションバー内のリンクを表すエレメントは「nav__link」、ナビゲーションバー内のアクティブなリンクを表すモディファイアは「nav__link--active」といった具合です。

BEMを使うことには、いくつかの利点があります。

　・HTMLとCSSのコードがわかりやすくなる

　・開発者が素早くコードを理解できるようになる

　・HTMLとCSSのコードが冗長になりにくくなる

　・保守がしやすくなる

　また、BEMを使うことには、いくつかの欠点があるとされています。

　・HTMLやCSSのクラス名が長くなる

　・クラス名が複雑になりがちで、読みづらくなる

　・新しいメンバーが慣れるまで学習コストがかかる

　BEMを使うことは、WebサイトやWebアプリケーションを開発する際に有用な命名規則の一つです。しかし、BEMを使うことには利点も欠点もありますので、その状況に応じて適切な方法を選択することが大切です。

OOCSS

OOCSSは、Object-Oriented CSSの略で、WebサイトやWebアプリケーションのデザインやマークアップに使用される命名規則の一つです。この命名規則は、CSSをより再利用性の高いものにするために用いられます。

　OOCSSでは、WebサイトやWebアプリケーションのページを構成する要素を、「オブジェクト」と呼ばれる単位に分類します。オブジェクトとは、Webページ内で再利用される部品のことを指します。例えば、ナビゲーションバーやサイドバーなどがこのカテゴリに属します。

　OOCSSに基づいて名前を付けることで、CSSのコードをより再利用性の高いものにすることができます。例えば、ナビゲーションバーを表すオブジェクトは「nav」、サイドバーを表すオブジェクトは「sidebar」といった具合です。このように、OOCSSを使うことで、同じようなスタイルを持つ部品は、同じクラス名を使いまわすことができます。

SMACSS

SMACSSは、Scalable and Modular Architecture for CSSの略で、WebサイトやWebアプリケーションのデザインやマークアップに使用される命名規則の一つです。この命名規則は、CSSをスケーラブルかつモジュラーに設計するために用いられます。
　SMACSSでは、WebサイトやWebアプリケーションのページを構成する要素を、「ステート」「レイアウト」「モジュール」「テーマ」の4つのカテゴリに分類します。

　・ステート：要素の状態を表すものです。例えば、ボタンが押された状態や、テキストフィールドがエラー状態などがこのカテゴリに属します。

　・レイアウト：ページ全体の構造を表すものです。例えば、ヘッダーやフッター、サイドバーなどがこのカテゴリに属します。

　・モジュール：ページ内で再利用される部品を表すものです。例えば、カードやタブなどがこのカテゴリに属します。

　・テーマ：サイト全体の外観を表すものです。例えば、サイトのカラースキームやフォントなどがこのカテゴリに属します。

　SMACSSを使うことで、CSSのコードをよりスケーラブルかつモジュラーに設計することができます。例えば、モジュールを表すクラス名は「module-」から始め、ステートを表すクラス名は「is-」から始めるなど、各カテゴリごとに異なるプレフィックスを使用することで、CSSのコードをよりわかりやすく書くことができます。

個人が持つ趣味のホームページならあまり必要ないかもしれませんが、仕事でWebサイト制作をするようになると必要な知識だと思います。あとで困らないように覚えておきたいですね。

サポートをいただいたらスクールに通ったり参考書を買ったりしたいと思います。支援をお待ちしています😀