コンポーネント駆動型CSSフレームワーク

コアポイント

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1. パターンラボ

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

   Pattern Labは、コンポーネントに焦点を当てた設計Webサイトを奨励しています。基本タグから始めて、より複雑なコンポーネントを段階的に構築します。このフレームワークには、スタイルに関する仮定はありません。それはあなたの邪魔にならず、あなたがあなたのCSSを処理することを可能にします。

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

suit css

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

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

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

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

3. inuitcss

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

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

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

   たとえば、

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

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

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

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

4. 純粋なcss

   私の意見では、純粋なCSSはUIツールキットとフレームワークの間のどこかにあります。基本的なスタイルのセットを提供しますが、そこから引き継ぐことができます。設計上、あなたの道を操縦するように設計されており、既存のルールを上書きせずにCSSを作成できるようにします。

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

   結論

Webコンポーネントは、フロントエンドフィールドに革命をもたらしています。これらの新しい機能を使用する場合、現在のお気に入りのツールは最適ではないかもしれません。たぶん、お気に入りのフレームワークを超えて、何か新しいことを試す時が来たのでしょう。この投稿があなたに考慮すべき十分な選択肢が与えられたことを願っています。 特定の問題に適したツールを選択するのに十分な明確さを持つ必要があります。賢く選択してください。いつものように、自分でやることを避けないでください。

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

FAQ（FAQS）

コンポーネント駆動型のCSSフレームワークを使用することの主な利点は何ですか？

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

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

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

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

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

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

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

コンポーネント駆動型開発を開始する方法は？

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

コンポーネント駆動型のCSSフレームワークを使用することの欠点はありますか？

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

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

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

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

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

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

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

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

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

以上がコンポーネント駆動型CSSフレームワークの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。