コアポイント

• Webコンポーネントはますます人気が高まっており、このタイプの開発を処理できるCSSフレームワークに対する需要も高まっています。 BootstrapやFoundationなどの従來のCSSフレームワークは、幅広い組み込みスタイルとコードのため、開発者がWebコンポーネントの使用を制限する場合があります。
パターンラボ、スーツCSS、INUITCSS、純粋なCSSなどのコンポーネント駆動(dòng)型CSSフレームワークは、設(shè)計(jì)の出発點(diǎn)として設(shè)計(jì)され、制限や不必要なスタイルを課すことなくWebコンポーネントを開発するためのフレームワークを提供します。開発者は、獨(dú)自のスタイルとコードに集中できるようになり、再利用性、一貫性、コラボレーションが向上します。
コンポーネント駆動(dòng)型のCSSフレームワークは多くの利點(diǎn)を提供しますが、プロジェクトの複雑さを高め、フレームワークの文法と慣習(xí)を十分に理解する必要があります。これらは主にJavaScriptベースのテクノロジー向けに設(shè)計(jì)されていますが、モジュラープログラミングをサポートするプログラミング言語に適用できます。

"2015年、誰もがフレームワークを放棄します。"

よくわかりません。私はあなたの注意を引きたいだけです。どれだけ冗談を言っても、フロントエンドフィールドの微妙な変化に気づきましたか？つまり、誰もが徐々にフレームワークをあきらめていますか？たとえば、SASSメッシュフレームワークSusyはコンパスへの依存を放棄し、開発者はJQueryが必要かどうかを考えるよう奨勵(lì)されています。

Webコンポーネントは最近非常に人気があります。コンポーネントがWebアプリケーションの一流の市民になる世界に入ると、この新しいタイプの開発を処理できるフレームワークが緊急に必要です。

ブートストラップとファンデーションの制限

あなたがフロントエンドの開発者である場合、BootstrapまたはFoundationをよく知っている可能性があります。このような人気のあるCSSフレームワークは、Webコンポーネントで開発する際に私たちを制限する可能性があります。彼らが悪いというわけではありません。ビルトインスタイルが多すぎるだけです。 Shadow Domの機(jī)能を考えると、これはあなたが望むものではないかもしれません。これらのフレームワークは、すべてのニーズを満たそうとすることで知られています。一方、コンポーネント駆動(dòng)型のCSSフレームワークは、設(shè)計(jì)の出発點(diǎn)として機(jī)能し、Webコンポーネントを開発するためのフレームワークを提供します。それがすべて彼らの目標(biāo)です。

Bootstrapは、フロントエンドコードをある程度書き込む方法に革命をもたらしました。拡張可能で保守可能なスタイルシートのための優(yōu)れたUIコンポーネントと構(gòu)造を提供します。大規(guī)模なチームが受け入れられているCSS形式と協(xié)力するのに最適です。問題は、多くのコードが含まれていることです。ゼロから何も構(gòu)築したくない場合は完璧です。ただし、カスタマイズすることはそれほど効果的ではありません。カスタマイズできますか？もちろん。簡単ですか？それは疑わしいです。

「フレームワークのためではなく、フレームワークの障害の下で働いています?！? - ハリー?ロバーツ

財(cái)団はこの問題を効果的に解決します。ゼロからカスタマイズするように設(shè)計(jì)されています。実際、チームは、デフォルトのテーマを非常に基本的にして、最終的に構(gòu)築されたすべてのサイトが異なるように見えるようにすることを決意しています。しかし、基礎(chǔ)の一部のコンポーネントは、使用できるマーカーを制限するマーカーと緊密に結(jié)合しているため、CSSフレームワークだけではありません。彼らはこれを改善するために積極的に取り組んでいます。

uiツールキットとフレーム

ハリー?ロバーツは、今年初めにUIツールキットとCSSフレームワークの間のニュアンスについて議論するプレゼンテーションを行いました（Slideshowを參照）。このスピーチで、彼はCSSフレームワークがあなたの邪魔にならないと述べた。スタイルは含まれていません。タグ、HTML構(gòu)造、またはクラスに制限はありません。

一方、UI Toolkitは、デザイン、構(gòu)造、標(biāo)準(zhǔn)、パターン、JavaScriptプラグインがすべてきちんとしたパッケージに含まれている完全なパッケージを箱から出して提供する完全な製品です。これらのツールは、迅速なプロトタイピングとクイックスタートに使用されます。ほとんどの場合、それらがどのように構(gòu)築されているかとは異なるように見せたい場合、ルールを上書きし、フレームワークの定義を回避することになります。

この観點(diǎn)から、Addy Osmaniが最近議論したように、Bootstrapで構(gòu)築されたサンプルプロジェクトの単一ページには、未使用のCSSの最大91％がある場合があります。

質(zhì)問は次のとおりです。どのフレームワークがパスを回避し、コードを作成する代わりにコードを書くことができますか？

1. パターンラボ

   パターンラボは、ブラッドフロストとデイブオルセンによって作成され、アトミックデザインの哲學(xué)に基づいています。これは、基本からWebサイトを設(shè)計(jì)し、段階的に構(gòu)築するための柔軟なアプローチです。それはそれほどフレームワークではなく、ウェブサイトやアプリケーションを構(gòu)築する方法です。

   Pattern Labは、コンポーネントに焦點(diǎn)を當(dāng)てた設(shè)計(jì)Webサイトを奨勵(lì)しています。基本タグから始めて、より複雑なコンポーネントを段階的に構(gòu)築します。このフレームワークには、スタイルに関する仮定はありません。それはあなたの邪魔にならず、あなたがあなたのCSSを処理することを可能にします。

   また、CSSクリエイティブ構(gòu)造ガイドと、クリエイティブプロセス全體に貢獻(xiàn)するツールのセットも提供します。たとえば、畫面をランダムに変更して、デザインがさまざまな畫面サイズでどのように機(jī)能するかを確認(rèn)するツールと、迅速なコラボレーションのための注釈ツールを確認(rèn)します。
   しかし、最良の部分は、それがプリプロセッサフ??リーであることです。他の多くのソリューションとは異なり、どのプリプロセッサを使用するかについては、原則に従うだけです。また、ゼロスタイルが付屬しており、スタイルガイドを課すのではなく、スタイルガイドを構(gòu)築できます。

suit css

2. ニコラス?ギャラガーのスーツCSSは、定義上、コンポーネントベースのUI開発方法です。ゆるく結(jié)合した獨(dú)立したユニットの実裝と組み合わせを可能にする一連のガイドラインを提供します。 このフレームワークのコアは

   コンポーネントです。コンポーネントが構(gòu)成可能で構(gòu)成可能なフロントエンドシステムを開発するように設(shè)計(jì)されています。十分にカプセル化されたコンポーネントを構(gòu)築するためのガイドを提供し、インターフェイスを介して変更できます。

   スーツCSSは、強(qiáng)固な基盤の上に構(gòu)築された成熟したフレームワークです。ドキュメントは、それについてさらに學(xué)ぶのに最適な場所ですが、フロントエンドの原則についてももっと學(xué)ぶことができます。

   また、ワークフローに追加できるパッケージのセットも付屬しています。 NPM（ノードパッケージマネージャー）でうまく機(jī)能し、自動(dòng)プレフィックス機(jī)能、カプセル化テスト、カスタマイズ可能でスケーラブルなプリプロセッサが含まれています。試してみるか、座って、それが基づいている原則のいくつかを読んでください。

3. inuitcss

   イヌイットCSSはUIツールキットではありません。設(shè)計(jì)を課すものではなく、CSSコードの數(shù)千の??コンポーネントまたは行が含まれていません。これは、スケーラビリティを念頭に置いているフレームワークであり、必要に応じてスケーリングできる小さなパッケージとして提供されます。

   「Inuitcssは、任意のサイズまたはスタイルのWebサイトまたはアプリケーションを構(gòu)築できる堅(jiān)実なインフラストラクチャを提供します。」

   繰り返しますが、Inuitcssの最も重要な側(cè)面は、あなたの道をすばやく回避できることです。スタイリングフリーであるように設(shè)計(jì)されており、CSSを構(gòu)築できる優(yōu)れた基盤を形成します。

   たとえば、

   inuitcssのページネーションには、完全に設(shè)計(jì)されたコンポーネントではなく、マージンとパディングのみが含まれています。これにより、フレームワークをカスタマイズすることなく、またはさらに悪いことに、自分のスタイルを定義することができます。

   inuitcssは現(xiàn)在オーバーホールを受けており、次のアルファモジュールの次のバージョンが利用可能です。

   inuitcssについて私が好きなもののもう1つの側(cè)面は、コンポーネントを便利に名前を付けることができることです。フレームワークを既存のプロジェクトに入れて、既存のコードのリファクトを開始するのは簡単です。

   これは、既存のフレームワークにとって大きな勝利です。対照的に、ブートストラップまたはファンデーションを開くと、コードの最初の行がすべてに影響します（私はあなたを見ています、ボックスサイズです?。￥长欷椁违榨飑`ムワークは、既存のスタイルでは機(jī)能しません。または、そのうちの1つをプロジェクトに入れて、すべてが同じままであることを期待するのは苦痛になる可能性があります。 inuitcssは同じことをしますが、オプションで無効にしやすいです。

4. 純粋なcss

   私の意見では、純粋なCSSはUIツールキットとフレームワークの間のどこかにあります?；镜膜圣攻骏ぅ毪违互氓趣蛱峁─筏蓼工ⅳ饯长橐@ぐことができます。設(shè)計(jì)上、あなたの道を操縦するように設(shè)計(jì)されており、既存のルールを上書きせずにCSSを作成できるようにします。

   「Pureには最小限のスタイルがあり、それらの上にアプリケーションスタイルを書くことを奨勵(lì)しています。それはあなたのパスを避け、オーバーライドスタイルを簡単にするように設(shè)計(jì)されています。」

   結(jié)論

Webコンポーネントは、フロントエンドフィールドに革命をもたらしています。これらの新しい機(jī)能を使用する場合、現(xiàn)在のお?dú)荬巳毪辘违末`ルは最適ではないかもしれません。たぶん、お?dú)荬巳毪辘违榨飑`ムワークを超えて、何か新しいことを試す時(shí)が來たのでしょう。この投稿があなたに考慮すべき十分な選択肢が與えられたことを願(yuàn)っています。 特定の問題に適したツールを選択するのに十分な明確さを持つ必要があります。賢く選択してください。いつものように、自分でやることを避けないでください。

コンポーネント駆動(dòng)型のCSSフレームワークに関する

FAQ（FAQS）

コンポーネント駆動(dòng)型のCSSフレームワークを使用することの主な利點(diǎn)は何ですか？

コンポーネント駆動(dòng)型のCSSフレームワークは多くの利點(diǎn)を提供します。まず、再利用性を向上させます。コンポーネントはプロジェクトのさまざまな部分で再利用でき、書き込まれたコードの量を減らし、コードベースをより管理しやすくします。第二に、それらは一貫性を高めます。プロジェクト全體で同じコンポーネントを使用することにより、ユーザーインターフェイスは一貫性を維持しているため、ユーザーエクスペリエンスが向上します。第三に、彼らはコラボレーションを促進(jìn)します。さまざまなチームメンバーが異なるコンポーネントを同時(shí)に処理でき、開発プロセスを高速化できます。最後に、メンテナンスを容易にします。コンポーネントは獨(dú)立しているため、1つのコンポーネントへの変更は他のコンポーネントに影響を與えないため、バグの修正と更新は複雑になりません。

コンポーネント駆動(dòng)型開発は、従來の開発方法とどのように違いますか？

従來の開発方法は通常、トップダウンアプローチを使用します。このアプローチでは、全體的な設(shè)計(jì)が小さな部分に分解されます。対照的に、コンポーネント駆動(dòng)型開発は、個(gè)々のコンポーネントが獨(dú)立して開発され、完全な設(shè)計(jì)に結(jié)合されるボトムアップアプローチを採用します。このアプローチにより、システム全體に影響を與えることなくコンポーネントを追加、削除、または変更できるため、より柔軟性とスケーラビリティが向上します。

コンポーネント駆動(dòng)型のCSSフレームワークは、プログラミング言語で使用できますか？

コンポーネント駆動(dòng)型のCSSフレームワークは、主にReact、Vue、AngularなどのJavaScriptベースのテクノロジー向けに設(shè)計(jì)されています。ただし、コンポーネント駆動(dòng)型開発の原則は、モジュラープログラミングをサポートするプログラミング言語に適用できます。特定の実裝の詳細(xì)は、使用される言語とフレームワークによって異なる場合があることに注意する必要があります。

人気のあるコンポーネント駆動(dòng)型のCSSフレームワークは何ですか？

人気のあるコンポーネント駆動(dòng)型のCSSフレームワークには、ブートストラップ、ファンデーション、バルマ、セマンティックUIが含まれます。これらのフレームワークは、プロジェクトの特定のニーズに合わせてカスタマイズできる事前に設(shè)計(jì)されたコンポーネントを提供します。また、多くのドキュメントとコミュニティのサポートを提供しており、初心者や経験豊富な開発者に最適です。

コンポーネント駆動(dòng)型開発を開始する方法は？

コンポーネント駆動(dòng)型開発を開始するには、まずモードーラープログラミングとコンポーネントベースのアーキテクチャの基本原則を理解する必要があります。次に、プロジェクトのニーズに合ったコンポーネント駆動(dòng)型CSSフレームワークを選択します。フレームワークのドキュメントに精通し、コンポーネントの作成と使用を試みます。オンラインチュートリアルやコースは、この知識(shí)を?qū)Wぶのにも役立ちます。

コンポーネント駆動(dòng)型のCSSフレームワークを使用することの欠點(diǎn)はありますか？

コンポーネント駆動(dòng)型のCSSフレームワークは多くの利點(diǎn)を提供しますが、潛在的な欠點(diǎn)もあります。たとえば、特に初心者にとっては、プロジェクトの複雑さを高める可能性があります。また、フレームワークの文法と慣習(xí)を十分に理解する必要があります。さらに、事前に設(shè)計(jì)されたコンポーネントに過度に依存すると、創(chuàng)造性が制限され、デザインが平易に見えます。

コンポーネント主導(dǎo)の開発は、チームのコラボレーションをどのように改善しますか？

コンポーネント駆動(dòng)型開発により、異なるチームメンバーが異なるコンポーネントを同時(shí)に処理できるようにすることで、チームのコラボレーションが改善されます。この並列開発プロセスは、開発タイムラインを大幅に高速化できます。さらに、コンポーネントは獨(dú)立しているため、ある開発者が行った変更は他の開発者の作業(yè)に影響を與えず、競合やエラーのリスクを軽減します。

モバイルアプリケーション開発には、コンポーネント駆動(dòng)型のCSSフレームワークを使用できますか？

はい、コンポーネント駆動(dòng)型のCSSフレームワークをモバイルアプリケーション開発に使用できます。 React NativeやIonicなどの多くのフレームワークは、モバイルインターフェイス専用に設(shè)計(jì)されたコンポーネントを提供します。これらのコンポーネントを使用して、さまざまな畫面サイズとデバイスでうまく実行できるレスポンシブデザインを作成できます。

コンポーネント駆動(dòng)型開発は、テストとデバッグをどのようにサポートしますか？

コンポーネント駆動(dòng)型開発は、各コンポーネントの獨(dú)立したテストとデバッグを許可することにより、テストとデバッグをサポートします。このモジュール式アプローチにより、個(gè)々のコンポーネントのバグを隔離および修正し、ユニットテストを作成しやすくなります。また、1つのコンポーネントへの変更が他のコンポーネントに影響を與えないため、回帰テストも容易になります。

コンポーネントのアクセシビリティを確保する方法は？

コンポーネントのアクセシビリティには、アクセス可能なWebデザインのベストプラクティスが含まれていることを確認(rèn)してください。これには、セマンティックHTMLを使用した構(gòu)造化、畫像への代替テキストの提供、十分な色のコントラストの確保、キーボードを介してすべての機(jī)能をアクセスできるようにすることが含まれます。多くのコンポーネント駆動(dòng)型のCSSフレームワークは、アクセシビリティ機(jī)能をボックスから提供しますが、それでもさまざまな支援技術(shù)でコンポーネントをテストする必要があります。

以上がコンポーネント駆動(dòng)型CSSフレームワークの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。