2016年11月24日

新たなCSS設計思想 MOCSS の登場

UI開発者宇賀

現在もWeb技術の中でCSS設計手法は、幾度となく議論されています。そして、先日新たにMOCSS（モックス）という設計手法が誕生しました。

そもそも、CSS Modules、OOCSSやBEM、SMACSS、FLOCSSなどの設計手法が、なぜ必要なのか知る必要があります。

Webサイトや今流行のSPA（シングルページアプリケーション）はモジュールやJavaScriptウィジェットが集合して成り立っています。

WebサイトやSPAの作成中にモジュール間でCSSが競合したり、ウィジェットがウィジェットを侵食しないように、一定のルールが必要になります。複数のデベロッパーがそれぞれ違う思想でスタイリングを行ったり、クラスやidなどのセレクタ名を定義し始めてしまうと、完成した後の運用効率が著しく低かったり、いつまでもお互いのコードを上書きしあって完成しないなんてことにもなりかねません。

そのため、一貫したルールを持ち、誰が書いても規則がぶれにくい手法が必要とされてきました。

MOCSS

概要

CSS Modulesの考え方をベースに、BEM、SMACSSから影響を受けて誕生したコンポーネント志向のCSS設計
SassなどのCSSプリプロセッサが必須
コンポーネントに差異が出ることを前提とした設計

考え方

前提として、5つの基本原則が存在します。

Common（共通のスタイルや変数群が定義します）
Model（不変なスタイルの塊をmixinとして定義します）
Package（ページの種類のスタイルを当てるセレクタを管理します）
Component（コンポーネントのスタイルを当てるセレクタを管理します）
Page（ページ固有のスタイルを当てる一意なセレクタを管理します）

Commonのパーシャルで共通しているスタイルや変数を定義し、Modelのパーシャルでそれらの変数を使いながらmixinを定義します。さらにPackage、Component、Pageのパーシャルでそれらのmixinを使いながらCSSを設計していきます。

Sass

// 前提として、Packageの塊があります
.PackageName {
  // その中で用いられるコンポーネントを定義していきます
  .ComponentName {
    @include ModelName; // コンポーネントで用いる mixin を include します

    Property: value; // Packageに応じて必要な微調整を定義します
  }

  // 共通のPackageを用いていた場合でも、ページによって個別に調整したい場合があります
  // その際は、Package名にページの名前を定義することでセレクタの詳細度を上げて対応します
  &.PageName {
    .ComponentName {
      // その上でコンポーネントのスタイル調整を定義します
      Property: other value;
    }
  }
}

HTML

body要素など、rootに相当する要素に使いたいPackageセレクタを指定します。

<body class="PackageName">
<ul class="ComponentName">
<li>テキストテキストテキスト</li>
<li>テキストテキストテキスト</li>
<li>テキストテキストテキスト</li>
<!-- /.ComponentName --></ul>
</body>

ページ固有のスタイリングを行うには、Packageセレクタを持つ要素にPageセレクタを追加します。

<body class="PackageName PageName">
<ul class="ComponentName">
<li>テキストテキストテキスト</li>
<li>テキストテキストテキスト</li>
<li>テキストテキストテキスト</li>
<!-- /.ComponentName --></ul>
</body>

このように設計していくことで、コンポーネント間のスタイルの差異やディレクトリ、ページ単位で差のあるデザインを設計しやすくなるという考え方のようです。

誕生からまだ間もないため、サンプルソースなどはまだ無いようですが近日中に、簡単なサンプルコードをGitHub に用意したいとのことです。

案件規模にかかわらず、ページの種類（Packege）やページ単位（Page）でコンポーネントが管理されているため、複数の設計者が同時に開発を行う場合でも連携がしやすそうだと感じました。デザインを調整するための調整クラスなどをHTMLに記述せずに固有のレイアウトを実現できる点も運用効率を高めることにつながりそうです。

案件規模が大きくなればなるほど、PackageやPageの種類が増えていき、そのPackageやPageごとにコンポーネントであるModelもincludeされるため、その分共通CSSのコード量が膨大になりやすいというリスクもありそうですが、まるでコンポーネントをNodeJSのnpmモジュールのような感覚でincludeしながら設計していく考え方も直感的だと感じます。

強固さと柔軟さを兼ね備えた設計思想MOCSS、新しいCSS設計の概念を取り入れてみてはいかがでしょうか。

2016年の記事一覧に戻る