JS の CSS: よりクリーンでスケーラブルなスタイルを実現するための Styled-Components、Emotion などの完全ガイド。

複雑で広大な CSS ファイルを操作したり、大規模なプロジェクトでスタイルを整理するのに苦労したことがあれば、JS の CSS が気に入るでしょう。このアプローチでは、JavaScript 内に CSS を直接記述することができるため、スタイルがモジュール化されて柔軟になり、React のようなコンポーネントベースのフレームワークに完全に適合するようになります。

最も人気のある 2 つの CSS-in-JS ライブラリ、Styled-Components と Emotion について詳しく説明し、それらを効果的に使用する方法に関する実践的なヒントをいくつか紹介します。

このツールが、クリーンで保守可能、スケーラブルなコードを犠牲にすることなく、スタイルをどのように変更できるのかを詳しく見ていきましょう。

JS 内で CSS を使用する理由
JS の CSS が普及する理由の 1 つは、現代の Web 開発、特に大規模なアプリケーションを構築するチームにとっての最大の課題の 1 つを解決するためです。 JavaScript 内でスタイルを移動することで、次のことを実現します。

スコープ付きスタイル: クラス名の衝突がなくなりました。各コンポーネントにスコープされたスタイル。

動的スタイリング: JavaScript ロジックを使用して、小道具、テーマ、またはアプリケーションの状態に関するスタイルを変更します。

コンポーネントベースの開発: CSS-in-JS ライブラリは、React、Vue、Angular などのコンポーネントベースのフレームワークと自然に連携します。これにより、スタイルがカプセル化されモジュール化された状態に保たれます。

スタイル付きコンポーネント: 基本
Styled-Components は、おそらく、CSS-in-JS エコシステムで最も人気のあるライブラリの 1 つであり、シンプルさを誇り、React で簡単に使用できます。

クイックスタート
スタイル付きコンポーネントをインストールします:
$ npm install styled-components
次に、それをコンポーネントにインポートします。
$ import styled from 'styled-components';

スタイル付きコンポーネント:

const Button = styled.button`
背景色: #6200ea;
色: 白;
パディング: 10px 20px;
境界半径: 5px;
境界線: なし;
カーソル: ポインタ;

&:hover {
背景色: #3700b3;
}
JSX でスタイル付きコンポーネントを使用します:

クリックしてください

主な機能:
テーマ化: Styled-Components を使用すると、アプリケーション全体で一貫したスタイルを実現するテーマを作成できます。

動的スタイル設定: 物事のスタイル設定方法を動的に変更したい場合があります。これはプロップと連携して、非常に柔軟で再利用可能なコンポーネントを作成します。

感情: 柔軟性とパフォーマンス
もう 1 つの強力な CSS-in-JS ライブラリは、柔軟性とパフォーマンスで知られる Emotion です。これは、スタイルの 2 つの主要な方法を提供します。インライン スタイルの場合は css prop、もう 1 つは再利用可能なコンポーネントの場合は styled です。

クイックスタート
エモーションをインストール:

npm install @emotion/react @emotion/styled
インポートして使用:

'@emotion/styled' からスタイルをインポート;

const Card = styled.div`
パディング: 20px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
境界半径: 8px;
背景色: 白;

動的インライン スタイルの場合:

「@emotion/react」から { css } をインポートします;

const DynamicStyle = css`
色: 青;
フォントサイズ: 16px;

こんにちは、エモーション!

主な機能:
インラインで再利用可能なスタイル: Emotion の CSS およびスタイル付き API を使用したスタイル設定方法により、より詳細な制御と柔軟性が得られます。

サーバーサイド レンダリング: Emotion は SSR 用に高度に最適化されているため、SEO で優れたパフォーマンスを必要とするアプリケーションに最適な使用例が見つかります。

JS 内の CSS のベスト プラクティス
CSS-in-JS を効果的に使用するためのベスト プラクティスがいくつかあり、パフォーマンスを維持し、スタイルをきれいに保つのに役立ちます。

インライン動的スタイルが多すぎるのを避ける: インライン スタイルは、1 回限りの微調整に最適です。ただし、多すぎるとパフォーマンスにボトルネックが発生します。代わりに、再利用可能なスタイルにスタイル付きコンポーネントを適用し、インライン スタイルを本当に必要な場合に限定してください。

テーマを活用する: テーマを使用して、一貫した構造を強制し、アプリケーションを調べます。 Styled-Components や Emotion などのライブラリを使用すると、グローバル テーマを定義できます。これにより、ブランドの色、フォント、その他のスタイル基準をコンポーネント全体に適用することが非常に簡単になります。

import { ThemeProvider } from 'styled-components';

const テーマ = {
プライマリカラー: '#6200ea',
フォントサイズ: '16px'、
};

プロップ駆動スタイル: 動的プロップを使用すると、コンポーネントの状態や受信データに基づいてスタイルを変更できます。 Styled-Components と Emotion の両方で、プロップは、スタイルを書き直すことなく、コンポーネントがさまざまな使用シナリオのニーズを満たす簡単な方法を提供します。

const Button = styled.button`
背景色: ${(props) => (props.primary ? '#6200ea' : '#eee')};
色: ${(props) => (props.primary ? '白' : '黒')};

主ボタン
二次ボタン

コード分割: CSS-in-JS ライブラリは注意しないとバンドルが大きくなる可能性があることに注意してください。適切なパフォーマンスを得るには、コード分割などのテクニックを利用し、アプリの各部分に必要なスタイルのみを読み込みます。

スタイル付きコンポーネント vs 感情
どちらを使用しますか?どちらも素晴らしいライブラリであり、それぞれ異なるニーズを満たします。簡単な比較:

スタイル付きコンポーネント: テーマ設定と使いやすさが必要な場合の React アプリケーションに最適です。広く採用されており、非常に優れたドキュメントが用意されているため、初心者にも優しいです。

感情: より柔軟でパフォーマンスが最適化されています。 Emotion は、SSR サポートが必要な場合、またはインラインおよび再利用可能なスタイル オプションの両方を提供するライブラリを探している場合に最適です。

CSS-in-JS は、特にコンポーネント駆動型フレームワークを使用する開発者にとって、最新の Web スタイルを実行する強力な方法です。 Styled-Components や Emotion などのライブラリを使用すると、スタイルをモジュール化して動的に保ち、アプリケーション全体で一貫性を保つことができます。

インライン スタイル、テーマの利用、プロップ駆動スタイルなどのベスト プラクティスに従うことで、JS 内の CSS を最大限に活用してコードをクリーンアップしてスケールすることができます。

CSS での作業方法を変える準備はできましたか?ぜひ、CSS-in-JS を自分で試してみてください!

以上がJS の CSS: よりクリーンでスケーラブルなスタイルを実現するための Styled-Components、Emotion などの完全ガイド。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。