3 ms·
First thought: WTF! I had to take a look. It's a case of combinatorial explosion, e.g. there is a style for every integer up to some max I didn't care to find
by quickthrower2 6y ago
First thought: WTF! I had to take a look.
It's a case of combinatorial explosion, e.g. there is a style for every integer up to some max I didn't care to find out, for the height:
.pxh-558 { height: 558px; }
So it's 500kb of unrolled syntax sugar.
- leephillips 6y agoYes. I assume he generated the stylesheet programmatically. I guess the intelligent way to use this would be to write some code that detects which classes are actually being used and only include those in a smaller stylesheet.
- EnigmaCurry 6y agohttps://purgecss.com/ https://purgecss.com/
- leephillips 6y agoThanks. I assumed someone somewhere had solved this problem.
- quickthrower2 6y agoThis all feels weird to me. Sort of like anti-compiling! But I guess it works. I do like to avoid JS toolchains if I can though. Even though I am a webpack aficionado. But if you are going to have a css class for every possible style you might want to use, there is probably no other way.
- leephillips 6y agoI was thinking that this should go in reverse: since the class names follow a pattern, you should just be able to make up classes to do what you want, and code should generate the CSS file based on his pattern. That would be offline, and could be in any language
- EnigmaCurry 6y agoUse purgecss - https://purgecss.com/ https://purgecss.com/, its the same strategy employed by tailwindcss. It will filter out all the classes you don't actually use. Tailwind is over 2MB before its purged, and only a few KB afterward.