These utility classes create a system that is no different than inlining css. If you have to add a class like font-size-20 to every element that you want 20px, you've lost both efficiency as well as any obfuscation from markup and css. Let's say your designer later comes back and says "Let's change the 20px font to 24px". You'd then have to make a choice between manually setting font-size-20 to 24px or going through your entire site and changing font-size-20 to font-size-24. You'd be choosing between making your naming confusing or dealing with a headache.
SCSS is great, but I think there are better examples for applied use.
Perhaps you need npmjs.com/package/css-purge to cleanup the unused css but I hear you, for this reason I like to write down css classes without loops if I will only use a few variations.
I started HTML and CSS on Myspace! I love teaching and solving difficult problems. I really enjoy using frameworks but I love the challenge of rolling your own. I try VanillaJS until I need more.
These utility classes create a system that is no different than inlining css. If you have to add a class like
font-size-20to every element that you want 20px, you've lost both efficiency as well as any obfuscation from markup and css. Let's say your designer later comes back and says "Let's change the 20px font to 24px". You'd then have to make a choice between manually setting font-size-20 to 24px or going through your entire site and changing font-size-20 to font-size-24. You'd be choosing between making your naming confusing or dealing with a headache.SCSS is great, but I think there are better examples for applied use.
CSS has variables as well.
Now CSS has nesting feature too...
Loops are so insanely powerful!
They are, but doing a loop like 1 to 70 generates a ton of (probably) unused CSS...
Perhaps you need npmjs.com/package/css-purge to cleanup the unused css but I hear you, for this reason I like to write down css classes without loops if I will only use a few variations.
Nice quick reference 👍
Very Helpful Thanks.
Amazing, Good job bro !
Thanks .....saved this
This is very helpful. Thanks!