ah man, this looks so good.. I just might swipe the card

I smell a classic PEBCAK! Extremely amusing..

Something sparked in me. What could I learn from untangling a legacy CSS codebase? Surely someone’s been here before and will come thereafter.

Is there a real process for CSS modernization, or do you just start over? How do you begin? base styles first, or is there a methodology?

#css #csspodcast

"Rome wasn't built in a day" was something that stuck with me as a kid for some reason, amongst many things, and this really felt like "Rome". What would happen if I really took time to carefully extract the codebase's nuances and refactor it to stay modern.

Let me digress. No, It wasn't to hand this into your typical LLM for it's responses stroking my ego and give me narcissistic tendencies - even though sometimes throwing a bunch of technical concepts their way, to poke their reasoning, is something I do.

It seemed like, when starting to introduce some @layers for specifics it would cause quite obvious precedence issues and without starting afresh, it would be inefficient and quite costly ( for my MD). Immediately, I thought, tackling this task over some evening's OOO but then was tempted by an idea

So, I was working on old site for a client that housed outdated CSS practices with several unintuitive cascading origins and was struck by the thought of how we can resolve these headaches not just for our sanity, but commercially too.

Join the club haha

Another use case and with sibling-count() inside the declaration :-

scale: calc(1 + (sibling-index() / sibling-count()) * var(--scale-factor));

codepen.io/cbolson/pen/...

nice use case with for sibling-index(), below:

animation-delay: calc(mod(sibling-index(), 5) * -1s)

codepen.io/bramus/pen/b...