日本国内であまり言及のない CSS 設計手法である ITCSS(Inverted Triangle CSS)について基本情報を記述する。
TL;DR
- CSS の仕様上の問題点
- ITCSS とはどういうアーキテクチャなのか
- ITCSS が CSS の仕様に対して、どういうアプローチをしているか
日本国内であまり言及のない CSS 設計手法である ITCSS(Inverted Triangle CSS)について基本情報を記述する。
CSS の仕様(グローバルスコープや詳細度)により、スタイル定義は複雑化しやすく破綻しやすい。
CSS の定義において、ソースの記述順と詳細度は非常に重要である。これらの関係性が複雑になっていくと、既存定義を上書きするためにまた新しい定義をしていく必要がでてきてしまい、多くの無駄や冗長性が発生し、破綻してしまう。
── CSS を詳細度順で書く。
コードの記述順をいきあたりばったりで記述していくとする。そうすると、下記の図のように詳細度(山なりになっている箇所)が意図しない部分で現れていき、あとから対応をしていく度にコードの複雑さが増してしまう。複雑性が増したコードの場合、コードの末端で上書きしたつもりでもコードの先頭部分での定義の詳細度が強いケースなどもあり得る。
対して、コードを詳細度を意識した順番で記述していくとする。そうすると、下記のように当然詳細度は徐々に上がっていく形になる。あとから対応が必要な場合、別の場所の詳細度に影響を受けずに後述していけば良くなり、コードの見通しも良くなる。
大まかにいえば、ITCSS はこの詳細度での記述順を可視化するための枠組みである。
ITCSSは、CSS のための健全でスケーラブルに管理されたアーキテクチャである。
CSS のスタイル定義を詳細度の広い順に記述(階層化)することを提唱している。その記述が逆三角形として視覚化されるため、この呼び名となっている。
ITCSS には、デフォルトで下記の 7 つの種別(レイヤー)で分類する。
必要に応じてレイヤーを追加や削除ができる。
Settings
やTools
などのレイヤーを削除しても良いObjects
レイヤーを削除しても良いTheme
レイヤーを追加しても良いレイヤーの原則として、上位レイヤーを下位レイヤーが上書きできるような実装になっていなければ良い。そのため、プロジェクトに応じて必要なレイヤーを継ぎ足しすることも問題ない。
プリプロセッサなどで利用するグローバル変数や全体の設定を置く(SASS 変数や CSS Variables の定義)。
$font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
"Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
"Segoe UI Symbol", "Noto Color Emoji" !default;
$color-ui: #bada55;
$spacing-unit: 10px;
プリプロセッサで利用するmixin
やfunction
などの定義を置く。
@function str-replace($string, $search, $replace: "") {
$index: str-index($string, $search);
@if $index {
@return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index +
str-length($search)), $search, $replace);
}
@return $string;
}
@mixin font-brand() {
font-family: "UI Font", sans-serif;
font-weight: 400;
}
リセットスタイル(normalize.css など)や固有のリセットスタイル定義を置く。低詳細度、広範囲に当たる初期のスタイルを定義する。
@import "~normalize.css/normalize.css";
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
素の HTML 要素(a, h1…6, ul…li など)のスタイルを定義する。クラスセレクターなどは使用せず、要素セレクターのみで定義する。
ul {
list-style: square outside;
}
※ Base ではなく Elements という記述の資料もあるが、提唱者の資料をみると Base のようであった
OOCSS(Object Oriented CSS)の概念に基づいた定義をする。装飾を持たないレイアウトを定義する。
.ui-list {
margin: 0;
padding: 0;
list-style: none;
}
.ui-list__item {
padding: $spacing-unit;
}
名前の付けられた明確なコンポーネント(UI パーツ)を定義する。
.products-list {
@include font-brand();
border-top: 1px solid $color-ui;
}
.products-list__item {
border-bottom: 1px solid $color-ui;
}
ヘルパー・ユーティリティ系のスタイルを定義する。1 つの DOM にのみ影響するものに焦点を置いて定義する。明示的なスタイル定義(テキストの中央寄せ等)などスコープがもっとも狭い定義になる。
.one-half {
width: 50% !important;
}
最下層のレイヤーであるため、 ID セレクターや!important
の定義が許容される。