Enduring CSS 01

Enduring CSS

急速に変化する、長命のWebプロジェクトのためのスタイルを書く

前書き

中括弧の中のもの（プロパティ）のように、実際にはCSSを書くことに関する本ではありません。中括弧の外側の部分（セレクタ）、CSSの整理とアーキテクチャに関する本です。

小規模なプロジェクトでは嬉々として無視することができますが、実際には大規模なプロジェクトでCSSを書くのは最も難しいことです。

人々が「広範囲なCSS」や「大規模なCSSを書く」ことについて話すとき、記述の「広範囲」または「大規模」な部分に関連して、いくつかの指標をもつ可能性があります。

単純に大きなファイルサイズを持つCSSかもしれません。CSSの出力がたくさんあるので、そのコードを変更することは難しいでしょう。考慮すべきコードが多すぎます。

CSSは、それを使って構築されているUI（ユーザーインターフェイス）の複雑さのために、「大規模なCSS」と言えるでしょう。全体的なファイルサイズは１つ目の状況よりも小規模なCSSかもしれませんが、これらのスタイルでコード化された非常に多くのUIが存在する可能性があります。これらのビジュアルすべてに変更を適用する方法を検討することは問題になる可能性があります。

CSSコードに触れたり変更したりする可能性のある開発者の数が多いため、単に「大規模なCSS」である可能性があります。

または、それら上記すべてを含むこともあります。

問題の定義

Enduring CSSは、大規模なWebアプリケーションでCSSを書くために合理的なアプローチを定義する必要性から生まれました。

単なる「webページ」とは対照的に、何か「webアプリケーション」を作ることの定義は、双方に不和を生じさせるかもしれないので、今のところその判別は除いておきます。まずはシンプルに、CSSを書くためのアプローチが必要なシナリオについて考えてみましょう。

必要に応じて、ビジュアルコンポーネントが密集しているインターフェイスを考えてみましょう。スライダー、ボタン、入力フィールドなど…

さらに、このインターフェースが常に進化しており、急速に変化する必要があると考えてください。さらに、これらの変更は、毎日CSSコードに触れる必要がある多くの様々なCSS作成者によって行われます。

作成者の数が多いため多くの繰り返しにより、CSSは扱いにくくなります。一般に、このスタイルシートの混沌性は、複雑なアプローチの結果であり、著者とコードドキュメントの技術的理解のレベルが大きく異なります。

だから、私たちはCSSの繰り返しが難しく、推論が難しく、冗長性がどこにあるのか誰も分かっていません。最終的にスタイルシートの作者は、アプリケーションの他の部分に不本意な影響を与える恐れがあるため、コードを削除するという自信がありません。

大規模なCSSコードを継承したり、それを使うチームとして働いたりしたことがあれば、私は共感できることと確信しています。

したがって、基本的なニーズをいくつか定義しました。より簡単に言えば、これは新しいCSSオーサリング手法が解決しなければならなかった問題でした。ニーズの一覧は次のとおりです。

時間の経過とともに大規模なCSSコードを簡単に保守できるようにする

CSSコードの一部を残りのスタイルに影響を与えずにコードから削除できるようにする

新しいデザインを迅速に反映できるようにする

あるビジュアル要素に適用されたプロパティと値を変更しても、他のビジュアル要素に意図せず影響を与えてはなりません

どのソリューションでも最小のツールとワークフローの変更で実装する必要があります

可能であれば、WAI-ARIAなどのW3C標準を使用して、ユーザーインターフェイス内の状態変化を伝達する必要があります

次の章では、これらの問題をより具体的に見ていきます。しかし、重要なことを忘れてはいけません。

自分の問題を解決する

私が持っていた問題は、あなたが持っている問題ではなかったかもしれません。こうしたように、あなたはそれに応じてアドバイスとアプローチを調整する必要があります。あるいは、さまざまなアプローチや方法論によって要望がよりよく対処されるかもしれないと考えてください。ECSSは必ずしもすべての状況で最良の解決策であるということを、納得させることはありません。

例えば：

ECSSはスタイルを抽象化せず、特定のユーティリティクラスの束から要素のスタイリングを可能にします。あなたはを多くの支持者がいるOOCSSの執筆を読むべきです。

はい、途中で広告を入れました。次の章に進みましょう。

ここでは、大規模プロジェクトでCSSを扱う際の主な問題：具体的な要素、段階、隔離、セレクタを構造要素に結びつけてみます。