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

プレーンなCSSやEmotionなど、一般的なソリューションと比較した結果、Emotionが最も適していると判断しました、 SCSS そして スタイル・コンポーネントそして最後の1本を選んだ。すべて順調だったようだ。今、非常に人気のあるライブラリーを持っている。
すでに大きなコミュニティがあるから、もし何か問題に直面しても、Stack OverflowかGitHubのどこかで解決策が見つかるだろう。それ以外にも、 スタイル・コンポーネント は、必要なときだけレンダリングする最適化機能を持っている。つまり プロジェクト was expected to be built using React and タイプスクリプト. This library has great support for both technologies. Sounds awesome, right?

それからコーディングを始めた。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とシームレスに統合することができる。 コードベース そして コンポーネントライブラリ .

その一方で スタイル・コンポーネント 強化された 開発者経験 with its ability to encapsulate styles within components and simplify the styling process. It also promotes code modularity and reusability, enabling front-end エンジニア to efficiently manage the コンポーネントディレクトリ で一貫したUIを作成する。 ウェブアプリ .の重要性を考慮する。 ユーザーデータ セキュリティとパフォーマンスにおいて、両方のアプローチが最終的なバンドルサイズとロード時間に与える影響を評価することは極めて重要である。最終的には SCSSとスタイル付きコンポーネント プロジェクトの具体的なニーズと、その担当者のスキルセットに基づいて決定されるべきである。 開発チーム という全体的な目標を掲げている。 ウェブアプリケーション .開発者は、すべての要素を評価し、常に最新の情報を入手することが望ましい。 ブログ記事 そして、プロジェクトの要件に合致し、全体的な強化につながる、十分な情報に基づいた決断を下すのだ。 フロントエンド 開発プロセス .