CSS built-in nesting is awkward, static variables can be useful actually, and what's the point of dropping a consistent API with good DX if we're still transforming our stylesheets anyways?
Chaining together interoperable PostCSS modules to accomplish half of what Sass can do is nearly impossible.
After reading this, checked my existing styling as processed through autoprefixer, found the vendor prefixes that had been added, and manually added them to my styling — so it now doesn’t require any additional tools for cross-browser compatibility.
Probably my most prejudiced #CSS hack. Judge if you want, but this one line saves me from an insane amount of alignment issues and overly complicated calc()s.
I don't understand why CSS is so verbose sometimes. Why couldn't I just do: color: --brand-red;
???
Why do I need to surround every use of it with var(...)? Wasn't the double-dash prefix was specifically chosen to not clash with any existing or future properties?
It's always so frustrating writing CSS. Especially compared to all the structure, abstractions, and terseness that programming languages offer.
I was kinda hoping calc-size() could resolve intrinsic sizes inside math functions but it doesn't seem to (at least in Chrome Canary). Not sure if that's a bug or if Friday afternoon isn't the best time to try to understand draft #CSS specs 🤯
I found https://buildexcellentwebsit.es extremely insightful and inspiring! It pushed me to finally completely restructure my personal website’s #CSS, after many years of mess.
Unfortunately, though, I find the massive use of all those calc() and clamp() functions to be quite heavy in terms of performance… #Lighthouse gave the website a very bad performance score (see screenshot). It even seems that while scrolling the page it lags (😳) even if it’s super simple and built with pure #HTML and CSS!
Do you have any ideas or suggestions? 🤔
Thank you so much for all the interesting things you share! ❤️🚀
(The current unstable development version of my website is at https://dev.tommi.space/, I am using the homepage as reference)
Single-digit inputs with one element: "Turn a simple input into single-digit inputs using a few lines of #CSS. Useful for One-Time Password fields. No extra element (only the <input> element); Less than 15 CSS declarations; Optimized with CSS variables;" https://css-tip.com/single-digit-inputs/
How should I read the values for box-shadow-position in the formal syntax of box-shadow on MDN?
It says <box-shadow-position> = [ outset | inset ] which I read as: the value is either outset or inset. But I know outset is not supported. It is the default behavior, not the default value.
Maybe I need a documentation of these formal syntaxes… 😅