CSS・TypeScriptの相性が抜群。vanilla-extractが最高のCSS開発体験をくれた

2023/07/13 116 users vanilla-extract Sass React CSS

私はこれまで、 React ・ Next.js でのスタイリングには、CSS Modules + Sass を使っていましたが、最近は vanilla-extract を使うようになりました。TypeScript との相性が良く、長い間求めていたCSS開発体験が実現できるためです。 vanilla-extract とは、CSS を TypeScript で型安全に書ける CSS in JS です。 State ... 続きを読む

CSS-in-JSのパラダイムシフト

2023/04/05 119 users CSS-in-JS パラダイムシフト React 筆者 選択肢

2023年現在、Reactでは多種多様なスタイリング手法が用意されています。 代表どころで言うとCSS ModulesやTailwind、CSS-in-JSなどが有名です。筆者の個人的な好みでは、これらの選択肢の中でもCSS-in-JSを用いたスタイルが特に好きですが、CSS-in-JSライブラリ群の中にはランタイムでスタイリング処理がなされる為にパ... 続きを読む

コードジャンプ可能な CSS Modules を実現する happy-css-modules の紹介 - mizdra's blog

2022/11/14 84 users React mizdra's blog CSS デモ 手法

弊社では React で CSS を書くための手法として CSS Modules を全面的に採用しています。そこで CSS Modules を使った開発をより快適にするために、「happy-css-modules」というツールを作りました。 happy-css-modules のデモ。 この記事ではこのツールが必要になった背景、導入方法、そしてツールの技術的な仕組みにつ... 続きを読む

CSS Modulesの歴史、現在、これから - Hatena Developer Blog

2022/09/01 129 users 歴史 Hatena Developer Blog

マンガメディア開発チームの id:mizdra です。半年ほど前から「フロントエンドエキスパート」という肩書きをもらい、社内でフロントエンドの啓蒙活動をしています。具体的にどんな活動をしているかについては、社内のポッドキャストで少し話しましたので、興味があれば聞いてみてください。 developer.hatenastaff.com ... 続きを読む

CSS設計って最近こういう感じだと思うんですけどどうですか

2022/07/29 203 users CSS設計 感じ BEM doc Tailwind CSS

CSS設計って最近こういう感じだと思うんですけどどうですかという話です。BEM、CSS Modules、CSS in JS、Tailwind CSSとか色々ありますがどういうふうに捉えればよいのだろうという内容でした。 フォローアップ https://paper.dropbox.com/doc/CSS-pXvOHW14FJ4gqJb60mnyI 続きを読む

【Vue.js】Scoped CSSよりCSS Modulesの方がベターだった件 - Qiita

2019/06/29 132 users Qiita Vue.js 装飾 手法 コンポーネント内

コンポーネント内で閉じた装飾の手法として、 Scoped CSS(vue-loader の機能)や CSS Modules, CSS in JS などが流行っています1。 Vue.js で Single File Component を利用する場合、 Scoped CSS は手軽に利用できますが CSS Modules についても手軽に利用ができることがわかったので、比較をしてみました。 Scoped CSS,... 続きを読む

AbemaTVにおけるCSS is too fragile問題に対する解 / Solution of "CSS is too fragile" by AbemaTV - Speaker Deck

2019/05/18 66 users AbemaTV リファクタリング PostCSS CSS 構成

AbemaTVにおけるCSS is too fragile問題に対する解 / Solution of "CSS is too fragile" by AbemaTV リファクタリングをしていたらCSS Modulesを使っていたにも関わらずCSSが壊れてしまった私達は、CSS ModulesがCSSの特性・我々のプロダクトの構成や開発方針に合わないと判断し「BEMベースのクラス名設計 + PostCSS」へ... 続きを読む

AbemaTVにおけるCSS is too fragile問題に対する解 / Solution of "CSS is too fragile" in AbemaTV - Speaker Deck

2019/05/18 66 users AbemaTV リファクタリング PostCSS CSS 構成

AbemaTVにおけるCSS is too fragile問題に対する解 / Solution of "CSS is too fragile" in AbemaTV リファクタリングをしていたらCSS Modulesを使っていたにも関わらずCSSが壊れてしまった私達は、CSS ModulesがCSSの特性・我々のプロダクトの構成や開発方針に合わないと判断し「BEMベースのクラス名設計 + PostCSS」へ... 続きを読む

社内でCSSの新しい方針について話したメモ - Qiita

2016/08/18 141 users Qiita PostCSS cssnext CSS スライド

社内で新しいドメインを設立するにあたり、 CSS Modules, PostCSS, cssnext を試してみました。 このスライドは、その際の説明に使ったものです。せっかくなので公開します。 「プロトタイプ作成で試してみたけど、みなさんどう思いますか？」くらいの温度感。本番採用が確定したわけではありません。何かお役に立つことがアレば幸いです。 以後、説明に使ったスライド。 おしながき 1. コ... 続きを読む

CSS Modules 所感 - morishitter blog

2015/09/28 136 users バス CSS 所感 指針 翻訳

2015-09-28 CSS Modules 所感 CSS Modulesという、CSSの新しい設計概念・指針のようなものがある。 CSS Modulesチームの1人であるGlen Maddern氏が書いた「CSS Modules - Welcome to the Future」という記事の翻訳がバズっていたので、僕がCSS Modulesについて思ったことをまとてみる。「CSS Modulesと... 続きを読む