CSS in JSを再考する

 (dev.to)
7 ポイント 投稿者 alstjr7375 2024-09-12 | 3件のコメント | WhatsAppで共有

CSSはユーザーインターフェースを美しく機能的にする中核要素ですが、スケールが大きくなるほどCSSの管理はますます難しくなります。

スタイルの衝突、パフォーマンス低下、保守の難しさは、多くの開発者を悩ませています。

この記事では、こうした問題を解決するための新しいアプローチ、特にCSS in JSについて詳しく説明します。
CSSの歴史的背景から始まり、モダンなスタイリング手法から未来のデザインシステムまで幅広いテーマを扱います。

記事の構成は次のとおりです。

  1. JSにおけるCSSの定義と背景
    1. JSにおけるCSSとは何か
    2. JSにおけるCSSの背景
  2. CSSとデザインの歴史的文脈
    3. CSSの背景
    4. デザインの背景
    5. デザインシステムの背景
  3. スタイル管理手法の分析と新たな提案
    6. スタイル管理はどのように行われてきたか
    7. スタイルはどのように管理すべきか
  4. JSにおけるCSSの具体的な実装計画
    8. なぜJSにCSSがあるのか
    9. minchoプロジェクトを紹介します
    10. JSにおけるCSSフレンドリーなCSS
    11. JSにおけるスケーラブルなCSS
  5. デザインシステムとの統合
    12. デザインシステムのためのJSにおけるCSS

特に本記事では、SCALE CSS方法論とStyleStackという新しい概念を紹介し、これをベースにしたminchoプロジェクトを提案します。CSSフレンドリーでスケーラブルなCSSをJSに実装することを目指しています。

この記事の最終的な目的は、開発者、デザイナー、そしてその他のWebプロジェクトの関係者に、より良いスタイリングソリューションの可能性を提示することです。
長文ですが、お読みいただきありがとうございます。

関連記事

3件のコメント

 
savvykang 2024-09-12

プロジェクトへの共感ではなくて恐縮ですが、フロントエンド業界はもう少し長期的な視点で、広く合意されたツールやコンベンションを作るべきではないかと思います。SCSS、LESS、AngularJS、Angular 2.0、React など、ある程度スタックの経験がある立場からすると、フロントエンドの新技術は必要以上にオーバーエンジニアリングされていて、消耗的に感じられます。
 
slowandsnow 2024-09-12

Webにおける合意なら、Web標準があります。CSSではSCSSのようなネストの導入や、クラス、関数型プログラミングのメソッド、Web Componentsなどについて継続的に議論され、機能が追加されています。
 
alstjr7375 2024-09-12

私の考えでは、フロントエンド自体が分化してからまだそれほど経っていないので、あれこれ試している段階なのだと思います。
ReactやVueのようなライブラリから始まり、バンドラーやリンターなど、ツーリング全般にわたってですね。

しかもアプリ分野と違って、1社がベストプラクティスを決めて広めるわけでもないので、混乱も大きい気がしますね!!