SMACSS: CSS-Overview_html/css_WEB-ITnose に関するベスト プラクティス

SMACSSとは何ですか?

SMACSS（「スマックス」と読みます）は、Scalable and Modular Architecture for CSSの略称です。名前が示すように、SMACSS は拡張可能なモジュール式 CSS アーキテクチャです。これは CSS フレームワークではなく、CSS 設計のガイド、ベスト プラクティスです。 SMACSS は、開発者が CSS コードをより適切に開発および保守できるように、統一された CSS 開発方法を標準化することを目的としています。

ソフトウェア システムの場合、使用する言語やプログラミングのアイデアに関係なく、再利用可能、スケーラブル、保守可能など、常に同じ要件がいくつかあります。小規模なプロジェクトの場合、問題点は明らかではありません。しかし、プロジェクトの規模が大きくなるにつれて、再利用、拡張、保守が困難になるという問題点がますます増大しています。現時点では、優れたアーキテクチャが非常に重要です。 SMACSS は、再現可能、拡張可能、保守可能であるという目的を達成するために、より良いモデルで CSS を設計および開発するのに役立ちます。 SMACSS は、オーバーエンジニアリングを心配することなく、あらゆる規模のプロジェクトに適しています。

現在、再利用性、拡張性、保守性の問題を非常にうまく解決する設計アイデアがあり、それがオブジェクト指向設計 (OO) です。多くの設計は OO プログラミングのアイデアを実装することに他ならず、SMACSS も例外ではありません。 SMACSS の主な内容を簡単に紹介します。

1. 分類 CSS ルール

どのプロジェクトでも適切な構成が必要です。計画や整理を行わずに CSS ルールをファイルに追加すると、後の開発やメンテナンスに重大な支障をきたします。

SMACSS の核心は CSS ルールを分類することであり、分類を通じて CSS ルールをさまざまなモードに分類し、各モードのベター プラクティスを定義できます。 SMACSS は、CSS ルールを次の 5 つのカテゴリに分類します:

1. Base
2. Layout
3. Module
4. State
5. Theme

多くの場合、CSS ルールのカテゴリを区別せず、すべての CSS ルールをまとめて記述します。 SMACSS のこの動作は、実際には OO でカプセル化とモジュール化と呼ばれるものです。カプセル化の利点は明らかです。 SMACSS は、カテゴリごとにベスト プラクティスを提案します。

基本ルール は、Normalize や Reset などの一部の CSS など、デフォルトの CSS ルールを指します。基本的に、基本スタイルとは、要素がページ上にあるかどうかに関係なく、次のように見えることを意味します。

1 html, body, form { margin: 0; padding: 0; }2 input[type=text] { border: 1px solid #999; }3 a { color: #039; }4 a:hover { color: #03C; }

レイアウト ルール は、ページのレイアウトを担当します。レイアウトには 1 つ以上のモジュールを含めることができます。

モジュールルールは、モジュール式の再利用可能なCSSルールです。メニュー、ポップアップ、製品リストなどです。

状態ルールは、レイアウトまたはモジュールの特別な状態、つまり非表示または展開を表しますか?アクティブか非アクティブですか?

テーマ ルール 名前が示すように、すべてのレイアウトとモジュールの外観と操作性を指します。もちろん、多くの Web サイトでは、Web サイトのテーマを追加するために Theme.css は必要ありません。

2. 命名規則を標準化する

命名規則を通じて、CSS ルールがどのカテゴリに属する​​かをすぐに知ることができます。大規模なプロジェクトでは、CSS ルールが多数のファイルに分割されることがよくあります。この場合、名前付けルールは、対応するファイルをすばやく見つけるのに役立ちます。

レイアウトルールでは、通常、接頭辞としてl-またはlayout-を使用します。状態ルールの場合は、通常、.is-hidden や .is-collapsed などの is- を接頭辞として使用します。モジュール ルールは CSS ルールの中で最も重要なタイプです。 module- をプレフィックスとして使用すると、冗長に見えるため、SMACSS ではプレフィックスを付けずにモジュール名を直接使用することをお勧めします。

/* Example Module */.example { }/* Callout Module */.callout { }/* Callout Module with State */.callout.is-collapsed { }/* Form field module */.field { }/* Inline layout */.l-inline { }

3. セレクターの作成に関する提案

SMACSS は、ブラウザーが CSS を解析する方法を簡単に紹介し、これに基づいてセレクターの作成方法とセレクターのパフォーマンスを最適化する方法について提案します。

この記事では、SMACSS の概要を説明し、読者が SMACSS について全体的に理解できることを願っています。 SMACSSの具体的な内容については今後の記事で公開していきますので、ご期待ください。