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.
@ErikJonker@GossiTheDog don’t forget to mention the last proposal of #belgium of the client side scanning idea. It’s a disaster for your privacy and dangerous because you can be hit by false positives. Try then to prove your innocence. #css#eu and note it’s not only images but also text. #police are already claiming they want that data too.
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.
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.
Does anyone know of a way to make the width of an element snap to a multiple of a base value? I'm trying to see if it's possible to get these items to align to the grid-paper like background. I figure round(up, max-content, var(--bg-grid-size)) is the logic I'd want but round() doesn't accept intrinsic sizes. Maybe there's a technique with min() or something? #CSS#WebDev
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 🤯
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/
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)