フロントエンドエンジニア

CSSを5つのカテゴリーに分けて破綻させない設計手法SMACSSを紹介!

こんにちは、SHIBAKEN – @dec_shibaken – です

今回はCSS設計思想の一つである、SMACSSをご紹介させて頂きたいと思います。

煩雑化しやすいcssは、運用を想定すると最初からしっかりと整理しながら記述していかないと破綻しやすい作りになってしまうので、コーディングを担当される方は是非、ご参考の上SMACSSを是非活用ください!

  • Sassの知識が必要になります。あらかじめご了承ください!
  • BEMの設計思想を学んでおくことが前提になります。以下の記事を是非、参考にしていただければと思います。

そもそもSMACSSって?

SMACSS(Sclable and Modular Architecture for css)と言い、スマックスと呼びます。
CSSの設計手法の一つで、classを5つのカテゴリーに分けて、その考え方や、記述ルールを分けていく手法です。

個人的には、class名にプレフィックスをつけるところがポイントだなって思いました。

SMACSSが使う5つのカテゴリー

SMACSSでは役割を5つのカテゴリーに分けています。詳細は以下の通りです。

  • Base(ベース)
  • Layout(レイアウト)
  • Module(モジュール)
  • State(状態(ステート))
  • Theme(テーマ)

Base(ベース)

サイト全体、アプリケーション全体の基本となるもので、reset.cssやnormalize.cssのようなブラウザのリセットCSSなどを定義

body,div,pre,p,blockquote,
form,fieldset,input,textarea,select,option,
dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,
table,th,td,embed,object {
margin: 0;
padding: 0;
vertical-align: baseline;
}

 

Layout(レイアウト)

Layoutはページのレイアウトを構築するためのCSSです。ヘッダーやサイドバーがそれにあたります。またLayaoutに該当するクラスにはプレフィックスに「l-」をつけるようにします。

.l-header{
 width:100%;
 height:400px;
 margin:0 auto;
}
.l-main {
  width: 70%;
}
.l-footer{
 width:100%;
 height:400px;
 margin-top:0;
}

 

Module(モジュール)

モジュールは、ページを構成する個々のコンポーネント(部品)のことで、特定のページやレイアウトに依存しないような設計である必要があります。そうすることで、ページはより柔軟に設計できるようになります。

State(状態(ステート))

javascriptの操作でLayoutとModuleなどの見た目を変えるCSSで、プレフィックスで「is-」をつけるようにします。

.is-hidden {
  display:none;
}
.is-error {
  border:1px solid red;
}
.is-active {
  display:block;
}

 

Theme(テーマ)

プレフィックスで「theme-」をつけます。主にページ全体、もしくは一部の見た目をテーマ毎で分けるとき等に使われます。

.theme-border {
  border-color: #ccc;
}
.theme-background {
  background-color: #eee;
}

 

命名規則を考える時は必ずcss4つの定義

cssの設計手法を考える時に必要な4つの定義があるので、まずはそちらを紹介いたします。以下の通りです。

・予測しやすい(可読性)
・再利用しやすい(再利用性)
・保守しやすい(メンテナンス性)
・拡張しやすい(拡張性)

CSSの設計を破綻させない「良いCSS」にする為の4つ定義こんにちは、SHIBAKEN - @dec_shibaken - です これからマークアップを初めて行く人に、是非考えて読んでいた...

いかがでしたでしょうか?

5つのカテゴリーに分けてることによって役割の明確化は
洗濯物を畳んで、どこにしまうのか?・・
みたいなことと同じくらい、実は単純な整理方法だったのです

私も設計手法に悩んだら、とりあえずSMACSSにしていますし、プレフィックスで瞬時にカテゴリーを把握できるのは本当に便利だと思います。

是非ご参考の上、CSS設計思想をサイト設計に取り入れてみてはいかがでしょうか?

ありがとうございました!

フリーランス / ブロガー
SHIBAKEN
埼玉生まれ東京育ちの独身30代男。 都内の出版社でWebデザイナーとして就職。その後転職し、制作会社でフロントエンドエンジニアとして6年間従事。 現在は会社を退職し、フラリフラリと風に吹かれながらフリーランスとして現在に至る。

プロフィールの詳細はこちら
\ Follow me /