Web開発者のためのITCSSの紹介

いくつかの素晴らしい方法があります。 CSSコードの構築, そしてそれらはすべて異なる方法で動作します。最も一般的なものはOOCSSとSMACSSですが、あまり知られていない方法もあります。 ITCSS（逆三角形CSS） ハリーロバーツ作成.

ライブラリやフレームワークではありませんが、 コードの書き方 それはスケーラブルで操作が簡単です。 ITCSSの利点は、 単純なコード構成 ファイルサイズを小さくし、CSSアーキテクチャを深く理解する.

ITCSSは万人向けではありませんが、コーディングプロセス中にスタイルシートを明確に見るためのプロフェッショナルな方法を提供します。 ITCSSの背後にある概念を詳しく調べて、それらがWebプロジェクトにどのように適用できるかを見てみましょう。.

ITCSSとは?

最近のCSSの編成方法は、多くの場合、 モジュール化 または CSSオブジェクト 抽象的なアイデアを構築する.

逆三角形CSSの新しいアイデアは、 CSSプロパティを分割する階層的な方法 具体性と重要性のレベルに基づいて. SMACSSやOOCSSと比べてあまり知られていない方法です - 両方ともITCSSと組み合わせることができます.

ITCSSは 主に専有, その使用法に関する詳細なルールブックはありません。のみ 一連の特定の原則 私達の処分にあります。著者は以下のビデオでそれらについて話します.

デフォルトでは、ITCSSはOOCSSと同じ原則を使用しますが、 より大きな間隔で 特異性に基づく。あなたがOOCSSに既に慣れているのであれば、これはユニークなものと考えてください 代替CSSアーキテクチャ 試すために.

ITCSSを使用する最大の利点は次のとおりです。

ページオブジェクトは、独自のCSS / SCSSファイルに分割することができます。 再利用性. すべてのオブジェクトをコピー/貼り付けして拡張するのは簡単です。 他のプロジェクトへ.
特異性の深さは あなた次第.
あります セットフォルダ構造なし, そして、前処理ツールを必要としない.
CSSモジュールのような他の方法論からの概念を統合することができます。 独自のハイブリッドワークフローを作成する.

ITCSSシステム

次のLubos Kmetkoの投稿のイラストを使用して、逆三角形モデルがどのように機能するかを見てみましょう。.

逆三角形の平らな上部から下部の先端に向かう方向の流れは、 特異度の向上. この 特異性の低下に焦点を当てる サイト全体でクラスを複数回再利用するのが簡単になります。.

三角形の各サブセクションは別々のファイルまたはファイルのグループと見なすことができますが、そのようにコードを書く必要はありません。インポート機能のため、Sass / Lessユーザーにとってはより意味があります。のための方法論として各小節を考えてください 再利用可能なCSSコードの分割と整理.

簡単に見てみましょう 逆三角形の各セクション 上から下に動く.

設定 - プリプロセッサ変数とメソッド（実際のCSS出力はありません）
道具 - ミックスインと関数（実際のCSS出力はありません）
一般的な - Eric Meyerのリセット、Normalize.css、または独自のコードのバッチを含む可能性があるCSSのリセット
要素 - クラスなしの単一HTML要素セレクタ
オブジェクト - 通常OOCSS方法論に従ったページ構造のクラス
コンポーネント - すべてのページ要素をスタイリングするための審美的なクラス（多くの場合、オブジェクトクラスの構造と組み合わせて使用）
トランプ - 三角形の他のものを上書きするための最も具体的なスタイル

逆三角形の各層は ニーズに合わせて調整. したがって、CSSプリプロセッサを使用しないのであれば、SettingsまたはToolsレイヤは必要ありません。.

あなたはあなたが適当と思うように各小節を自由に解釈するべきです。例えば、Jordan Koscheiは、構造と美学をどのように組み合わせてオブジェクトクラスにしたかを説明していますが、Componentsセクションにはほとんど残っていません。.

ITCSSは 厳格な規則はありません あなたが従わなければならないこと。 ITCSS準拠チェッカーはありません、そしてこのモデルをわずかに変更したことに対して誰も叫ぶことはありません.

ITCSSの作成者Harry Robertsは、彼のメソッドを社内使用のために独自のものにしておくことに興味を持っていましたが、 ITCSSのオープンソースの例 このGitHubリポジトリで。これは、Harry Robertsの個人用WebサイトであるCSS Wizardryアカウントによってホストされています。.

BEM + IT = BEMITの命名

最も一般的なCSSの命名規則の1つはBEMです。これはBlock-Element-Modifierを表し、非常に特殊な構文に従います。.

BEMの各要素は、CSSクラスの命名規則を記述しています。

ブロック 複製して独立できる個々の要素のクラスです。.
要素常にブロックの一部です
修飾子 ブロックや要素を常にわずかに変更するように変更する（オン/オフ、アクティブ/非アクティブ、固定、静的、ハイライト/ニュートラル）.

BEMIT 命名規則です。 ITCSSによって採用された, ITCSSで新しいアイデアを実装しながらBEMからアイデアを借りる.

BEM構文は非常に具体的な規則を規定します。下記はBEM Webサイトのサンプルです。

.form  .form  - テーマxmas  .form  - シンプル .form__input  .form__submit  .form__submit  - 無効

ブロックには、区切りのない名前、または1つのダッシュまたは1つのアンダースコアで区切られた名前があります。要素は2つの下線を使用し、それらはその特定のブロックと一致する内部要素を表します。修飾子も同じように機能しますが、識別のために2つのダッシュを使用します.

このブログ記事では、HarryがBEMITをさらに詳しく調べています。彼の説明は非常に簡潔で、ITCSSの本質は以下のとおりです。 他のCSS方法論との相性が良い.

ハリーは定義します オブジェクトの名前空間 のように見える 各主要クラス名の接頭辞. 彼らは崩壊する ○- オブジェクト用, c- コンポーネント用 う- ユーティリティ用（clearfixやテキストの中央揃えなど）.

これを表すサンプルコードは次のとおりです。 典型的なBEMIT命名規則.

…

彼はまた使用することをお勧めします @ メディアスタイルに基づくクラスの接尾辞。だから .Oメディア クラスはに変わるかもしれません .o-media @ lg 大画面用 .o-media @ md 中型スクリーン用.

個人的には、追加の接尾辞は 基本的なWebプロジェクトには複雑すぎる. 私は、ほとんどの開発者が共通のメディアクエリを使用し、異なるブレークポイントでクラスを書き直すことを望んでいると思います。しかし、私はどちらの方法も正しいか間違っていると言うことはできません、そして誰もが彼らがBEMITを使いたいかどうかを個々に決めることができます.

ITCSSがなぜBEMを拡張したのか、そしてCSSクラスにどのように名前を付けたいのかについてもっと学ぶために、このイントロのBEMIT記事を読むことを強くお勧めします。.

ITCSSは次のようにまとめることができます。 組織的な方法 書くために 再利用可能でスケーラブルなCSS. BEMは推奨される命名構文であり、BEMIT これを機能拡張 より具体的でわかりやすいコードのための名前空間を使って.

学ぶべきことはたくさんあります。CSSを初めて使うのであれば、これは難しい概念です。しかし、もしあなたが学ぶ気があるのなら、ITCSSコードの洗練された性質に驚くことでしょう。.

まとめ

フロントエンド開発者は、常にワークフローを最適化しようとしています。 ITCSSは、複雑なWebサイトを構築するための改善された方法に貢献できる、もう1つの方法です。.

問題は、実際のプロジェクト作業でそれがどのように機能するかを学ぶことです。あなたが巧妙さを持っていて、そして学ぶために運転するならば、ITCSSはあなたのツールキットに加える価値があるかもしれません。私は公式の文書を見つけていませんが、ITCSSについて学ぶためのオンラインのリソースはまだたくさんあります。.

新しいCSSアーキテクチャーITCSSを使用して大規模Webプロジェクトを管理する （creativebloq.com）
ITCSSによるCSSプロジェクトの管理 - プレゼンテーションスライド （speakerdeck.com）
ITCSSによるCSSプロジェクト（1時間のビデオプレゼンテーション）
ITCSS - 大規模プロジェクトを編成するための興味深い方法 （css-tricks.com）

（speakerdeck.comのカバー写真）