Utility First な CSS in JS フレームワークの導入と３ライブラリの比較 - JX通信社エンジニアブログ

JX 通信社のフロントエンドでは React TypeScript や Emotion のような CSS in JS を技術選定することが多いです。弊社 SaaS の FASTALERT、新型コロナ関連情報などでも同様の技術選定で、過去にもエンジニアブログで紹介してきました。 tech.jxpress.net tech.jxpress.net 今日は、Emotion の活用の極地「Utility First な CSS in JS フレームワーク」についてご紹介します。 Emotion で開発する悩み 素の Emotion や類似の CSS in JS ライブラリでは、 1 つの TS/JS ファイル内に CSS を書くような感じでスタイル設定を行っていきます*1。CSS in JS ライブラリに概ね共通しているのが、 styled.タグ名 でスタイリングすることです。 const Tit

[yamitzky]

書いた / TypeScriptフレンドリーな TailWind CSS 風の CSS in JS の紹介です

[rugamaga]

古のCSSとHTMLが分かれる前のHTMLがこんな感じだったなあ…… <font size=16>とか<table border="1px">みたいな。a11yに色々問題があったりとかそういう話題があった。しかしそこに回帰している……？/emotionでcss自体prop化して受けてる

[jay-es]

Chakra UI, xstyled, Theme UI の比較

[arx0balest]

emotion派。なるべく標準のcssを書きたい。camelCaseのcssはキモイ。しかしTailWindが気になっている。

[daikikohara]

うちはstyled-componentsと一部styled-system使ってるけどstyled-systemは作者がすぐメンテしなくなるタイプなのでtheme-uiも危険だと思ってる。今はchakra-uiがベストだと思ってるけどまだ移行には踏み切れてないんだよなぁ。

[haususuahahdh]

Material-UIはv5からsx入ったので、マテリアルデザインじゃなくても検討価値あり。

[shinyorke]

テックブログ新作です