なぜスタイル付きコンポーネントの代わりにSCSSを使うべきなのか？

プレーンなCSSやEmotionなど、一般的なソリューションと比較した結果、Emotionが最も適していると判断しました、 SCSS そして スタイル・コンポーネントそして最後の1本を選んだ。すべて順調だったようだ。今、非常に人気のあるライブラリーを持っている。
すでに大きなコミュニティがあるから、もし何か問題に直面しても、Stack OverflowかGitHubのどこかで解決策が見つかるだろう。それ以外にも、 スタイル・コンポーネント は、必要なときだけレンダリングする最適化機能を持っている。つまり プロジェクト は、React と Typescript を使って構築されることが期待されていました。このライブラリは、両方の技術をサポートしている。素晴らしいでしょう？

それからコーディングを始めた。1ヶ月後、アプリが成長したとき、フロントエンドの チーム 私は機能を提供することに集中した。 スタイル・コンポーネント その理由を説明しよう。

まず、命名規則である。区別するために スタイル・コンポーネント Reactのコンポーネントを使用する必要があった。 スタイル 減少した接頭辞 コード 読みやすい。それから（奇妙かもしれないが）、Typescriptのサポート。 スタイル・コンポーネントご存じかもしれませんが、CSS-in-JSのアプローチに基づいています。これは、任意のpropを渡すことができ、このpropに基づいて入力のスタイルを変更できることを意味します。Typescriptでは、このpropの型も実装する必要があります。 スタイル・コンポーネント.「でも、あと5秒もかかるのに、何が問題なんだ」とあなたは言うかもしれない。しかし、アプリが高速にスケールアップし、コンポーネントの数が増えれば、その問題は解決する。
この5秒が何百倍にもなるのだ。もう一つの問題は スタイル・コンポーネント.

一部 JS開発者 コンポーネントと同じファイルに入れる人もいれば、別々のファイルを作る人もいる。どちらのアプローチも多くの理由から良いものです。ほとんどの場合、コンポーネントの複雑さに依存します。これらのテクニックのいずれかに従えば、まとまりを保つことができますが、マージするとまったく逆の結果になります。私たちはCSS-in-JSのアプローチをやめ、CSS-in-JSに移行しました。 SCSS.簡単で手っ取り早いものではありませんでしたが、少しの助けで何とかなりました。私たちはBEMの手法でhtmlタグのスタイル付けを始め、もちろん、スタイルはコンポーネントごとに1つずつ別々のファイルに入れた。JSのpropを スタイル・コンポーネント は素晴らしい機能だが SCSS それは不可能だ。また、Reactが条件付きクラスをコーディングしようとする構文がひどいものであることは、誰もが認めるところだと思う。

さて、非常に興味深い解決策が1つある。BEMの手法を クルスエックス このライブラリを教えてくれた友人のPrzemek Adamczykに感謝します。

見た目はずっとクリーンだと思わないか？

一番いいのは、コンポーネント・レベルで条件変数をタイプするだけでいいことだ。
スタイリングレベルではありません。本当に時間の節約になる。残念ながら、このような解決策には短所もある。
SCSS は簡単でフレンドリーですが、Next.jsと一緒に使う場合は注意が必要です。このフレームワークは
スタイルファイルをコンポーネントファイルに直接インポートできるようになりました（CSSモジュールのみ）。

コンポーネントごとにファイルを1つ作成したい場合は、次のようにします。 インデックス.scss あなたの SCSS ファイルと
にインポートする。 _app.tsx ファイルにインポートする必要があります。唯一の問題は、手動でそれぞれの SCSS ファイルをインポートすることができます。しかし、Reactではこの問題はなく、インポートすることができます。 SCSS ファイルを好きな場所に置くことができる。誤解しないでほしい。 スタイル・コンポーネント は本当に素晴らしい。前にも言ったように、JS変数の受け渡しやグローバルテーマは素晴らしい機能だ。最適化が重要な大きなアプリを作る場合、このライブラリーはおそらくあなたのニーズを満たしてくれるだろう。しかし、我々の場合は SCSS 大当たりだ。

まとめ

結論として、両者には正当な主張がある。 SCSSとスタイル付きコンポーネント で ウェブ開発 最終的な決断はさまざまな要因に左右される。 SCSS には、より親しみやすい構文が用意されています。 経験豊富な開発者 従来のCSSとシームレスに統合することができる。 コードベース そして コンポーネントライブラリ .

その一方で スタイル・コンポーネント 強化された 開発者経験 は、スタイルをコンポーネント内にカプセル化し、スタイリングプロセスを簡素化する機能を備えています。また、コードのモジュール化と再利用性を促進し、フロントエンドエンジニアが効率的に コンポーネントディレクトリ で一貫したUIを作成する。 ウェブアプリ .の重要性を考慮する。 ユーザーデータ セキュリティとパフォーマンスにおいて、両方のアプローチが最終的なバンドルサイズとロード時間に与える影響を評価することは極めて重要である。最終的には SCSSとスタイル付きコンポーネント プロジェクトの具体的なニーズと、その担当者のスキルセットに基づいて決定されるべきである。 開発チーム という全体的な目標を掲げている。 ウェブアプリケーション .開発者は、すべての要素を評価し、常に最新の情報を入手することが望ましい。 ブログ記事 そして、プロジェクトの要件に合致し、全体的な強化につながる、十分な情報に基づいた決断を下すのだ。 フロントエンド開発プロセス .