CSS(ITCSS)のための逆三角形アーキテクチャ

モジュラーCSSの概念は数年前に出現し始めた.CSSで働いている私たちのすべての開発者は、私たちのプロジェクトが成長し始めるとき、私たちのスタイルをスケーラブルで維持することの難しさに対処しなければなりませんでした.そういうわけで、我々の仕事をより簡単にするために、多数の方法論は現れました.これらの方法論はどんなライブラリや技術でも見つけられません、それらは私たちのCSSを組織するのを助けるためのガイドのより多くです.
最もよく知られているのはoocss(オブジェクト指向css),smacss(cssのスケーラブルでモジュラーなアーキテクチャ),bem(block,element,modifier),itcss(逆三角形css)である.
CSSアーキテクチャのコンセプトは、SASSやlessのようなCSSプリプロセッサの出現によって起こります.これは、異なるファイルをインポートし、他の機能の間で変数や関数を使用することを可能にします.この記事では、ITCSSアーキテクチャとプロジェクトで実装されるときに提供する利点に焦点を当てます.

ITCSSとは

それは、最適な方法で我々のCSSコードを組織するという考えで、ハリーロバによって開発されました.その名前は、ファイルが特定の重要性と重要性のレベルに従って層で組織される方法のため、CSSのために逆三角形アーキテクチャから来ます.

ロバ自身は以下のようにitcssを定義しています。

それはスケーラブルで扱いやすいアーキテクチャです.

哲学ではなく、図書館です.

プリプロセッサとは独立しています.

メタフレームワーク、フレームワークのフレームワークです.すなわち、他のフレームワークと共に使用するベースとなる.

その出現の主な目的は、私たちのプロジェクトのCSSファイルを整理し、このようにカスケードとセレクタの特異性に起因する問題を解決するためです.以下のグラフを見ると、正しい方法に従わないCSSプロジェクトがどのように終わるかという考えを得ることができます.

私たちが一つのCSSファイルで我々のプロジェクトのすべての規則を見るならば、グラフのX軸の左側は始まりであるでしょう、そして、右は終わりです.私たちは、始めにあるルールがどのようにして最後にあるルールを優先しているかを見ます.一方、中央にいる他のものは最も重要です.要するに、私たちには、維持するのが複雑で、我々が加える新しい規則が特異性と直接対立しているコードがあります.
ITCSSの目標は、CSSファイルを階層化することによってボトムアップ特異性を達成することです.

特異性とカスケードの規則が非常に明確であるというのは本当です、しかし、我々が本当のプロジェクトに取り組むとき、我々はそれを混合物を見つけるとわかります!重要でネストすることは、新しい規則を適用することが問題であり、我々のアプリケーションが保守できないことを意味する.
したがって、私たちは、CSSの各部分は、どちらが前にあるか、そして、それがどれであるかについてわかっている必要があるとわかります.言い換えると、依存関係が作成されます.結局、CSSは依存関係の巨大な木です.
これらの問題を解決するには、次の手順を実行します.

多くの人々のための健康でアクセス可能な環境.

は、コードとカスケードの順序を制御し、調整することができます.

古いものと新しいものが共存する場所を作る.

は冗長性を減らす.

は、特異性に関して戦争を終えます.

そして、これらはITCSSが生まれた原則です.では、これがどのように達成されたかを見てみましょう.

構造

上位層で定義されたコードは下層で定義されたコードよりも大きな影響を与えます.したがって、上層は下層に影響するが、他の方法では決して影響しない.下層は、その上司のスタイルを継承する.

-設定.これはプリプロセッサを使用するときに変数が定義される場所です.CSSを生成しません.

$main-color: #6834cb

ツール.プリプロセッサを使用する場合、このレイヤーで関数とミックスが定義されます.前のものと同様に、CSSを生成しません.

@function sum($numbers...) {
  $sum: 0;
  @each $number in $numbers {
    $sum: $sum + $number;
  }
  @return $sum;
}

-ジェネリック.これは一般的なコードを指します.そして、それはブラウザのベーススタイルをリセットするか、標準化するのに役立ちます.たとえば、リセットされたCSSまたは正規化はここに行きます.

* {
  padding: 0;
  margin: 0;
}

-要素HTMLタグに影響する規則

h1 {
  color: $main-color;
  font-size: 24px;
}

-オブジェクト.オブジェクト、すなわちプロジェクト全体で再利用可能な汎用クラスです.例えばコンテナ.

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto auto;
}

-コンポーネント.コンポーネントは、オブジェクトとは異なり、インターフェイスの特定の部分です.コンポーネントの例は、検索バーまたは我々のアプリケーションのヘッダーです.コンポーネントの定義スタイルは、そのコンポーネントにのみ影響します.

.search-bar {
  background-color: $pearl;
  color: $light-grey;
  font-size: 22px;
}

トランプ.この層は、また、ユーティリティと呼ばれて、前の層で定義されるどんな他の規則も覆すすべてのそれらの規則を含みます.それは唯一の層です!重要です.例では、ディスプレイを使用して要素を隠すことができるクラスがあります.

.d-none {
  display: none!important;
}

プロジェクト内の構造

SSSをCSSプリプロセッサとして使って、プロジェクトを構築すると仮定しましょう.

-インポート付きフォルダ.これは特に、いくつかの人々が働くときに、特に個々のITCSS層のためにファイルを組織化するのに使用するのが好きである何かです、それで、我々はよりよく我々のコードを見つけて、どこでインポートするために新しいファイルを加えるべきですか.ただし、このフォルダを省略することができます.

つのCSSでコンパイルされ、アプリケーションが使用するすべてのインポートを持つメインファイルです.インポートフォルダ内のレイヤーによるインポートを行ったので、これは非常に軽く、クリーナーであり、ここでファイルを追加することを心配する必要はありません.

別のファイルにインポートされたフォームで使用されるファイル名はアンダースコアで始まり、区別することが容易になります.

結論

そして、これはITCSSアーキテクチャの後のプロジェクトの構造がどのように見えるかです.Vueや反応で作られた小さなプロジェクトでは、その実装ではあまり使われていないかもしれませんが、大きなプロジェクトでは数人の人が動作し、スケーラブルである必要があります.また、いくつかのプロジェクトに共通する独自のライブラリを作成したい場合は、非常に便利です.
最後に、ItCSSは他のフレームワークを含んでいます.また、BMITが登場していても、それは、BESSの共同使用であり、両方の利点を高めています.しかし、これは別の記事のトピックです.

面白い関連

深さでITCSSを説明しているハリーロバーツによる話:https://vimeo.com/114965689