CSS Modules
glenmaddern.com
CSS Modules
1–10 of 93 posts
Re: CSS Modules
#2How does a post get to number 1 here with only 5 up votes?
Re: CSS Modules
#3I've been using CSS Modules in a couple of projects (combined with PostCSS), am pretty happy so far.
I think you could actually go one step further and embed the stylesheet in the React component's module using a tagged template string, I haven't looked into how you'd get webpack to extract this into CSS files, but I'm sure it's possible.
Eg: https://gist.github.com/AndrewIngram/e3af5e8b70fd89a9a0d3
Re: CSS Modules
#4Surely not the future.
Re: CSS Modules
#5How does a post get to number 1 here with only 5 up votes?
It's probably some sort of score decay over time. Surely, it the post was posted a couple of hours ago, 5 up votes would not cut it.
Re: CSS Modules
#6How does a post get to number 1 here with only 5 up votes?
There's extra weight to comments and how fast the upvotes are. If all votes are instant it'll go higher than votes over a longer period.
Re: CSS Modules
#7One thing worth mentioning about class composition with CSS Modules is it allows for the convenient ergonomics of Sass's @extend without any of its problems.
Sass @extend is actually counterproductive in terms of reducing filesize [1] and results in unwieldy, unreadable CSS rules [2]. In contrast, CSS Modules achieves true class reusability and optimal de-duplication of styles in a manner impossible with Sass, resulting in a nice Chrome Inspector view because the original classes are preserved and their composition is naturally represented.
[1] https://tech.bellycard.com/blog/sass-mixins-vs-extends-the-d...
[2] http://pressupinc.com/blog/2014/11/dont-overextend-yourself-...
Re: CSS Modules
#8I've been using CSS Modules in a couple of projects (combined with PostCSS), am pretty happy so far. I think you could actually go one step further and embed the stylesheet in the React component's module using a tagged template string, I haven't looked into how you'd get webpack to extract this into CSS files, but I'm sure it's possible. Eg: https://gist.github.com/AndrewIngram/e3af5e8b70fd89a9a0d3
I've thought about this also. Alternatively some mixed format file like yaml front matter style.
Re: CSS Modules
#9So... CSS has the same global namespace issue as C, and this CSS Modules is the same solution as C++ namespaces and classes. They call it "mangling".
https://en.wikipedia.org/wiki/Name_mangling#Name_mangling_in...
(further commentary prudently withheld)
Re: CSS Modules
#10Also see styling[0] which is a loader for webpack which allows to generate CSS modules with JS.
Files configured to use with this loader (usually `.style.js`) are executed at build time and produce CSS modules. You can use any JS abstractions for that (functions, modules, variables, ...) and any npm package available (color manipulation, typography, ...):
import styling from 'styling'
import {smallText} from './typography'
import {colors} from './theme'
export let caption = styling({
...smallText,
color: colors.text
})