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という、CSSの新しい設計概念・指針のようなものがある。 CSS Modulesチームの1人であるGlen Maddern氏が書いた「CSS Modules - Welcome to the Future」という記事の翻訳がバズっていたので、僕がCSS Modulesについて思ったことをまとてみる。「CSS Modulesとは何か」ということは、上記の記事に書かれているのでここではあまり触れない。 CSS Modulesとコンポーネント設計 CSSのルールセットは全てがグローバル定義であり、CSS（Cascading Style Sheets）というスタイルシート言語の最大の特徴である"カスケーディング"という機能により、CSSファイルを見ただけでそのスタイルの影響範囲を理解することは難しい。 CSS Modulesは、CSSのルールセットの影響範囲を、Webアプリケ
コードジャンプ可能な 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
ng-kyoto 主催「ng-kyoto Angular Meetup #3」での発表資料です。 http://ng-kyoto.connpass.com/event/20512/
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の名前が付与されていますが、ブラウザー・支援技術は、以下をボタンだと認識できません。
GitHub - css-modules/css-modules: Documentation about 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. Dismiss alert
CSS Modules の命名に迷ったら
先日、こちらの記事「Tailwind 考」を発端に、Tailwind CSS を愛用されている方達の間では「命名を考えなくてもよい」という点を、高く評価されているように感じました。実際、stylede-components はコンポーネント毎に命名するのが一般的ですし、CSS Modules も書き方によっては、セレクター名称をたくさん考えなければいけません。 職場で働く同僚の間でも、要素に直接スタイルをあてない書き方だと「命名規則で迷いそう、ガイドラインが必要そう」という声を聞きます。普段 CSS Modules を利用している筆者ですが、コーディング時命名に迷うことはかなり稀です。「迷わないために何を基準にすべきか？」について、わたしが普段ヒントにしている点を紹介します。 UI コンポーネントを細分化する まずはじめに検討するのは、UI コンポーネントの細分化です。UI コンポーネント
css-modulesを止めようとしている話（具体的な解決編） - saneyuki_s log
BEMでいいじゃん話の続きその2にして, 具体的な解決編. 多分ここが気になる人が多いと思うのでなるべく箇条書きで済ませることにする. 背景 前回書いてた内容をまとめると以下のようになる. 無駄話が多いので前回は読まなくてもいいです. 追記: 前回読んでもらった方がいい気がしてきた. 時間が無い方はいったん飛ばしてくれて構わないのは変わらず. 状況 サービスの初期からwebpackのcss-loader（を用いたcss-modules）を使用していた これは（個人的には好きではないが）そこまでの問題ではなかった stylelintなどの各種のLint機構がそのまま使える上, CSSとUIコンポーネントのコードは分離できていた サービス開始時の鉄火場の中で, cascadingに基づく暗黙的なスタイルの継承を用いて, UI component treeにおいて祖先側が子孫側のスタイルを上書き
はてなにおける 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でも同じ問題が報告されて
React + TypeScript + CSS Modules によるコンポーネント指向フロントエンド開発の流れと知見 - Qiita
この記事は第2のドワンゴ Advent Calendar 2017 22日目の記事です。 ドワンゴでニコニコ生放送のWebフロントエンジニアをやっています、 @misuken です。 はじめに ここ1年半くらいは、主に ViewComponent(VC) と ContainerComponent(CC) 周りのアーキテクチャ設計、コンポーネント設計、実装を担当しています。 生放送のHTML5プレーヤーなどを開発してきました。 第1回 ニコ動／ニコ生 HTML5化への奮闘～ドワンゴ流動画配信サービスのつくりかた～ 今回はニコニコ生放送のViewComponent周りがどのように作られているのかを紹介したいと思います。 内容としては大体こんな感じです。 VCを中心とした設計から実装の流れ CSS Modulesを使いつつコンポーネントとデザインを柔軟に組み合わせられる仕組み ニコニコ生放送のコ
TypeScript + React JSX + CSS Modules で実現するタイプセーフなWeb開発 - Qiita
はじめに 以前、React JSX with TypeScript(1.6)にて書いたことがありますが、TypeScript 1.6以降ではReact JSXを直接コンパイルできるオプションが追加されています。 一般的にクライアントサイドWebアプリ開発は以下の3言語が土台ですが、 JavaScript HTML CSS TypeScriptのお陰で、1.と2.についてはタイプセーフな世界を手に入れたことになります(HTMLの要素名や属性名まで含めて、コンパイル時のチェックがされる) JavaScript -> TypeScript HTML -> React JSX(.tsx) CSS -> ??? こうなると、3. におけるCSSについても、何とかできんものかと期待するのが人情です。 今回のエントリは、CSS ModulesをTypeScript JSX環境に統合することで、タイプセー
CSS Modulesのつらみ styled-componentsなどのCSS-in-JS系ライブラリからCSS Modulesに移行すると、クラス名の補完が効かないことでフラァストレーション⚡️を感じることはありませんか？ 私はめちゃめちゃありました。 そこで私のチームではtyped-css-modulesというライブラリを使用して、 CSSファイルから自動でクラス名の型を生成し安寧を手に入れています。 そんな便利なtyped-css-modulesについてコードリーディングし仕組みを追っていこう！というのがこの記事の目的です。 typed-css-modulesの使い方
CSS Modules
If you wanted to identify an inflection point in the recent development of CSS thinking, you’d probably pick Christopher Chedeau’s “CSS in JS” talk from NationJS in November, 2014. It was a watershed moment that set a bunch of different minds spiralling off in their own directions like particles after a high-energy collision. For instance, React Style, jsxstyle and Radium are three of the newest,
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 Modulesの発想はよくわかったけど、具体的にどうやって導入したらいいかわかりにくく感じたので、webpackでCSS Modulesを使うための設定と、ReactでCSS Modulesを使う簡単な例を紹介します。 CSS Modulesの概要やいいところについてはこのあたりをどうぞ。 CSS Modules 所感 - morishitter blog CSSモジュール ― 明るい未来へようこそ CSS Modulesを行うための方法はwebpack以外にもいくつかあるようです。 Browserify pluginのcss-modulesifyも人気そうです。(発音できない) やってみる まずは、必要なモジュールをインストールします。 CSS Modulesを使うために、style-loaderとcss-loaderが必要です。 React+babel+webpack
ElmにクリーンでハックのないCSS modulesを
のように自動的に書き換えてしまうのです。 もちろんCSSファイルのクラス名を書き換えるだけでは本来の text クラスを持つHTML要素にスタイルが適用されなくなってしまいますから、書き換えたクラス名の対応関係を JSON オブジェクトとして以下のように出力します。 HTML側がこの JSON オブジェクトを使って適切なクラス名を各要素に付与するようにすることで、無事に CSS で定義したスタイルがその要素に適用されます。 このようなクラス名の衝突をなくす工夫によって、アトミックデザインなどに使える再利用可能な CSS の記述が可能になります。 関連手法との比較 「CSS modules を使いたいから Elm で CSS modules を使えるようにした」みたいなのは無能な人がやることです。 いったん落ち着いて「本当に Elm で CSS modules を使う新しい手法を考える必要が
CSS Evolution: From CSS, SASS, BEM, CSS Modules to Styled Components
CSS Evolution: From CSS, SASS, BEM, CSS Modules to Styled Components Since the beginnings of the Internet we’ve always had the need to style our websites, CSS has been around forever and has evolved at its own pace over the years, this article will take you through it. To begin with we need to be on the same page of what CSS is, I think we can all agree that css is used for describing the presenta
GitHub - pure-css/pure: A set of small, responsive CSS modules that you can use in every web project.
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 - tj/frontend-boilerplate: webpack-react-redux-babel-autoprefixer-hmr-postcss-css-modules-rucksack-boilerplate (unmaintained, I don't use it anymore)
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 - gajus/babel-plugin-react-css-modules: Transforms styleName to className using compile time CSS module resolution.
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
CSS Modules をもっと試す - アカベコマイリ
業務プロジェクトへ CSS Modules 導入を検討中。しかし JS/CSS ともに大きく設計変更されるため、いきなり採用するのは怖い。というわけで、そこそこの規模と複雑さを持つ examples-electron/audio-player で試してみた。このプロジェクトは Electron 製の簡易音楽プレーヤーになる。JS/CSS まわりはこんな感じ。 JavaScript AltJS は Babel と babel-preset-env、ES.next 範疇の機能と構文のみ使用、ターゲット設定は electron なので少し古い Chorome 相当になる View は React Flux は material-flux、いずれ redux か mobx あたりへ乗り換える予定 Bundler は webpack Electron の Main/Renderer プロセスともに
No more ガタンッ――React／Redux、Atomic Design、CSS Modulesを取り入れたアメブロのフロントエンド開発の裏側
No more ガタンッ――React／Redux、Atomic Design、CSS Modulesを取り入れたアメブロのフロントエンド開発の裏側：大規模ブログサイト表示速度改善 大解剖（2）（1/2 ページ） 2004年から続くブログサービス「アメブロ」が2016年9月にシステムをリニューアル。本連載では、そこで取り入れた主要な技術や、その効果を紹介していく。今回は、ReactやRedux、Atomic Designなど、フロントエンドを構成する技術について。 2004年から続くブログサービスである「アメブロ」は、2016年9月にシステムをリニューアルしました。本連載「大規模ブログサイト表示速度改善 大解剖」では、そこで取り入れた主要な技術や、その効果を紹介していきます。初回である前回の「アメブロでReactやIsomorphic Web Applicationを採用した理由――その成
What are CSS Modules and why do we need them? | CSS-Tricks
UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today. I’ve been intrigued by CSS Modules lately. If you haven’t heard of them, this post is for you. We’ll be looking at the project and it’s goals and aims. If you’re intrigued, stay tuned, as the next post will be about how to get started using the idea. If you’re looking to imp
GitHub - tsurupin/portfolio: A blog and Portfolio CMS built with Rails, React, Redux, Material-UI, 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. Dismiss alert
2016/9/14の勉強会にて発表された資料です。 SCRIPTY#6 ～フロントエンド紳士・淑女のための勉強会～ http://scripty.connpass.com/event/38935/Read less
GitHub - css-modules/webpack-demo: Working demo of CSS Modules, using Webpack's css-loader in module mode
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
CSS Evolution: From CSS, SASS, BEM, CSS Modules to Styled Components
Since the beginnings of the Internet we’ve always had the need to style our websites, CSS has been around forever and has evolved at its own pace over the years, this article will take you through it. To begin with we need to be on the same page of what CSS is, I think we can all agree that css is used for describing the presentation of a document written in a markup language. It’s no news that CS
このあいだ書いた記事の締めで予告したとおり Stylus からの移行先として PostCSS + cssnext を試す。 サンプル プロジェクト : examples-web-app/postcss 2017/12/29 追記 : cssnext は CSS.next と呼べるか？ 本記事のコメント欄にて @mysticateaさん から指摘され、cssnext の機能すべてを CSS.next と呼ぶのは妥当ではないと判断した。 w3c/csswg-drafts: CSS Working Group Editor Drafts [css-nesting] Status? · Issue #998 · w3c/csswg-drafts 私が CSS.next だと思っていた CSS Nesting Module は CSS Working Group (以下、csswg) の draft
GitHub - gajus/react-css-modules: Seamless mapping of class names to CSS modules inside of React components.
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 - css-modules/css-modulesify: A browserify plugin to load 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. Dismiss alert
GitHub - olebedev/go-starter-kit: [abandoned] Golang isomorphic react/hot reloadable/redux/css-modules/SSR starter kit
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 - olebedev/go-starter-kit: [abandoned] Golang isomorphic react/hot reloadable/redux/css-modules/SSR starter kit](https://cdn-ak-scissors.b.st-hatena.com/image/square/9c03bfcab09483a8dbda15818818b4bfa64717f4/height=288;version=1;width=512/https%3A%2F%2Fopengraph.githubassets.com%2F5854087ebd8b34584c8dbea006b0e8b9ecfce5d75a6a05737b9ea53aedbd51d1%2Folebedev%2Fgo-starter-kit)
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
それでも私がTailwind CSSではなく、CSS Modulesを推す理由 - Qiita
【Vue.js】Scoped CSSよりCSS Modulesの方がベターだった件 - Qiita
CSS Modules 所感 - morishitter blog
CSS in JS と CSS Modules // Speaker Deck
Next.js が CSS Modules を推奨する真相に迫りたい
Goodbye CSS Modules, Hello TailwindCSS
WAI-ARIA 準拠には CSS Modules が最適という話
CSS Modulesを型安全にする仕組み
CSS Modules で作る SVG Icon Component
webpackのcss-loaderでCSS Modulesをやる - Qiita
CSS Modulesのベストプラクティスを探る #scripty06
PostCSS + cssnext と CSS Modules を試す - アカベコマイリ