BARフロントえんどう #2 「CSS Library / Framework」で発表した資料です。
はてなにおける CSS Modules、及び CSS Modules に足りないもの / CSS Modules in Hatena, and CSS Modules missing parts
BARフロントえんどう #2 「CSS Library / Framework」で発表した資料です。
CSS Modulesのつらみ styled-componentsなどのCSS-in-JS系ライブラリからCSS Modulesに移行すると、クラス名の補完が効かないことでフラァストレーション⚡️を感じることはありませんか？ 私はめちゃめちゃありました。 そこで私のチームではtyped-css-modulesというライブラリを使用して、 CSSファイルから自動でクラス名の型を生成し安寧を手に入れています。 そんな便利なtyped-css-modulesについてコードリーディングし仕組みを追っていこう！というのがこの記事の目的です。 typed-css-modulesの使い方
Vueで試すCSS modules | Raccoon Tech Blog [株式会社ラクーンホールディングス 技術戦略部ブログ]
開発チームの下田です。 新年あけましておめでとうございます！ 入れ替わりが激しいフロントエンドの技術をキャッチアップするモダンフロントエンド勉強会を社内で月2回開催しています。今回はVueの単一ファイルコンポーネントからCSS Modulesを使う方法を取り上げました。 今回のテーマはCSS Modulesです。VueのCSSモジュールではありません。紛らわしいですね・・この先VueのCSSモジュールの話は一切出てきませんので、CSS Modulesと言ったらCSS Modulesの話です。 CSS Modulesはreactとセットで解説している場合が多いですが、HTMLのテンプレートエンジンには依存しない、独立した仕様です。Vueで使ってもいいですし、他のフレームワークで使用しても問題ありません。 目的と環境 今回はわかりやすさを重視して、headerが青、mainが赤地に白の非常にダ
![Vueで試すCSS modules | Raccoon Tech Blog [株式会社ラクーンホールディングス 技術戦略部ブログ]](https://cdn-ak-scissors.b.st-hatena.com/image/square/86c57255ef0ee3b29f65ca182e3808f9994f44de/height=288;version=1;width=512/https%3A%2F%2Ftechblog.raccoon.ne.jp%2Fwp-content%2Fuploads%2F2023%2F12%2Feye-1.png)
【App Router時代のNext.jsスタイリング戦略】CSS Modules vs Tailwind vs Zero-Runtime
はじめに みなさん、App Router時代になってから、スタイリング戦略に悩んでいませんか？ App Router環境下では、JS実行を必要とするRuntime CSS-in-JSがサポートされなくなり従来のスタイリング戦略を見直す必要に迫られています。 本記事では、App Router時代におけるスタイリング戦略として、CSS Modules、 Tailwind CSS、 Zero-Runtime CSS-in-JSの3つのスタイリングアプローチを比較検討し、それぞれのメリット・デメリットを説明していきます！ （RutimeやZero-Runtimeについては別記事内で詳しく解説しています。） BuildからRuntime時までの流れの解説 本記事ではパフォーマンスについても説明していきます。 それにあたって、Server ComponentsとClient Componentsの流れ
CSS Modules をハッピーにする
この記事は株式会社ゆめみの23卒 Advent Calendar 20233日目の記事です。 React × TypeScript 開発において、CSS フレームワーク選定する際に CSS Modules が候補に上がると思います。その際のネガティブな意見として開発者体験が他のフレームワークと比べて良くないというのがあるのではないでしょうか。 例えば存在しないクラス名の指定が可能であったり、クラス名の定義元を参照しようとしても global.d.ts に遷移してしまうといったことがあります。 そこで今回は CSS Modules での開発者体験をハッピーにする happy-css-modules の紹介と、その導入について紹介します。 happy-css-modules とは Typed, definition jumpable CSS Modules. Moreover, easy! を
概要 React で CSS をゴリゴリ記述したく, Open Props + CSS Modules の構成を組んだ備忘録です. Open Props は CSS の多様な変数やカスタムメディアクエリ等を提供してくれるライブラリであり, デザインの統一性を保ったり, 記述の煩雑さを低減してくれます. CSS Modules は CSS をスコープ化し, CSS Class 名の衝突などを防いでくれます. これらを利用していくことで, 効率的に Component 向けの CSS を書いていくことができます. しかし, CSS Modules はそれ単体では型情報がなかったり, Open Props はカスタムメディアクエリの利用にプラグインの導入が必要だったりと迷いポイントがじんわりあります. TypeScript や PostCSS のプラグインを利用して, これらを解消しつつ, 快適
Native CSS nesting support for css modules · Issue #55053 · vercel/next.js
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
"scripts": { "dev": "run-p dev:scss vite", "vite": "vite", "dev:scss": "typed-scss-modules src --watch", "build": "tsc && vite build", "preview": "vite preview", },
import classNames from "./foo.module.css"; export const Foo = () => <div className={classNames.foo}></div>; from global の使いみち CSS Modulesを使うと、全てのクラスにハッシュが付いてくれるので便利な半面、ハッシュなしのクラスを使えたほうが良い場合もあります。(:global的な使い方ではなく) グローバルなクラスセレクタと連携したい場合 ハッシュ付きクラス名とハッシュなしクラス名を子結合子や子孫結合子を組み合わせる場合 ファイル間を横断して作用させたい場合 特にスタイルに依存した理由でハッシュなしクラス名を使用したい場合、js側で追加するよりも、CSS側で指定できたほうが、責務を適切に閉じられます。 当然影響範囲が広がればリスクも生じるので、適切な管理のもとに
RemixにCSS Modulesを導入する
はじめに リリースノート: https://github.com/remix-run/remix/releases/tag/remix%401.16.0 公式ドキュメント: https://remix.run/docs/en/main/guides/styling#css-modules Remix のバージョン 1.16.0 から CSS Bundling が stable 化され、CSS Modules などがデフォルトで使えるようになりました。 数行追加するだけなのでとても簡単です。 使用するパッケージのバージョンは記事執筆時点で以下の通りです。 @remix-run/css-bundle@1.17.1 @remix-run/dev@1.17.1 @remix-run/node@1.17.1 @remix-run/react@1.17.1 @remix-run/serve@1.17.
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSS Modulesを型安全にする仕組み
Vite + Open Props + CSS Modules + TypeScriptでゴリゴリにCSSを書き殴る
Vite + react + TypSscript + CSS modules の設定について
CSS Modules の composes: xxx from global; って知ってる？