🔻

ITCSSのすゝめ

2023/11/10に公開

CSS

📩 この記事は

ITCSSを学びたてのフロントエンドエンジニアがアウトプットのために記載しています。
「ITCSS初めて聞いたなー」って人向けに内容をまとめたイメージです。

🏃 急いでいる人へのまとめ

ITCSSとはCSSの詳細度を汚染しないためのCSS設計思想
レイヤーという概念に沿って記載することで詳細度の汚染を最小限にできる

🔑 ITCSSとは

概要

CSS Wizardry のHarry Roberts氏により提案されたCSSの設計思想の1つ。
ITCSSは Inverted Triangle architecture for CSS の略で逆三角形のCSS構成という意味です。

プロジェクトの規模が大きくなっていくとCSSの上書きが多発し !important 祭りになってしまうので
はじめに広く汎用的なものを書いて段々局所的な部分の記載をすることでそれを防ぎましょうという考え方。
この形を逆三角形で表しているのでこの名前が付いているそうです。

詳細度とは

どのCSS宣言が適用するかの判断基準になるもの。
詳細度が高い方が適用されます。

とはいえ今回はCSSは後に記載したCSS宣言の方が詳細度が高いくらいの認識でOKです。
詳細度の詳細が気になる方はこちら↓

参考資料

公式サイトは https://itcss.io/ みたいですが、ドキュメントなどは記載されていないので
そこから飛べるX(旧Twitter)にあった動画とその時に使用されたスライドを基にまとめています。

併せて下記の資料も参考にさせていただきました🙇‍♀️

🥪 ITCSSにおける「レイヤー」

「はじめに広く汎用的なものを書いて段々局所的な部分の記載をする」をするためにITCSSには「レイヤー」という概念が存在します。
記載順と思っていればそんなにズレはないのかなと感じてます。

※ 画像は前述スライドより参照

レイヤー名	説明
Settings	フォントや色の変数定義
Tools	@mixin,function定義
Generic	reset系などの広い設定
Elements	HTMLタグに対する設定
Objects	デザインじゃない設定
Components	デザイン込みの設定
Trumps	上書き人員

上から順に記載していけば　「はじめに広く汎用的なものを書いて段々局所的な部分の記載をする」を満たせるというイメージです。

🔊 各レイヤーの説明

Settings

最も汎用的なものを記載するレイヤー。

Globally-available settings.
Config switches.
Brand colours, etc.

Sassにおける変数の設定などをここで行う。

$font-size: 16px;
$color-red: #ff0000;

Tools

Globally-available tools.
Public mixins.
Helper functions.

Sassにおけるmixinやfunctionの定義を行う。

@mixin button($bg-color, $text-color) {
  background-color: $bg-color;
  color: $text-color;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
}

@function calculate-width($container-width, $column-count, $gutter) {
  $width: ($container-width - (($column-count - 1) * $gutter)) / $column-count;
  @return $width;
}

ちなみに、SettingsとToolsはSassの変数・関数系をまとめているのでCSSファイルとしては出力しないらしいです。

Generic

Ground zero styles.
Low-specificity, far-reaching.
Resets, Normalize.css, etc.

reset系や広い範囲の設定はここのレイヤー。

/* リセットスタイル */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

/* 共通のボックスモデル */
*, *::before, *::after {
    box-sizing: border-box;
}

Elements

Unclassed HTML elements.
H1-H6, basic, links, lists, etc.
Last layer we see type selectors [e.g. a {}, blockquote {}].

HTMLタグのスタイル設定を行うレイヤー。
※ 以降のレイヤーはクラス名で指定する

/* 共通のフォントスタイル */
body {
    font-family: Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: #333;
}

/* 共通のリンクスタイル */
a {
    color: #007bff;
    text-decoration: none;
}

Objects

OOCSS.
Design patterns.
No cosmetics.
Begin using classes exclusively.
Agnostically named [e.g. .ui-list {}].

装飾されていないデザインを記載。
container系やレイアウト周りの設定する場所というイメージが近いかなと思います。
また、記載の通りクラスでの指定のみ許容されています。(HTMLタグやID指定はNG)

.container {
    margin: 40px;
}

.flex {
    display: flex;
}

OOCSSとは

CSSの設計思想の1つで Object-Oriented CSS の略。
「構造と見た目を分離しよう」「配置場所(コンテナ)と見た目(コンポーネント)を分離しよう」という考えのもと以下の様に記載するイメージです。
🚫

<h1 class="page-title">タイトル</h1>

.page-title {
  potision: abusolute;
  top: 0;
  left: 0;
  width: 300px;
  color: #ff0000;
  font-size: 20px;
}

✅

<h1 class="position-absolute t-0 l-0 w-300 red fs-20">タイトル</h1>

.position-abusolute {
  potision: abusolute;
}
.t-o {
  top: 0;
}
.l-0 {
  left: 0;
}
.w-300 {
  width: 300px;
}
.red {
  color: #ff0000;
}
.fs-20 {
  font-size: 20px;
}

公式サイトはこちら↓
http://oocss.org/

Components

Designed pieces of UI.
Still only using classes.
More explicity named [e.g. .products-list {}].

デザインを持つスタイルを記載。
ここに多くのスタイルが入ってくるイメージを持っていればOKかなと思います。

.button {
    @include button(#fff, $color-red);
    transition: transform 0.3s ease;
}

Trumps

Overrides, heplers, utilities.
Only affect one piece of the DOM at a time.
Usually carry !important.

最も局所的なものを記載するレイヤー。
何かに対する設定というより既にあてられているスタイルを上書きするものを書くイメージ。

.is-active {
  color: red !important;
}

🐥 お気持ち

はじめはネストを用いた記載などの提案かと思っていましたが、 CSSの記載順の目安 みたいな立ち位置だと認識してからは頭に入ってきやすかったです。

規模が大きくなっていくとComponentsでのネストの扱いどうするの??とかComponentで !important 使いたいなぁとかが出てくると思うので
そこは「フレームワークのフレームワーク」という言い方の通り、他の設計思想やコーディング規約と併せて各プロジェクトで確立していくと良さげだなという感触でした！