HTML/CSS/SASS

ITCSSとは

 
マナビト
マナビト
こんにちはマナビトです。
普段はフロントエンドエンジニアとしてJavaScript/TypeScript/Aangular/GraphQLを
メインに開発業務を行なっています。

今回は、ITCSSについて記述していきます。

目次
  1. ITCSSとは何か？
    1. ITCSS 7つのレイヤー
  2. OOCSS（オブジェクト指向CSS）とは

ITCSSとは何か？

ITCSSとは一言で述べると、「CSSの詳細度を管理する設計思想」のことを指します。
ソースコードが膨大になる毎に、グローバルスコープや詳細度などCSSの仕様が複雑になるため、適切に管理していく必要があります。また、複数のプログラマーやデザイナーが同時に作業しながらソースコードを記載していく場合、そのソースコードが破綻しないように責務分割の粒度を設計者以外でも容易に理解し、共通のルールのを準備することが重要となります。ITCSSの設計手法を利用することで作業者はそれぞれの要素における責務を理解し、特定のルールに沿った実装を行うことが可能となります。

ITCSS 7つのレイヤー

ITCSSでは7つのレイヤーが定義されています。

CSS のスタイル定義を詳細度の広い順に逆三角形で可視化されます。
下のレイヤーに行くほど詳細度が高くなり、使用する箇所も限られてくることになります。

それではそれぞれの７つのレイヤーの特色を見ていきたいと思います。

Setting

Settingレイヤーでは主にグローバル変数など、プロジェクト全体で使用する設定をまとめます。

$base-color: #000;
$base-background-color: #eee;

Tools

@mixinやfunctionをこのToolsレイヤーで管理します。

@mixin navbar-colors($color, $link-color) {
    color: $link-color;
    background-color: $color;
}

@function calc-top($line-height-base, $font-size, $component-height) {
    @return (($line-height-base * $font-size) - $component-height) / 2; // vertical center of line-height
}

Generic

Genericレイヤーでは、normalize.cssやreser.cssといったデフォルトのCSSファイルの設定を記載していきます。

@import "reset.css";

* {
  box-sizing: border-box;

  &:before,
  &:after {
    box-sizing: border-box;
  }
}

Base

Baseセレクターでは、要素型セレクタをまとめて格納します。クラスセレクターは使用せず、h1 ~ h6やliなどが格納されます。

div {
    position: relative;
    top: 8px;
    line-height: 0;
}

ul {
    margin-top: 10px;
}

Object

OOCSSの概念に基づいたレイヤーです。プレフィックスに.o-が使用されます。余白や幅など装飾を持たないスタイルを定義していきます。次に記載するComponentsと比べて、明示的なクラス名はここでは適用しません。

 .o-footer {
    display: flex;
    align-items: center;
    border: 0;
}

.o-form-group {
     display: inline-block;
     padding-top: 0;
}

Components

装飾のスタイルを持つ再利用可能なコンポーネント（UIパーツ）を格納します。上に記述したObjectsレイヤーよりもより明示的なクラス名を適用します。Objectsレイヤーと同様にプレフィックを使用し、.c-が適用されます。

.ic-nput-group-text {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 15px 0 15px;
    border-color: transparent;
}

Trumps

ヘルパーユーティリティです。ここでは、IDセレクターや!important（1-0-0-0という最も高い詳細度を保有するインラインスタイルを上書きできる）を使用することができます。

.rounded {
    border-radius: $border-radius-large !important;
}

OOCSS（オブジェクト指向CSS）とは

OOCSSとは、ルールに沿って組み合わせることでモジュールを管理するCSS設計手法です。

  • ストラクチャーとスキンの分離
  • コンテナとコンテンツの分離

二つの原則に沿って、コードを管理します。OOCSSを導入することで、再利用性と拡張性を向上させることができます。

ストラクチャーとスキンの分離

ストラクチャーとスキンの分離は位置や大きさといった構造に関する要素と色情報など見た目に関する構造を分離することを目的としています。

<main id="main">
  <div>
     <button class="btn btn__green">Green</button>
     <button class="btn btn__red">Red</button>
     <button class="btn btn_blue">Blue</button>
  </div>
</main>

上記HTMLに対して、ボタンを装飾しようとした場合に、なんの手法も取り入れることなくとりあえず、コードを記載すると以下のようになります。

#main .btn__green {
    display: inline-block;
    width: 300px;
    max-width: 100%;
    padding: 10px 20px;
    background-color: yellow;
}
 
#main .btn__red {
    display: inline-block;
    width: 300px;
    max-width: 100%;
    padding: 10px 20px;
    background-color: red;
}
 
#main .btn__blue {
    display: inline-block;
    width: 300px;
    max-width: 100%;
    padding: 10px 20px;
    background-color: blue;
}

colort以外は共通化できそうなコードが多くありそうですね。プロパティを比較してボタンの構造（ここではwidthやdisplay）と見た目（background-color）の組み合わせで成り立っているというのが、「ストラクチャーとスキンの分離する」の考え方です。

「ストラクチャーとスキンの分離する」の思想を取り入れてみると以下のように書き直すことができるかと思います。

/* ストラクチャー */
#main {
    display: inline-block;
    width: 300px;
    max-width: 100%;
    padding: 10px 20px;
}

/* スキン */
#main .btn__green {
    background-color yellow;
}
 
#main .btn__red {
    background-color: red;
}
 
#main .btn__blue {
    background-color: blue;
}

ストラクチャーが共通化され、コードを短く記載できるようになりました。

コンテナとコンテンツの分離

「コンテナとコンテンツの分離」はモジュールをなるべく特定のエリアに依存させないという方針に基づいています。

上記コードを例に挙げると、id属性であるmainに依存することになります。この場合、mainエリア以外はこのコードを使い回すことができず、同じデザインを適用したい場合にとても不便です。そこで、「コンテナとコンテンツの分離」により、モジュールを独立させるようにします。

/* ストラクチャー (id要素であるmainを削除)*/
.btn {
    display: inline-block;
    width: 300px;
    max-width: 100%;
    padding: 10px 20px;
}

/* スキン */
.btn__green {
    background-color yellow;
}
 
.btn__red {
    background-color: red;
}
 
.btn__blue {
    background-color: blue;
}

こうするとで、ボタンデザインを他のエリアでも再利用できるようになりました。

【補足】CSSの詳細度について

ITCSSはCSSの詳細度を管理する概念ですが、その詳細度についても軽く触れておきたいと思います。

developer.mozilla.org
外部リンク
詳細度 - CSS&colon; カスケーディングスタイルシート | MDN

詳細度とは、与えられたCSSに適用される重みを計算するアルゴリズムのことを指します。競合するCSSに対して、その中からどのCSSを適用するかを決定します。

詳細度アルゴリズムは、3種類のセレクター（ ID、CLASS、TYPE） の分類で行われており、「ID - CLASS - TYPE」のように表記され、重みの 3 列の値で構成されます。該当するセレクターの詳細度の値が決定された場合、それぞれの列のセレクター成分の数を左から右に並べて比較します。

#myElement { 
　　color: green;
}
 /* 1-0-0  */

.bodyClass .sectionClass .parentClass [id="myElement"] { 
　　color: yellow; 
}
/* 0-4-0 */

myElementとbodyClassを比較すると、myElementはIDセレクターで構成されているため、詳細度は「1-0-0」となります。bodyClassの場合は、CLASSセレクターの４つで構成されているため「0-4-0」となります。

この場合、myElementの方が詳細度が高いことになります。より重要なのは左側の列ということですね。

詳細度を上書きする唯一の手段が「!important」を使用することで、先ほど述べた通りITCSSではTrumpsレイヤーでのみ記載が許可されています。

本日はここまでとなります。
最後までお読みいただきありがとうございました。

参考文献

ZOZO TECH BLOG
外部リンク
ITCSSを採用して共同開発しやすいCSS設計をZOZOTOWNに導入した話 - ZOZO TECH BLOG
Qiita
外部リンク
ITCSSまとめ - Qiita
Xfive
外部リンク
ITCSS: Scalable and Maintainable CSS Architecture - Xfive
RELATED POST