SMACCS（Scalable and Modular Architecture for CSS）はOOCSSをベースに作られたCSSを管理し、保守をしやすくするための設計原則の一つです。SMACSSはパターンを抽出しやすくするために下記のようなカテゴリを用意しております。
①Base（ベース）
リセットCSSや通常のHTML要素のスタイルを定義します。これはプロジェクト全体で共有されるスタイルです。具体的には初期化などで使用するreset.css,base.cssなどがあたります。
②Layout（レイアウト）
ページの大きなレイアウト要素を定義します。例えば、ヘッダー、フッター、サイドバーなどのセクションにあたります。これらのスタイルは、プロジェクト内の多くの場所で再利用される可能性があります。
③Module（モジュール）
プロジェクト内の小さなUI要素をモジュールとして定義します。例えば、ボタン、フォーム、カードなど。モジュールはプロジェクト全体で再利用され、スタイルが独立している必要があります。
④State（ステート）
インタラクションに関連するスタイルを定義します。例えば、ボタンのホバーやアクティブな状態、エラーメッセージの表示など。
⑤Theme（テーマ）
ウェブサイトやアプリケーションのテーマ切り替えに関連するスタイルを定義します。例えば、ライトモードとダークモードのスタイルなど。あまり、使用機会はないかもしれません。
SMACSSはこれらのコンセプトに従ってCSSを構造化し、プロジェクト内でスタイルの再利用性を高め、保守性を向上させます。こちらも無意識に使用している部分もありましたが、改めて、体型立てて考えていきたいと思います。
