タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
CSS Modulesの歴史、現在、これから - Hatena Developer Blog
マンガメディア開発チームの id:mizdra です。半年ほど前から「フロントエンドエキスパート」という肩書きをもらい、社内でフロントエンドの啓蒙活動をしています。具体的にどんな活動をしているかについては、社内のポッドキャストで少し話しましたので、興味があれば聞いてみてください。 developer.hatenastaff.com 最近、私はReactを採用する社内プロダクトでのCSSの書き方を検討していました。最終的にそのプロダクトでは、CSS Modulesを採用するに至りました。しかしその過程で、CSS Modulesのメンテナンス体制に対して懸念があり、将来的な存続を危ぶむ声が界隈にあることを知りました。 ただし、実際にメンテナンス体制について調べてみたところ、万全ではないものの引き続きメンテナンスがされていて、使用もできることが分かりました。そこで、今回はCSS Modulesに
*2021 6/11追記 『でもクラス名考えるのめんどくさい』問題についての私の見解を大幅加筆しました。 *本記事はピュアなCSSについてのある程度の知識があり、Tailwind CSSの採用について考えている層を対象読者としています。ピュアCSSの知識が乏しく、最適なCSSフレームワークを探している読者は対象としていません。 色々書き比べた結果Tailwind CSSにしたという話 こちらの記事がバズっていた(6/9現在 over 200likes)為、読ませて頂きました。 これまで主観的な印象と薄い議論で賛否が分かれていたTailwind CSSについてこれまでのcssの技術の変遷を踏まえて技術的にかなり踏み込まれた考察の上で選定の理由が書かれており、Tailwind CSSアンチ派の私にとっても非常に勉強になる記事でありました。リスペクト。 その上で、こちらの記事では私が『それでもC
コンポーネント内で閉じた装飾の手法として、 Scoped CSS(vue-loader の機能)や CSS Modules, CSS in JS などが流行っています1。 Vue.js で Single File Components を利用する場合、 Scoped CSS は手軽に利用できますが CSS Modules についても手軽に利用ができることがわかったので、比較をしてみました。 Scoped CSS, CSS Modules の利用方法 実際に手を動かして検証されたい方は、以前に書いた記事2を参照してプロジェクトを作成してください。
コードジャンプ可能な CSS Modules を実現する happy-css-modules の紹介 - mizdra's blog
弊社では React で CSS を書くための手法として CSS Modules を全面的に採用しています。そこで CSS Modules を使った開発をより快適にするために、「happy-css-modules」というツールを作りました。 happy-css-modules のデモ。 この記事ではこのツールが必要になった背景、導入方法、そしてツールの技術的な仕組みについて紹介します。 CSS Modules の問題点と、typed-css-modules による解決 CSS Modules では、デフォルトでは存在しないクラス名を使用しても、(プロジェクトの設定次第ですが) TypeScript のコンパイルエラーが出ることはありません。 import styles from './Button.module.css'; function Button() { return ( <but
styled-components（CSS in JS）をやめた理由と、不完全なCSS Modulesを愛する方法 - Qiita
styled-components 画像は styled-components ツライっていう顔です。 Angularのようにスタイリングまで面倒を見てくれるUIフレームワークならまだしも、Reactの場合はコンポーネントのスタイリング方法も自身で選択しなければいけません。CSSのスタイリング方法/設計はいくつか存在しますが、どれも一長一短で、やはり銀の弾丸は存在しません。スタイリング方法を選択可能なUIフレームワークは、この混沌とした選択肢の中から価値を見出す必要があるわけです。 僕はBEMによる人力CSS管理（Sass/Less/Stylus）から、 { fontSize: 14 } のようなJSオブジェクト形式のCSS in JS、 styled-components のようなTemplate Stringsを利用したCSS in JS、そしてCSS Modulesまで幅広く公私とも
Next.js 9.2 から CSS Modules がビルトインサポート対象になった。 CSS最適化に関して、組み込みサポートのレールから逸れると、ページ単位で最適化された静的CSSの生成不全に陥る。少しでもパフォーマンスの良い Next.js App を構築したいのなら、CSS Modules 一択というのが現状で、CSS in JS に慣れ親しんだ身からすると正直辛い現実だ。 CSS in JS よりも CSS Modules の方が、ロードタイム・ランタイムともに、パフォーマンス面で有利なことは知られている。こちらのベンチマークテストが参考になる。 しかし、本来であるなら皆 CSS in JS を使いたいのではないか。あえてレガシーな CSS Modules 推奨とする理由は、CSS という難儀な仕組みを乗り越えるため、技術的に「そうせざるを得ない」理由が他にもあるのではないか。真
Our frontend codebase is a single-page application powered by Create React App (CRA), written in TypeScript, and using GraphQL for the API. The existing styling approach used CSS Modules without a design system. CSS Modules are CSS files in which all class and animation names are scoped locally by default. They get compiled as part of the build step—with bundler technology like Webpack—and are nat
CSS と WAI-ARIA 「WAI-ARIA」はブラウザー・支援技術が認識できる「意味」を注釈することで、ユーザーの理解を助ける技術です。この与えられた注釈は CSS にも共有され、意味をたよりに装飾の手がかりとすることができます。 セマンティックな「状態」表現 特別な理由があり「セマンティックではない」以下の様なマークアップを行った場合をみてみます。spanタグの class 名に btnの名前が付与されていますが、ブラウザー・支援技術は、以下をボタンだと認識できません。
CSS Modules の命名に迷ったら
先日、こちらの記事「Tailwind 考」を発端に、Tailwind CSS を愛用されている方達の間では「命名を考えなくてもよい」という点を、高く評価されているように感じました。実際、stylede-components はコンポーネント毎に命名するのが一般的ですし、CSS Modules も書き方によっては、セレクター名称をたくさん考えなければいけません。 職場で働く同僚の間でも、要素に直接スタイルをあてない書き方だと「命名規則で迷いそう、ガイドラインが必要そう」という声を聞きます。普段 CSS Modules を利用している筆者ですが、コーディング時命名に迷うことはかなり稀です。「迷わないために何を基準にすべきか？」について、わたしが普段ヒントにしている点を紹介します。 UI コンポーネントを細分化する まずはじめに検討するのは、UI コンポーネントの細分化です。UI コンポーネント
はてなにおける CSS Modules、及び CSS Modules に足りないもの / CSS Modules in Hatena, and CSS Modules missing parts
BARフロントえんどう #2 「CSS Library / Framework」で発表した資料です。
【React/Vue.js】コンポーネント指向と好相性なCSS Modulesを用いたCSS設計について｜Offers Tech Blog
概要 こんにちは、Offers を運営している株式会社 overflow の Software Engineer（主戦場はフロントエンド）の Kazuya です。今回は、CSS Modules を用いたコンポーネントの CSS 設計について紹介します。 コンポーネントを作成する際に、どのような CSS 設計にすればいいのか悩んだ方も多いのではないでしょうか。（筆者はよく探求の旅に出ています）本記事では、昨今フロントエンド開発で採用されるケースが増えている「CSS Modules」を用いた CSS 設計を実装例を元に解説していますので、ぜひ参考にしてもらえればと思います。 おすすめの記事 はじめに 本記事では、CSS Modules を用いたコンポーネントの CSS 設計について紹介します。基本的に他のフレームワークや言語でも活用できますが、チームメンバーのスキルアセット、要件定義など様々な
Next.js + CSS ModulesでFOUC（CSSの適用遅れによるちらつき）が発生したときの暫定対策
Next.js v10.0.6時点の情報です。最新の情報はこちらのIssueを追うのが良さそうです。 https://github.com/vercel/next.js/issues/18769 Next.jsに根本的な原因があるかどうかはまだ確認できていません 発生していた問題 はじめて https://zenn.dev を読み込んだときに、一瞬スタイルがあたっていない状態で表示されてしまう問題が発生していました。 いわゆるFOUC（Flash of unstyled content）と呼ばれる現象です。少し遅れてスタイルがあたるため、ちらつき・がたつきが生じてユーザー体験がよくありません。 ちなみに発生する条件は以下です。 Next.js で CSS Modulesを使用（styled-componentsでは問題なし） 後述のIssueではstyled-jsxでも同じ問題が報告されて
CSS Modulesのつらみ styled-componentsなどのCSS-in-JS系ライブラリからCSS Modulesに移行すると、クラス名の補完が効かないことでフラァストレーション⚡️を感じることはありませんか？ 私はめちゃめちゃありました。 そこで私のチームではtyped-css-modulesというライブラリを使用して、 CSSファイルから自動でクラス名の型を生成し安寧を手に入れています。 そんな便利なtyped-css-modulesについてコードリーディングし仕組みを追っていこう！というのがこの記事の目的です。 typed-css-modulesの使い方
Next.jsにCSS Modulesを導入する
2020/11/30時点では、Next.jsではなんとなくCSS Modulesを推しているような空気がある。ビルトインサポートしてるし。 これまでCSS Modulesから逃げ続けてきたけど、このツイートを見て、そうだよなーーーCSS Modulesやってみるかーーーって気になってきた。 というわけでやってみる
この<Icon />コンポーネントを使用すると、以下キャプチャのようになります。 UI ライブラリから提供されているものを使用する選択肢もありますが、デザイナーが用意した SVG を使用する場合は自作する必要があります。自作<Icon />コンポーネントのフォルダ構成は、概ね以下のようになるでしょう。 SVG Icon Component をどう作るか アイコン画像を背景画像ではなく SVG にする理由は「塗り色」を動的に変更したいためです。新色を追加するとき、全種のアイコン画像を追加するのは大変です。SVG であれば、要素に対しpath { fill: #ff0; }のように CSS 指定をすることで動的に塗り色を変更できるため、このようなケースでは「インラインレンダリング」が選択できます。インラインレンダリングであれば、塗り色だけでなくサイズも動的に変更できます。 ただし、インラインレ
SassからCSS Modules、そしてstyled-componentsに乗り換えた話｜食べログ フロントエンドエンジニアブログ
この記事は食べログアドベントカレンダー2020の2日目の記事です。 こんにちは。食べログFE（フロントエンド）チームの金野です。 以前の記事でもご紹介しました通り、現在食べログは、jQuery+Railsだったフロントエンド環境をReact/TypeScriptに置き換えるリプレースを進めています。 CSSもSassからCSS Modulesを経てstyled-componentsに移行中です。 今回は、「どうしてその技術を選んだか」という技術選定の経緯や、どのような規約で運用しているかをご紹介します！ なぜリプレースを始めたのかまず、CSSの技術選定について触れる前に、リプレースの目的について話さなくてはいけません。 食べログは今年で開設から15年となるサービスです。システムも組織も巨大で、且つ複雑な機能が多くあります。 特にフロントエンドは場当たり的な実装も多く、技術的負債が開発時のボ
前提 実行速度は可能な限り上げたいものの、作ろうとしているのは実行速度を極力 上げる必要があるアプリケーションではない チームメンバーは今のところCSS in JSの知見しかない よほどメリットが上回らない限り、なるべくwebpackやbabelやpostcssなどの設定を書きたくない 感じていた課題 書きやすいが読みづらい 幾つかの記事で述べられているように、ただスタイルを付与して別名を付けたコンポーネントなのか、処理上/atomic design上の意味のあるReact Componentなのか判別しづらい styled-componentsをnext.js SSRで動かすための対処 のように _doucment.tsx に一手間挟む必要がある CSS in JSとstylelintの相性の悪さ 2020年秋頃だと babel設定が特定の条件を満たしているときに https://git
はじめに この記事は #EveOneZenn (Everyday One Zenn) vol.09 です。 CSS設計のひとつである rscss を CSS Modules (React向け)にアレンジしてみたので紹介します。 紹介する規約を使った場合、下記のようなクラス名で CSS Modules を運用できます。 import React from 'react'; import cn from 'classnames'; import styles from 'styles.module.scss'; const Component = (props) => ( <button className={cn( styles.searchButton, { [styles.Disabled]: props.disabled } )} > <span className={styles.i
Astro と CSS Modules を使用した React のコンポーネントの、開発と本番時における style の優先順の差異 | DevelopersIO
すこし前の話になるのですが、SSG している自分のブログをNext.jsからAstroに置き換えました。置き換えた経緯などはそちらで記事にしています。そのためここでは、Astro コンポーネントのスタイルについての詳細には言及していません。 今回発生した現象修正した PR としては以下になります。 AstroからReactのコンポーネントに対してスタイリングをしているCSSを修正 #946 経緯 自分のブログを時間があるときに少しずつ機能実装しているのですが、あるとき本番環境でスタイルが崩れていることに気づきました。 結構目立つスタイルの崩れだったので、なぜ開発中に気づかなかったのか疑問に思いながら開発環境を立ち上げると、現象の再現はしませんでした。 本番環境 開発環境 本番環境では次のようになっています。 index.6061e360.css ファイルが生成されていて、どちらも同じファイ
GitHub - mizdra/happy-css-modules: Typed, definition jumpable CSS Modules. Moreover, easy!
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
Next.jsで使用しているのはdeprecatedなLibSassではなくDart Sassなので、@importではなく@useが使える。やったね！ ディレクトリ構成はとりあえず以下のようにしている。 src/styles以下にグローバルなSCSSを配置 アプリ全体で読み込むglobal.scss 色やサイズ等の変数（デザイントークン）定義 各種mixin 各コンポーネントのSCSSは各コンポーネントのファイルと同じフォルダに配置 グローバルなSCSSや定義のインポートをしやすくするため、tsconfig.jsonにエイリアスを定義
CSSは、勉強してないのをごまかすためにイキって強がる人の風評被害を受けやすく、実際よりも低く評価されてしまうことがよくあります。 でも現代のCSSは意外に良いものですし、依然として残る課題に対しても「名前空間がないからCSSマジつかえねぇわ〜」と知ったかぶりして書かない理由を探すのではなく、やはり生産的に解決したいものです。 そこで、この記事ではCSS modulesを使って お手軽に CSSに名前空間を擬似的に導入します。 また、ParcelでCSS modulesを使う時に遭遇するバグの回避方法もあわせてお見せします。 CSSに名前空間がないことで起きる問題 CSSには名前空間がないため、たとえばこれからご紹介する例のように複数のCSSファイルを読み込んだ際に意図せぬ見た目になってしまうことがあります。 まず、以下の yagi.css だけを読み込んでみましょう。 .yagi { w
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)
はじめに 最近やっているプロダクトで vanilla-extract を導入をしたので記事にします。 vanilla-extract は CSS Modules-in-TypeScript と言って、 TypeScript で書ける CSS Modules というのを知り「良さそう！」と思ったのがきっかけです。 まずは現在のスタイリング事情を振り返ってみます。 昨今の React のスタイリング事情 昨今のスタイリング事情としては CSS Modules に分があるっぽい。state of css 2021 を見てみても明らかですね。 そもそも Next.js も CSS Modules をビルドインサポートしていたりしていて CSS Modules 押し？っぽい節もあります。が、その反面 CSS in JS として Vercel 謹製の Styled JSX もあったりしてますね。 Ne
Inline Webpack CSS Modules classNames, reducing bundle size. https://npm.im/constant-locals-loader
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
最近のReactによる開発は、CSS ModulesとCSS in JSのどちらかを選択する。 実際、どっちの方が使いやすいの？ってあたりを少し考察する。 CSS Modulesの書き方（comoposeなど）やCSS in JSの書き方には触れない。 CSS Modules と CSS in JS の共通項 そもそも、なぜCSS ModulesやCSS in JSを使うのかってあたりから話す。 グローバルなCSS CSSは基本的にグローバルスコープである。 そうなると、クラス名が被ってしまった際に先に書かれた方が上書きされてしまう。 もし、小規模なアプリケーションであれば、こういった問題を考慮する必要はない。 しかし、大規模なアプリケーションになってくるとそうは言っていられない。 数万行のCSS、数人〜数十人のチーム、様々な書き方。それらを全て効率よく管理することは難しい。 CSS設計
【CSF3.0対応】Next.js + CSS Modules（Sass）にStorybookを導入し、諸々のセットアップを済まそう
インストール完了後、pagesとstylesをsrcディレクトリに移動してください。この先の手順は、src配下にpagesやstylesディレクトリが配置されていることを前提に進めています。 Prettier + Stylelint + ESLintを含めたNext.jsの環境構築は以下を参考にしてみてください🌟 Storybookのインストール プロジェクトのルートディレクトリで以下コマンドを実行します。
<template> <div :class="$style.container"> ExampleComponent! </div> </template> CSS Modules では親コンポーネントと子コンポーネントの間でクラス名の重複を気にする必要がない1ので、Scoped CSS に比べてあまり頭を使わずに短いクラス名を付けられます。 この2つのメリットが大きいので $style. を付くことで可読性が下がったり、書きづらかったりといったことは感じられませんでした。 むしろ注意が必要なのは、 :class で複数のクラスを当てたい場合は :class="[$style.class_name_1, $style.class_name_2]" のように配列構文を用いる必要があることです2。 ポイントは3つです: 親コンポーネントと子コンポーネントの間で、クラス名の重複を気にする必要は
GitHub - skovy/typed-scss-modules: 🎁 Generate type definitions (.d.ts) for CSS Modules using SCSS
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
GitHub - mrmckeb/typescript-plugin-css-modules: A TypeScript language service plugin providing support for CSS Modules.
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.
はじめに絶賛、CSS Modules を使ったプロジェクトで作業している kimizuy です。最近、vanilla-extract という良さげな CSS フレームワークの 1.0.0 がリリースされたので、本記事では CSS modules と vanilla-extract を比較して、この新しいフレームワークの利点について書きたいと思います。 CSS Modules で作業するときの辛さCSS Modules はローカルスコープがデフォルトの CSS フレームワークです。CSS の名前衝突の問題を回避できて、これ自体はとても強力な機能です。 ただ問題なのは、作業する際に CSS ファイルでクラスネームを追加したり変えたりしてもコンポーネント側でエラーが出ないので気づけないこと、これに尽きます。 つまり、コンポーネント側でクラスネームが間違っていてもエラーが出ないため、実行するまでス
【React / TypeScript】CSS modulesの型を生成する | Offers Tech Blog
概要 こんにちは、Offers を運営している株式会社 overflow の Software Engineer（主戦場はフロントエンド）の Kazuya です。今回は、CSS modules の型を生成する方法について紹介します。 デフォルトの状態では、tsx(React)内で import した CSS は型が付与されないため、やや保守性に欠けるところがあります。今回は CSS を TypeScript の世界に取り入れて型に守られた世界を目指していきたいと考えていますので、ぜひ最後までご付き合いください。 関連記事 はじめに 本記事では、CSS modules の型を生成する方法を React ベースで紹介します。基本的に他のフレームワークや言語でも活用できますが、チームメンバーのスキルアセット、要件定義など様々な要因で紹介する内容とマッチしない場合があります。今回は設計の一例である
これは React #2 Advent Calendar 2020 5 日目の記事です。 目的 CSS Modules を使いつつ、ダーク or ライトテーマの状態は React でステート管理する(@media (prefers-color-scheme: dark) ではなく)場合の実装方法を考えてみました。 よくある要件だと思ったので似た記事が調べて出てくると思ったのですが、きっと CSS in JS でやっちゃうからか、なかなか見つかりませんでした。 要件 テーマは React のステートで持ちたい 現在表示中のテーマを React のステートとして管理しておきたい。OS のダークモード設定に依存せずにダーク or ライトを切り替えたいと思うことがあるので(僕だけかもしれない)。 const [theme, setTheme] = React.useState<"light" |
ブックマークしました ここにツイート内容が記載されます https://b.hatena.ne.jp/URLはspanで囲んでください Twitterで共有
ViteのCSS Modulesは、JSのようにTree shakingできない - console.lealog();
なんとなしにビルド後のCSSファイルを眺めてて、なんで使ってないUIパーツのCSS定義が含まれてるの・・？って思ったのがきっかけ。 こういうこと たとえば、こういうディレクトリ構成でコンポーネントを書いてたとする。 - components - action-buttons - index.jsx - styles.module.css - page.jsxコンポーネントの実装はこのように。 // index.jsx import styles from "./styles.module.css"; export const ButtonA = () => <button class={styles.buttonA}>A</button> export const ButtonB = () => <button class={styles.buttonB}>B</button> expor
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! を
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
それでも私がTailwind CSSではなく、CSS Modulesを推す理由 - Qiita
【Vue.js】Scoped CSSよりCSS Modulesの方がベターだった件 - Qiita
Next.js が CSS Modules を推奨する真相に迫りたい
Goodbye CSS Modules, Hello TailwindCSS
WAI-ARIA 準拠には CSS Modules が最適という話
CSS Modulesを型安全にする仕組み
CSS Modules で作る SVG Icon Component
新しくnext.jsで作るプロダクトで CSS Modules か CSS in JS か決める調査や思考のログ
短いクラス名で運用できる CSS設計 rscss を CSS Modules 向けにアレンジしてみた
Next.js+TypeScript+CSS Modules+SCSS環境（2022.01）
CSS modulesを使ってCSSで名前空間を実現する - Qiita
CSS Modules-in-TypeScript派に俺はなる
ReactにおけるCSS ModulesとCSS in JSの話 | ぎじゅつばこ
【Vue.js】CSS Modulesで書き始めるときに見るべきTips - Qiita
型安全な CSS Modules？「vanilla-extract」
ダーク or ライトテーマの状態を React.useState で管理しながら CSS Modulesを使用する
『それでも私がTailwind CSSではなく、CSS Modulesを推す理由 - Qiita』へのコメント
www.asahi.com
fujiraji.diary.to
laboratory.kazuuu.net
cloud.google.com
www.tarotaro1995.com
cloud.google.com