CSS から React コンポーネントを生成する MistCSS

2024/03/23 52 users フロントエ CSS React コンポーネント 昨今 ツール

CSS から React コンポーネントを生成する MistCSS 2024.03.23 MistCSS は CSS in JS になぞらえた JS from CSS というコンセプトで、CSS から React コンポーネントを生成するツールです。ピュアな CSS を記述できるので、学習コストが低い、パフォーマンスに影響がないといったメリットがあります。 昨今のフロントエ... 続きを読む

クックパッドのフロントエンド CSS in JS をゼロランタイムに切り替えました - クックパッド開発者ブログ

2023/10/03 11 users クックパッド GraphQL フロントエンド 我々 とおり

こんにちは。レシピサービス開発部クックパッドサービス基盤グループのkaorun343です。我々のチームではレシピサービスのフロントエンドを Next.js と GraphQL のシステムに置き換えている話 - クックパッド開発者ブログにて紹介したとおり、レシピサービスを Next.js ベースの新システムへと移行しています。今回は、こ... 続きを読む

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】styled-componentsを別のCSS in JSに自動置換するCLIツールの開発

2022/11/01 12 users styled-components サイボウズ インターン

1.はじめに 本記事はサイボウズの夏インターン(2022年)で取り組んだ内容の紹介を行います。インターンでは、サイボウズのフロントエンド領域における横断的組織であるフロントエンドエキスパートチームに配属されました。5日間のインターン期間でstyled-componentsを別のCSS in JSに自動置換するCLIツール・extract-styl... 続きを読む

ZOZOTOWN Webフロントエンドリプレイスにおける CSS in JS の技術選定で Emotion を選定した話 - ZOZO TECH BLOG

2022/09/13 14 users ZOZOTOWN リプレイス Emotion 菊地 背景

はじめに こんにちは。ZOZOTOWN開発本部フロントエンドの菊地（@hiro0218）です。 現在、ZOZOTOWNではWebフロントエンド技術のリプレイスプロジェクトが進行しています1。本記事では、WebフロントエンドのリプレイスでCSS in JSの技術選定をした際の背景や課題についてご紹介します。 既存技術スタックの課題 リプレイス... 続きを読む

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

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

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

CSS in JSとしてVanilla-Extractを選んだ話と技術選定の記録の残し方

2021/11/16 8 users vanilla-extract インクリメンタル Vue

インクリメンタルに新しい技術を取り入れる方法では、VueからReactへ段階的に移行していったという話を紹介していました。 このReactの採用を決定してから大きな論点となったのは、ReactでCSS(スタイル)をどのように書くかについてです。 Reactのスタイリング方法には、デファクトと言えるものはありません。 Styling an... 続きを読む

ページを高速に表示するには「CSS in JS」と普通のCSSのどちらを使うべきなのか？ - GIGAZINE

2021/06/25 12 users GIGAZINE CSS ページ

JavaScriptを用いてウェブサイトのUIを構築する際によく利用されるのが「React」というFacebook製のライブラリです。ReactではJSXという記法を用いてコンポーネントを構築していきますが、その際にどういう方法でスタイリングを行うかはユーザーの手に任されています。その中でも比較的多く用いられているのが「普通のCS... 続きを読む

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

2021/04/06 13 users フレームワーク Emotion SaaS FASTALERT

JX 通信社のフロントエンドでは React TypeScript や Emotion のような CSS in JS を技術選定することが多いです。弊社 SaaS の FASTALERT、新型コロナ関連情報などでも同様の技術選定で、過去にもエンジニアブログで紹介してきました。 tech.jxpress.net tech.jxpress.net 今日は、Emotion の活用の極地「Utility First... 続きを読む

レシピサービスのフロントエンドに CSS in JS を採用した話 - クックパッド開発者ブログ

2021/03/15 7 users フロントエンド クックパッド開発者ブログ レシピサービス

こんにちは。技術部クックパッドサービス基盤グループのkaorun343です。我々のチームでは レシピサービスのフロントエンドを Next.js と GraphQL のシステムに置き換えている話 にて紹介したとおり、レシピサービスを Next.js ベースの新システムへと移行しています。今回はこの新システムの CSS の話 です。 背景 クッ... 続きを読む

Chakra UI ではじめる Tailwind CSS へのささやかな抵抗 / Modest resistance to Tailwind CSS starting with Chakra UI - Speaker Deck

2020/12/18 17 users Speaker Deck Tailwind CSS

Transcript Chakra UI Ͱ͸͡ΊΔ Tailwind CSS ΁ͷ͞͞΍͔ͳ఍߅ UIT meetup vol. 11 ϑϩϯτΤϯυߚനLT߹ઓ 2020/12/18 @spring-raining 1 ͋ͳͨ୭ʁ • HN: ͸Δ͞Ί @spring-raining • LINE ϑϩϯτΤϯυΤϯδχΞ • ࠷ۙ͸SVGͷdଐੑΛோΊΔ࢓ࣄΛ͍ͯ͠·͢ 2 ฏ࿨ͳCSS in JSଜʹ ͋Δ೔ࠇધ͕΍͖ͬͯͨ 3 4 ＿＿＿ 　　　　　　　／　　 　 　＼ ／ノ　　＼　　 u. ＼　！？ 　　　　／ （•） 　（•） 　　　＼... 続きを読む

react-wc: Web ComponentsとReactで実現するCSS in JSの形 - uhyo/blog

2020/10/03 15 users styled-components React uhyo

CSS in JSはJavaScriptのコードの中にCSSを書く手法の総称で、CSS Modulesやstyled-componentsなどがよく利用されています。 この記事では、筆者がCSS in JSについて考えてたどり着いた一つの解を紹介します。 また、そのために作ったライブラリreact-wcを紹介します。 Shadow DOMを活用する 筆者がたどり着いた考えは、... 続きを読む

styled-components（CSS in JS）をやめた理由と、不完全なCSS Modulesを愛する方法 - Qiita

2020/03/11 19 users styled-components Problem CSS

Help us understand the problem. What is going on with this article? styled-components 画像は styled-components ツライっていう顔です。 Angularのようにスタイリングまで面倒を見てくれるUIフレームワークならまだしも、Reactの場合はコンポーネントのスタイリング方法も自身で選択しなければいけません。CSSのス... 続きを読む

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

2019/06/29 132 users Qiita CSS Modules Vue.js 装飾 手法

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

CSS in JSはCSSの書き方をどのように変えるのか - yuhei blog

2018/11/22 235 users CSS yuhei blog セレクタ 根源 書き方

CSSの難しさの根源はセレクタにある。CSS設計のための方法論ではどのようにしてセレクタと関わるべきかについて語られる。 その関わり方がCSSのみで実現できなければならないという制約を捨てたのがいわゆるCSS in JSの類（定義的に微妙なやつも全部ひっくるめて）だ。可能性は一気に広がり無数のライブラリが生み出され... 続きを読む

CSS in JS(Elm)したら想像以上に良かった - ジンジャー研究室

2016/05/30 278 users ELM React界隈 変数 CSS 前々

2016 - 05 - 30 CSS in JS(Elm)したら想像以上に良かった React界隈では結構前から 「 CSS in JS」 と言って、雑に言うと「 CSS はイケてないからJSでインラインスタイルを書いてしまえ」という話がある。（ちゃんと知りたい人は こちら ） 自分も前々から CSS は変数が使えないとか名前が被るとか諸々イケてないのは同意してたんだけど、じゃあJSで書くのが良い... 続きを読む

React: CSS in JS // Speaker Deck

2014/11/09 97 users React Speaker Deck

All slide content and descriptions are owned by their creators. 続きを読む