{"slug": "css-modules", "name": "CSS Modules", "category": "dev-libs", "category_name": "Libraries and frameworks", "description": "", "recommenders": 4, "commenters": 8, "warners": 2, "score": 1.763, "rising": -1.31, "first": "2025-12-04", "latest": "2026-09-27", "why": "I prefer vanilla CSS to frameworks but I find a lot of value in CSS modules.", "why_is_quote": true, "has_verdict": false, "sentiment": {"recommend": 4, "neutral": 2, "compare": 0, "warn": 2}, "spark": [0, 1, 0, 0, 0, 0, 3, 0, 0, 0, 0, 0], "listed": true, "loved": [], "caveat": "", "short_quote": "I prefer vanilla CSS to frameworks but I find a lot of value in CSS modules.", "kind": "", "icon": true, "domain": null, "github_repo": "github.com/css-modules/css-modules", "official_url": "https://github.com/css-modules/css-modules", "pricing": "", "aliases": ["CSS Modules"], "verdict": null, "praise": [{"label": "", "summary": "", "quotes": [{"id": 770969312, "item_id": 48185582, "url": "https://news.ycombinator.com/item?id=48185582", "by": "paulddraper", "date": "2026-05-18", "version": null, "stance": "recommend", "quote": "It's very easy to use", "excerpt": "> And of course if you're using React, obviously you want to use Tailwind CSS, right? Ok, you can certainly choose to use SASS or LESS if you seriously want to, but CSS post processors are all the rage these days. Or CSS Modules [1]. It's supported OOTB by virtually every CSS bundler: * Webpack (css-loader) * Rollup (rollup-plugin-postcss) * Vite * Parcel * Rspack * esbuild * Turbopack It's just vanilla CSS -- classe", "context": "", "use_case": "", "switched_from": "", "story": "The tyranny of single page apps"}, {"id": 770684177, "item_id": 48167761, "url": "https://news.ycombinator.com/item?id=48167761", "by": "bobthepanda", "date": "2026-05-17", "version": null, "stance": "recommend", "quote": "when i say css modules i mean something more akin to", "excerpt": "when i say css modules i mean something more akin to https://css-tricks.com/css-modules-part-1-need/", "context": "", "use_case": "", "switched_from": "", "story": "Moving away from Tailwind, and learning to structure my CSS"}, {"id": 770584224, "item_id": 48161514, "url": "https://news.ycombinator.com/item?id=48161514", "by": "efortis", "date": "2026-05-16", "version": null, "stance": "recommend", "quote": "CSS Modules are a simpler solution to cascading problems.", "excerpt": "CSS Modules are a simpler solution to cascading problems. They create unique class names, so your classes don't clash [1]. And they don't have the two main downsides of TW, which are readability [2] and tooling. Tooling for debugging and experimenting interactively with Chrome and FireFox DevTools. [1] https://x.com/efortis/status/1888304658080256099 [2] https://github.com/ericfortis/tailwind-eye", "context": "", "use_case": "", "switched_from": "", "story": "Moving away from Tailwind, and learning to structure my CSS"}, {"id": 738350816, "item_id": 46146926, "url": "https://news.ycombinator.com/item?id=46146926", "by": "tyleo", "date": "2025-12-04", "version": null, "stance": "recommend", "quote": "I prefer vanilla CSS to frameworks but I find a lot of value in CSS modules.", "excerpt": "I mostly agree. I prefer vanilla CSS to frameworks but I find a lot of value in CSS modules. In particular I use: 1. The `composes` feature to do something like base classes. 2. The import feature to get something like namespacing. Given the recent advancements in CSS, I won\u2019t be surprised if they eventually build something like `composes` into the base language. The namespacing seems more like an artifact of how you", "context": "", "use_case": "base classes and namespacing", "switched_from": "", "story": "Vanilla CSS is all you need"}]}], "caveats": [{"label": "", "summary": "", "quotes": [{"id": 745129184, "item_id": 46570574, "url": "https://news.ycombinator.com/item?id=46570574", "by": "troupo", "date": "2026-01-10", "version": null, "stance": "warn", "quote": "Requires setting up, requires learning an additional library.", "excerpt": "You're probably confusing something with something? CSS Modules are a JS-only third party solution re-invented/re-implemented in a dozen different ways for various JS frontend frameworks. Requires setting up, requires learning an additional library. If you mean these CSS modules: https://github.com/css-modules/css-modules?tab=readme-ov-file then they need to be supported by whatever build chain you use. And you liter", "context": "", "use_case": "", "switched_from": "", "story": "AI is a business model stress test"}]}], "who": [{"by": "xisnextbigthing", "context": "senior full-stack developer, 15+ years", "url": "https://news.ycombinator.com/item?id=46571167", "date": "2026-01-10"}], "tags": [], "use_cases": ["avoiding css class collisions", "base classes and namespacing"], "compared": [{"slug": "tailwind-css", "name": "Tailwind CSS", "co": 3, "switched_from": 0, "switched_to": 0}], "makers": [], "threads": [{"url": "https://news.ycombinator.com/item?id=48158400", "title": "Moving away from Tailwind, and learning to structure my CSS", "mentions": 3}, {"url": "https://news.ycombinator.com/item?id=46567392", "title": "AI is a business model stress test", "mentions": 2}, {"url": "https://news.ycombinator.com/item?id=49856193", "title": "Improving site performance by shipping more CSS", "mentions": 1}, {"url": "https://news.ycombinator.com/item?id=48184944", "title": "The tyranny of single page apps", "mentions": 1}, {"url": "https://news.ycombinator.com/item?id=46467231", "title": "Ask HN: Freelancer? Seeking freelancer? (January 2026)", "mentions": 1}, {"url": "https://news.ycombinator.com/item?id=46141986", "title": "Vanilla CSS is all you need", "mentions": 1}], "sentiment_by_month": {"2025-11": {}, "2025-12": {"recommend": 1}, "2026-01": {"warn": 2, "neutral": 1}, "2026-02": {}, "2026-03": {}, "2026-04": {}, "2026-05": {"recommend": 3}, "2026-06": {}, "2026-07": {}, "2026-08": {}, "2026-09": {"neutral": 1}, "2026-10": {}}, "versions": [], "version_unnamed": 0, "family_ref": null, "runs_on": null, "lines": [], "quotes": [{"id": 797872561, "item_id": 49867035, "url": "https://news.ycombinator.com/item?id=49867035", "by": "chrismorgan", "date": "2026-09-27", "version": null, "stance": "neutral", "quote": "", "excerpt": "You could also drop the hash part and gain most of that improvement. Or module and hash and do better on compression (because the hash is high-entropy). Rudimentary experiment on https://github.githubassets.com/assets/te.1288ac5c9584fbf2.module.css on replacing /(?<module>[A-Za-z0-9_-]+)__(?<local>[A-Za-z0-9_-]+)__(?<hash>[A-Za-z0-9_]{5})\\b/: ${module}__${local}__${hash} (original): 72967 raw, 10993 br. ${module}__${", "context": "", "use_case": "Avoiding CSS class collisions", "switched_from": "", "story": "Improving site performance by shipping more CSS"}, {"id": 771113088, "item_id": 48194568, "url": "https://news.ycombinator.com/item?id=48194568", "by": "bobthepanda", "date": "2026-05-19", "version": null, "stance": "neutral", "quote": "there is a .modules.css file extension that build steps will recognize and automatically namespace", "excerpt": "So I guess modules is not native, but in a fair amount of JSX oriented systems there is a .modules.css file extension that build steps will recognize and automatically namespace with an ID linked to a JSX component. https://github.com/css-modules/css-modules", "context": "", "use_case": "", "switched_from": "", "story": "Moving away from Tailwind, and learning to structure my CSS"}, {"id": 770969312, "item_id": 48185582, "url": "https://news.ycombinator.com/item?id=48185582", "by": "paulddraper", "date": "2026-05-18", "version": null, "stance": "recommend", "quote": "It's very easy to use", "excerpt": "> And of course if you're using React, obviously you want to use Tailwind CSS, right? Ok, you can certainly choose to use SASS or LESS if you seriously want to, but CSS post processors are all the rage these days. Or CSS Modules [1]. It's supported OOTB by virtually every CSS bundler: * Webpack (css-loader) * Rollup (rollup-plugin-postcss) * Vite * Parcel * Rspack * esbuild * Turbopack It's just vanilla CSS -- classe", "context": "", "use_case": "", "switched_from": "", "story": "The tyranny of single page apps"}, {"id": 770684177, "item_id": 48167761, "url": "https://news.ycombinator.com/item?id=48167761", "by": "bobthepanda", "date": "2026-05-17", "version": null, "stance": "recommend", "quote": "when i say css modules i mean something more akin to", "excerpt": "when i say css modules i mean something more akin to https://css-tricks.com/css-modules-part-1-need/", "context": "", "use_case": "", "switched_from": "", "story": "Moving away from Tailwind, and learning to structure my CSS"}, {"id": 770584224, "item_id": 48161514, "url": "https://news.ycombinator.com/item?id=48161514", "by": "efortis", "date": "2026-05-16", "version": null, "stance": "recommend", "quote": "CSS Modules are a simpler solution to cascading problems.", "excerpt": "CSS Modules are a simpler solution to cascading problems. They create unique class names, so your classes don't clash [1]. And they don't have the two main downsides of TW, which are readability [2] and tooling. Tooling for debugging and experimenting interactively with Chrome and FireFox DevTools. [1] https://x.com/efortis/status/1888304658080256099 [2] https://github.com/ericfortis/tailwind-eye", "context": "", "use_case": "", "switched_from": "", "story": "Moving away from Tailwind, and learning to structure my CSS"}, {"id": 745138687, "item_id": 46571167, "url": "https://news.ycombinator.com/item?id=46571167", "by": "xisnextbigthing", "date": "2026-01-10", "version": null, "stance": "neutral", "quote": "Other: LLM Orchestration, Selenium/Puppeteer, PWA (Local-First), CSS-Modules", "excerpt": "SEEKING WORK | Istanbul, Turkey | REMOTE Hi, I'm a senior full-stack developer (MSc in CompSci) with 15+ years of experience. I have worked on a wide range of projects with clients primarily from English-speaking countries. I approach my clients' projects like they're my own, striving for the best results both technically and business-wise. Technologies: - Core: Node.js, React, Python (Flask, Scrapy), PHP (Laravel, W", "context": "senior full-stack developer, 15+ years", "use_case": "", "switched_from": "", "story": "Ask HN: Freelancer? Seeking freelancer? (January 2026)"}, {"id": 745132816, "item_id": 46570801, "url": "https://news.ycombinator.com/item?id=46570801", "by": "owebmaster", "date": "2026-01-10", "version": null, "stance": "warn", "quote": "", "excerpt": "Well no, none of them ? This is what OP was talking about: https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Nesting/Using", "context": "", "use_case": "", "switched_from": "", "story": "AI is a business model stress test"}, {"id": 745129184, "item_id": 46570574, "url": "https://news.ycombinator.com/item?id=46570574", "by": "troupo", "date": "2026-01-10", "version": null, "stance": "warn", "quote": "Requires setting up, requires learning an additional library.", "excerpt": "You're probably confusing something with something? CSS Modules are a JS-only third party solution re-invented/re-implemented in a dozen different ways for various JS frontend frameworks. Requires setting up, requires learning an additional library. If you mean these CSS modules: https://github.com/css-modules/css-modules?tab=readme-ov-file then they need to be supported by whatever build chain you use. And you liter", "context": "", "use_case": "", "switched_from": "", "story": "AI is a business model stress test"}, {"id": 738350816, "item_id": 46146926, "url": "https://news.ycombinator.com/item?id=46146926", "by": "tyleo", "date": "2025-12-04", "version": null, "stance": "recommend", "quote": "I prefer vanilla CSS to frameworks but I find a lot of value in CSS modules.", "excerpt": "I mostly agree. I prefer vanilla CSS to frameworks but I find a lot of value in CSS modules. In particular I use: 1. The `composes` feature to do something like base classes. 2. The import feature to get something like namespacing. Given the recent advancements in CSS, I won\u2019t be surprised if they eventually build something like `composes` into the base language. The namespacing seems more like an artifact of how you", "context": "", "use_case": "base classes and namespacing", "switched_from": "", "story": "Vanilla CSS is all you need"}]}