はてなにおける CSS Modules、及び CSS Modules に足りないもの / CSS Modules in Hatena, and CSS Modules missing parts

2024/04/19 17 users はてな

BARフロントえんどう #2 「CSS Library / Framework」で発表した資料です。 続きを読む

CSS Modulesを型安全にする仕組み

2023/11/07 6 users 補完 ライブラリ CSSファイル クラス チーム

CSS Modulesのつらみ styled-componentsなどのCSS-in-JS系ライブラリからCSS Modulesに移行すると、クラス名の補完が効かないことでフラァストレーション⚡️を感じることはありませんか？ 私はめちゃめちゃありました。 そこで私のチームではtyped-css-modulesというライブラリを使用して、 CSSファイルから自動でクラス... 続きを読む

CSS Modules で作る SVG Icon Component

2023/07/26 7 users

SVG Icon をどう作るか SVG の色を変更するために、SVG を imort し、インラインレンダリングする方法があります。レンダリングされた svg に対し CSS 指定でpath { fill: #ff0; }の様に指定をすると、色の変更が可能です。他、SVG のパラメーターを調整するなどして、サイズ調整が可能になります。 ただ、インラインレ... 続きを読む

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 の命名に迷ったら

2022/10/03 8 users 命名 tailwind 発端 Tailwind CSS 実際

先日、こちらの記事「Tailwind 考」を発端に、Tailwind CSS を愛用されている方達の間では「命名を考えなくてもよい」という点を、高く評価されているように感じました。実際、stylede-components はコンポーネント毎に命名するのが一般的ですし、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 続きを読む

WAI-ARIA 準拠には CSS Modules が最適という話

2021/06/18 11 users WAI-ARIA セマンティック 準拠 注釈 手がかり

CSS と WAI-ARIA 「WAI-ARIA」はブラウザー・支援技術が認識できる「意味」を注釈することで、ユーザーの理解を助ける技術です。この与えられた注釈は CSS にも共有され、意味をたよりに装飾の手がかりとすることができます。 セマンティックな「状態」表現 特別な理由があり「セマンティックではない」以下の様なマーク... 続きを読む

それでも私がTailwind CSSではなく、CSS Modulesを推す理由 - Qiita

2021/06/10 38 users CSS バス Qiita 賛否 変遷

色々書き比べた結果Tailwind CSSにしたという話 こちらの記事がバズっていた(6/9現在 over 200likes)為、読ませて頂きました。 これまで主観的な印象と薄い議論で賛否が分かれていたTailwind CSSについてこれまでのcssの技術の変遷を踏まえて技術的にかなり踏み込まれた考察の上で選定の理由が書かれており、Tailwind CS... 続きを読む

hygen で生成 - 対話形式の Component 雛形 -

2020/10/18 13 users component module StorYBook 雛形

Component 作成にあたり、storybook や test も一度にコミットする場面が増えてきました。そして CSS Modules や、特定 Component 専用の custom hooks など、一つの Component を構成するファイル群はそれなりの量になってきます。例えば、以下の様な module 構成の Component です。これを手作業で作成するとなると、... 続きを読む

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を活用する 筆者がたどり着いた考えは、... 続きを読む

Scoped CSSにおけるCSS設計手法 - ICS MEDIA

2020/05/15 34 users ICS MEDIA CSS設計手法 ICS CSS CSS設計

Vue.jsでCSSを利用する際にScoped CSSやCSS Modules、CSS-in-JSなどの手法があります。とくにScoped CSSは気軽に利用できるため、利用する機会も多くなって来るかと思います。 Scoped CSSがあればCSS設計を使わなくてもよいという意見もありますがはたして本当なのでしょうか？ ICSではScoped CSSにおけるCSS設計に関す... 続きを読む

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 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」へ... 続きを読む

ElmにクリーンでハックのないCSS modulesを

2018/10/07 18 users ELM バック

のように自動的に書き換えてしまうのです。 もちろんCSSファイルのクラス名を書き換えるだけでは本来の text クラスを持つHTML要素にスタイルが適用されなくなってしまいますから、HTML要素の側でも対応できるように書き換えたクラス名の対応関係を JSON オブジェクトとして以下のように出力します。 HTML側がこの JSON ... 続きを読む

社内で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と... 続きを読む