4 ms·
I used CSS custom properties (AKA variables) when rewriting my blog's frontend just recently. A few issues come to mind even when using the latest CSS features:
by Ndymium 6y ago
I used CSS custom properties (AKA variables) when rewriting my blog's frontend just recently. A few issues come to mind even when using the latest CSS features:
1. Nesting can still be an issue if you have complicated layouts. You can mostly get around this with good use of classes/IDs.
2. Custom properties cannot be used in media queries. This was my biggest problem, because you now have to repeat your breakpoint sizes in every place you want to use media queries (which is many places if you split your code into many files), or you can have one file with the breakpoints set a bunch of custom properties that are used then throughout the styling. But the latter method falls down if you need to use e.g. `display: grid` for one size and `display: block` for another -- you end up with tons of properties. An example of that in my blog's code [1].
3. I really missed the lighten/darken helpers from SCSS. Those would have been useful with all the colors, because now I'd have to calculate all of them again if I wanted to change the color scheme.
[1] https://gitlab.com/Nicd/mebe-2/-/blob/f0f988e3d120c4cff5427760ffa8f2c02239e6c3/lib/web/frontend/assets/style/settings.css https://gitlab.com/Nicd/mebe-2/-/blob/f0f988e3d120c4cff54277...