ITCSSとはなんでしょか？～逆三角形▼の秘密～

皆様、ご機嫌いかがでしょうか！私は本日も元気にCSSを書きまくっております。

CSSを書いていると、最初は「おっ、ちゃんと動いた！」「おっ、デザインもそれっぽくなった！」と順調に思えるのですが⋯⋯。

気がつけば、ファイルはぐちゃぐちゃに肥大化し、marginやpaddingがあちこちで乱立し、謎の!importantが増殖して⋯⋯。最後には、誰も触れたくない“地雷原”が完成してしまいます。よね？

そうした事態を防ぐために登場するのが、ITCSS（Inverted Triangle CSS）という設計手法です。

その名のとおり“逆三角形”をベースにCSSを整理する仕組みでして、学んでみると非常に理にかなっていることに驚かされます。

▼ 逆三角形の構造

ITCSSでは、スタイルを抽象→具体の順序で積み上げていきます。分類は次のとおりです。

1. Settings：色やフォントなど、プロジェクト共通の定数を定義します。
2. Tools：Sassの@mixinなど、再利用可能な仕組みをまとめます。
3. Generic：ブラウザ差異をリセットするCSSをここに置きます。
4. Elements：h1、p、aといった素の要素のデフォルトスタイルを整えます。
5. Objects：レイアウト、グリッド、コンテナといった「中身を意識しない箱」です。
6. Components：ボタンやカード、ナビバーといったUIパーツをここで定義します。
7. Utilities：.u-text-centerや.u-mt-20のような“ちょっと効かせたい”便利クラスです。

上から下にいくにつれて具体的になる。

つまり、抽象的な土台の上に、具体的な部品を積み重ねていくイメージです。

▼ オブジェクト指向のクラス設計に似ている？

ここで少し余談です。

ITCSSの構造を見ていて「おや？」と感じた方もいらっしゃるかもしれません。

そう、これはJavaなどのオブジェクト指向のクラス設計の書き方とよく似ているのです。

• 上の階層に「定数」や「共通の仕組み」があり、
• その下に「ヘルパーメソッド」が並び、
• さらに具体的な「publicメソッド」があり、
• 最後に詳細実装である「privateメソッド」が控えている。

このように、抽象から具体へ、共通から個別へと流れていく設計思想は、言語を問わず“きれいな設計”につながるのです。

CSSでもまったく同じ発想で整理できる――これがITCSSの面白さだと思います。

▼ ITCSSのメリット

一番のメリットは、破綻しにくいことです。

• SettingsやObjectsでベースが効くので、再利用性が高い。
• Utilitiesで「少しだけ余白が欲しい」といった調整も即座に対応できる。
• 「これはGeneric」「これはComponents」と分けるので、CSSが迷子にならない。

結果として、CSSが大きくなっても「どこで壊れたのか分からない」という地獄に陥りにくくなります。

▼ 他の設計手法との関係

CSS設計には、BEM（命名ルール）やOOCSS／SMACSS（設計思想）などの有名な考え方もあります。

これらはITCSSと対立するものではなく、むしろ組み合わせて使うと真価を発揮します。

ただし本記事ではあくまでTCSSの全体像にフォーカスしました。

BEMやOOCSS/SMACSSについては、改めて別の記事で取り上げたいと思います。

▼ まとめ

CSSがスパゲッティのように絡まり、更新するたびにヒヤヒヤする――。

そんな悩みをお持ちでしたら、ぜひ一度ITCSSを試してみてください！

抽象から具体へ、逆三角形のルールに沿って整理していくだけで、「おや、なんだかすっきりしたぞ」という感覚が得られるはずです。

そしてその思想は、あなたのコードに、拡張性と秩序を与えてくれるでしょう！