はじめに
CSS設計で昨今非常に重要視され、多くのサービスで取り入れられている設計方法がSMACSSです。個人的にこのSMACSSを用いてCSS設計をすることがあったので、基本的な考え方や構造についてまとめてみました。
SMACSSとは
長期的にCSSを保守するための考え方に「HTMLの構造に依存しないCSS設計」というものがあります。これを体現しているのが、まさにSMACSSといえます。また、CSSをコンポーネントとして再利用できるものとして構築する概念です。
主な構造は以下の通りです。
- base
- layout
- module
- state
- theme
それぞれ非常に便利なもので、使い勝手が良いのですが、すべてがどのサービスにも使えるものではありませんので、各々サービスにあった使い方をみつけてください。
base
そのサービスやプロジェクト、サイトにおける要素すべてのデフォルト値を定めたものを管理する場所です。これまでのcssの考え方でいうと、reset.cssなどをここで管理します。
layout
header, footer, sidebar, containerのようなレイアウトに関するものを管理する場所です。
.l-header {
background-color: gray;
}
.l-footer {
background-color: black;
}
上記のように指定します。接頭辞の「l-」は、layoutファイル内で定義しているものであることを示すものです。こうすることで、誰がみてもわかりやすくcssを管理することができます。
module
ページを構成しているほぼすべてのコンポーネントがここで管理されることになります。例えば、ボタンや表、見出しなど再利用可能なコンテンツとしてcssを定義していきます。
state
layoutやmoduleの特定の状態を定義するものです。例えば、Javascriptなどで適用させていくCSSをここで管理します。
.is-hidden {
display: none;
}
layoutファイル同様、stateファイルでは、ここで定義していることを明示的に示すために、接頭辞として「is-」を使用します。
theme
こちらは、stateなどの一部分が変わるためのものではなく、そのページの内容、テーマ自体がガラッと変わるときのためにCSSを適用させたいものを管理する場所です。
こちらは、接頭辞として「theme-」を使用します。