CCSS（コンポーネントCSS）の導入

キーテイクアウト

• CCSS（コンポーネントCSS）は、大規模なWebアプリケーションのオーサリングエクスペリエンスを簡素化するように設計されたCSSアーキテクチャであり、保守可能で管理可能で、スケーラブルです。マークアップとスタイルが再利用可能なHTML要素にバンドルされるコンポーネントベースのWeb開発を促進します。
CCSSの主な原則には、小さく独立した再利用可能なコンポーネントの作成が含まれます。コンポーネントがモジュール化され、分離されていることを確認します。構成可能で予測可能なCSSを書く。すべてのCSSコンポーネントを明確に文書化します
• CCSSは、主にSMACSSおよびBEMの方法論に基づいて、特定のディレクトリ構造と命名規則を利用しています。また、CSSコンパイルやHTML検証など、一般的なタスクを自動化するためにGruntのようなタスクランナーの使用を促進します。
CCSSは、スタイルをモジュール化することにより、Webアプリケーションのスケーラビリティ、保守性、パフォーマンスを改善し、アプリケーション全体でスタイルが衝突するリスクを減らし、ブラウザがレンダリングされているコンポーネントのスタイルのみを解析できるようにします。 JavaScriptフレームワークと互換性があり、SASS、LESS、STYLUSなどのCSS前処理者と一緒に使用できます。
CCSS、またはコンポーネントCSSは、大規模なWebアプリケーションのCSSオーサリングエクスペリエンスを簡素化するアーキテクチャです。
• 大規模なWebアプリケーションには一般に多くのCSSファイルがあり、多くの場合、多くの開発者がこれらのファイルに同時に作業しています。非常に多くのフレームワーク、ガイドライン、ツール、および方法論（OOCS、SMACSS、BEMなど）が出現したため、開発者は保守可能で管理可能で、スケーラブルなCSSアーキテクチャが必要です。
フロントエンジニアとして、コンポーネントベースのWeb開発が今後の道だと思います。 Webコンポーネントは、W3Cを介して機能している標準のコレクションです。それらは、マークアップとスタイルを再利用可能なHTML要素に束ねることができます。これが意味することは、コンポーネントベースのCSS開発について考え始める必要があることです。ブラウザメーカーがこれらの標準を実装している間、その間に

ソフトカプセル化

を使用できます。

CCSSとは何か、そしてあなたがそれをどのように使用できるかを正確に見てみましょう。 CCSSの要素

以下は、CCSSアーキテクチャに最適な構成を実現するために完全または修正された方法で使用される主要な要素です。

smacss Jonathan Snookによって作成された SMACSSは、CSSのスケーラブルでモジュラーアーキテクチャの略です。これは、厳格なフレームワークというよりもスタイルガイドです。 CCSSがそれを使用するとき、構造の背景についてはSMACSSについて読む。

bem

Yandexの開発者によって作成された

BEMは、「ブロック」、「要素」、「モディファイア」の略です。これは、Webインターフェイスを開発する際の新しい考え方であるフロントエンドの方法論です。 Yandexの人たちはBEMを思いつき、より多くの情報をハリー・ロバーツの素晴らしい記事に記載しています。

sass

SASSは、超大国を持つCSSです。強くお勧めしますが、必要に応じて使用することもできます。詳細については、SASSドキュメントを参照してください

コンパス

コンパスにはクラスの定義はありません。これは、多くのユーティリティを提供するSASSの拡張機能です。一般的な便利なミキシンとSASSコンピレーションに使用されます。コンパスミックスインは、ベンダーのプレフィックスが必要な場合には、ほぼ

常に

を使用する必要があります。これもまた、優れたものであり、バーボンであり、最初の外観は素晴らしい選択肢です。 CCSSの原則

CCSSの主要な原則を見てみましょう

コンポーネントベース

再利用可能な小さくて独立したコンポーネントを書きます。再利用可能なCSSコンポーネントは、DOMツリーの特定の部分にのみ存在しないか、特定の要素タイプの使用を必要とするものです。必要に応じて、コンポーネントを再利用可能にするために追加のHTML要素を使用する必要があります。

モジュラーと分離

コンポーネントには、UIの特定の部分に必要なすべてのものがあり、単一の焦点が必要です。各コンポーネントは分離する必要があります。つまり、別のコンポーネントを直接変更または依存しないことを意味します。 再利用は依存関係や緊密な結合を増加させ、最終的にCSSの管理しやすくするため、コンポーネント全体でコードの再利用よりも分離が重要です。

composable

書くのに費やす時間を短縮することを目的とした方法でCSSを執筆する場合、スタイルを変更または追加するための要素のHTMLクラスを変更するのにもっと時間を費やす方法で考える必要があります。すべての開発者がCSS戦争と戦うよりもレゴブロックを組み立てるような場合、CSSを作成するのははるかに簡単です。 CSSクラスは、スタイルを構成するために使用する必要があるビルディングブロックです。

予測可能

予測可能性とは、cssを作成すると、予想通りにルールが動作することを意味します。これは、多くのページがある大規模なアプリケーションにとって重要です。過度に複雑なセレクターや一般的なクラス名を使用しないでください。これらは予測不可能なCSSにつながる可能性があるためです。

ドキュメント

ほとんどの人は、CSSが自明であると仮定しています。実際、これは通常そうではありません！ CSSコンポーネントには、それらが何をするか、どのように使用すべきかを説明する明確なドキュメントが必要です。

ディレクトリ構造

以下は、視覚化を容易にするためのディレクトリ構造の例です。また、CCSS Githubリポジトリにセットアップのサンプルを含めました。

styles
    ├── bootstrap.css
    ├── ext
    │   ├── bootstrap
    │   │   ├── _settings.scss
    │   │   └── bootstrap.scss
    │   └── font-awesome
    │       └── font-awesome.scss
    ├── font-awesome.css
    ├── images.css
    ├── main.css
    └── scss
        ├── _config.scss
        ├── base
        │   ├── _animation-classes.scss
        │   ├── _base-classes.scss
        │   ├── _base.scss
        │   └── images.scss
        ├── components
        │   ├── directives
        │   │   ├── _empty-state.scss
        │   │   ├── _legend.scss
        │   │   └── _status-message.scss
        │   ├── pages
        │   │   ├── _404.scss
        │   │   └── _redirect.scss
        │   └── standard
        │       ├── _alarm-state.scss
        │       ├── _graph-message.scss
        │       └── _panel.scss
        ├── main.scss
        ├── mixins
        │   ├── _animation.scss
        │   ├── _bem.scss
        │   └── _icon.scss
        └── themes
            └── _light.scss

上記のフォルダーツリー内のSCSS/フォルダー内のファイルのみを編集/作成します。これにより、外部ライブラリを簡単に更新できます。これは、ext/フォルダーにあります。多くのアプリケーションは、BootstrapやFoundationなどの外部CSSフレームワークから始まるため、Ext/内のサンプルセットアップに追加しました。しかし、すべてのCSSをゼロから書くことは絶対に問題ありません。上記の他のすべてがまだ当てはまります。

コンポーネント/ディレクトリの例は、AngularJSアプリケーションに適していますが、他のフレームワークまたはアプリケーション用にカスタマイズできます。詳細については、以下の「アーキテクチャ」セクションにあります

命名規則 - 簡略化されたbem

U-ClassName - グローバルベース/ユーティリティクラス

• img-className - グローバルイメージクラス
• Animate-ClassName - グローバルアニメーションクラス
• componentName - 標準コンポーネント（b）
• componentName-elementName - コンポーネントの要素（e）
• componentName - modifiername - コンポーネントのモディファイア（m）
アッパーメルケースコンポーネント名のスタイルに注意して、それがマスター要素であることを示します。これは、それがコンポーネントの

境界であることを示します

。要素名とモディファイア名は、それぞれ要素名と修飾名です。ファミン（ - ）を使用してコンポーネント名を分離しないでください。これらは要素/要素名の開始を意味します。 アーキテクチャとデザイン

CCSSによって奨励されているアーキテクチャを考えてみましょう

grunt

Gruntは、多くの一般的な雑用（CSSのコンパイルやHTMLの検証など）を自動化できる素晴らしいタスクランナーです。他のタスクランナーもあります。理想的なワークフローでは、開発中のファイルを監視し、変更が行われたときにCSSを再コンパイルするために1つを使用することが含まれます。

ファイル編成

SMACSSから派生したディレクトリ構造をもう一度調べます。すべての外部フレームワーク（Bootstrapなど）を含むExt/ディレクトリに注意してください。アップグレードを容易に保つために、これらを変更する必要はありません。代わりに、オーバーライドと拡張機能をベース/ディレクトリに配置する必要があります。

base/は、アプリケーション全体で使用されるグローバルベーススタイルを保持する場所です。

_base.scssは、要素セレクターのみのベーススタイルです。これらは、「CSSリセット」のようなものです

_Base-Classes.scssはすべて、多くのページ、ビュー、コンポーネントにわたってアプリケーション全体で使用されるユーティリティクラスです。 u-

を使用した接頭施設クラス名

画像.SCSSは、SCSSコンパイルソースとして使用されます。すべてのサイト画像をデータURIとして定義し、インライン化する必要があります。 /app/styles/images.cssは、このファイルから生成されます

_anime.scssは、アプリケーション全体のすべてのアニメーションクラスを保持しています

_BootStrap-Overrides.scssは、フレームワークのオーバーライドのみを保持します。フレームワークセレクターの特異性のレベルが非常に高いため、それらをオーバーライドするには長い特定のセレクターが必要です。グローバルレベルでのオーバーライドは、SCSSコンポーネントのコンテキストで行われないでください。代わりに、すべてのグローバルなオーバーライドはここにあります。

コンポーネント

上記の再利用可能なCSSの単位は、「コンポーネント」と見なされます。 Angularjsを使用しているため、View/Page、Directive、および標準の3種類のCSSコンポーネントに分類しました。したがって、SMACSから派生したディレクトリ構造

githubリポジトリのサンプルセットアップでは、明確にするために露骨なフォルダーを作成しました。アプリケーションが小さい場合は、1つのフォルダーに入れることができます。すべてのコンポーネントは、CamelCaseと組み合わせて修正されたBEMネーミング規則に従います。これにより、他のチームメンバーがBEMスタイルの構文をフォローするよう奨励することで、

が得られました。また、典型的なBEMスタイルを - 、 - 、および__文字で使用することから離れるとき、多くの混乱を回避しました。 また、コンポーネント内のCSSクラス定義順序がHTMLビューを反映することも重要です。これにより、クラスをスキャン、スタイル、編集、適用が簡単になります。最後に、Webアプリケーションのための広範なスタイルガイドを持ち、CSSとSASSのガイドラインに従うことをお勧めします（@extendを避けます）>

ccss例

CSSのサンプルセットアップについては、コードを参照してください。 のコンポーネントの例を次に示します

これは、次のCSSにコンパイルされます：

そしてあなたのhtmlは次のように見えるかもしれません：

styles
    ├── bootstrap.css
    ├── ext
    │   ├── bootstrap
    │   │   ├── _settings.scss
    │   │   └── bootstrap.scss
    │   └── font-awesome
    │       └── font-awesome.scss
    ├── font-awesome.css
    ├── images.css
    ├── main.css
    └── scss
        ├── _config.scss
        ├── base
        │   ├── _animation-classes.scss
        │   ├── _base-classes.scss
        │   ├── _base.scss
        │   └── images.scss
        ├── components
        │   ├── directives
        │   │   ├── _empty-state.scss
        │   │   ├── _legend.scss
        │   │   └── _status-message.scss
        │   ├── pages
        │   │   ├── _404.scss
        │   │   └── _redirect.scss
        │   └── standard
        │       ├── _alarm-state.scss
        │       ├── _graph-message.scss
        │       └── _panel.scss
        ├── main.scss
        ├── mixins
        │   ├── _animation.scss
        │   ├── _bem.scss
        │   └── _icon.scss
        └── themes
            └── _light.scss

参照セレクターを使用してこれを達成し、 @at-Rootよりも単純なSimplied BEM Mixinを参照できます。 SASS 3.3でBEMを使用することがずっと簡単になりました。これにより、理解しやすいメンテナンス可能なコードを書くことができます。

<span>.ProductRating {
</span>  <span>// nested element
</span><span>  <span>@include e(title) {</span>
</span>    <span>...
</span>  <span>}
</span>  <span>// nested element
</span><span>  <span>@include e(star) {</span>
</span>    <span>...
</span>    <span>// nested element's modifier
</span><span>    <span>@include m(active) {</span>
</span>      <span>...
</span>    <span>}
</span>  <span>}
</span><span>}</span>

貢献

githubリポジトリでの貢献は、ポストプロセッシング、説明などの例を追加するための問題/PRSの形式で最も役立ちます。

<span><span>.ProductRating</span> {
</span>  ...
<span>}
</span><span>// nested element
</span><span><span>.ProductRating-title</span> {
</span>  ...
<span>}
</span><span>// nested element
</span><span><span>.ProductRating-star</span> {
</span>  ...
<span>}
</span>// nested element's <span>modifier
</span><span><span>.ProductRating-star--active</span> {
</span>  ...
<span>}</span>

そして、CCSSに関連するクレジットと有用なリソースについては、必ずリポジトリをチェックしてください。ご質問やコメントがある場合は、下のコメントまたはGitHubリポジトリに投稿してください。

コンポーネントCSS（CCSS）

に関するよくある質問

CCSSと従来のCSSの主な違いは何ですか？

従来のCSSは、HTMLで書かれたドキュメントの外観とフォーマットを説明するために使用されるスタイルシート言語です。レイアウト、色、フォントなど、コンテンツをプレゼンテーションから分離できるように設計されています。一方、CCSS（コンポーネントCSS）は、スタイルが特定のコンポーネントに直接リンクされているスタイリングに対する最新のアプローチです。これは、スタイルがコンポーネントに局所的にスコープされ、アプリケーション全体でスタイルが衝突するリスクを減らすことを意味します。このアプローチにより、スタイルがよりメンテナンスしやすく、モジュール化され、スケーリングが容易になります。

CCSSは、プロジェクトのスケーラビリティをどのように改善しますか？従来のCSSでは、プロジェクトが成長するにつれて、CSSファイルも成長し、管理が困難になります。ただし、CCSSでは、各コンポーネントには独自のスタイルがあり、管理と拡張が容易になります。アプリケーションの残りの部分に影響を与えることなくコンポーネントを簡単に更新または変更できます。

JavaScriptフレームワークでCCSを使用できますか？ React、Angular、Vue、またはその他のフレームワークを使用している場合でも、CCSSを使用してコンポーネントをスタイリングできます。これにより、CCSSはフロントエンド開発者にとって汎用性の高いツールになります。

CCSSはグローバルスタイルをどのように処理しますか？

CCSSは主に個々のコンポーネントのスタイリングに使用されますが、グローバルスタイルも処理できます。グローバルスタイルを別のファイルに定義し、必要に応じてコンポーネントにインポートできます。これにより、CCSSのモジュール性の恩恵を受けながら、アプリケーション全体で一貫したルックアンドフィールを維持できます。使用するには、いくつかの制限があります。メディアクエリ、擬似クラス、または擬似要素を使用することはできません。また、特異性が最も高く、スタイルをオーバーライドすることの困難につながる可能性があります。一方、CCSSは、メディアクエリ、擬似クラス、擬似要素を使用する機能など、CSSの全力を提供します。また、インラインスタイルよりも特異性が低いため、必要に応じてスタイルを簡単に上書きします。

CCSSは、個々のコンポーネント、CCSSにスタイルをスコープすることにより、Webアプリケーションのパフォーマンスをどのように改善しますか？ Webアプリケーションのパフォーマンスを大幅に改善できます。従来のCSSでは、ブラウザはCSSファイル全体を解析してページをレンダリングする必要があります。これにより、レンダリングプロセスが遅くなる可能性があります。ただし、CCSSを使用すると、ブラウザは現在レンダリングされているコンポーネントのスタイルを解析するだけで、ページの読み込み時間が速くなります。

CCSSを使用してCSS Pre-Processorsを使用できますか？

​​

はい、SASS、Less、StylusなどのCSS Precessorsを使用できます。これにより、変数、ミキシン、ネストされたルールなどのこれらの前処理者の力を活用しながら、CCSSのモジュール性とスケーラビリティの恩恵を受けています。

CCSSの主な利点の1つは、CSS特異性に関連する問題を排除することです。各コンポーネントには独自のスタイルがあるため、スタイルが衝突したり、互いに上書きしたりすることを心配する必要はありません。これにより、スタイルを管理しやすくなり、CSSの特異性に関連するバグのリスクを軽減します。従来のCSSと同様に、CCSSはメディアクエリをサポートしています。これにより、デバイスの画面サイズに応じてさまざまなスタイルを適用できます。これにより、すべてのデバイスで見栄えの良いレスポンシブなデザインを簡単に作成できます。

CCSSはプロジェクトの保守性をどのように改善しますか？そして管理しやすい。各コンポーネントには独自のスタイルがあるため、コンポーネントを更新または変更する必要がある場合は、その特定のコンポーネントのスタイルを変更するだけです。これにより、バグを導入するリスクが減り、コードの更新またはリファクタリングが容易になります。

以上がCCSS（コンポーネントCSS）の導入の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。