CSS Cascade Layers Vs. BEM Vs. Utility Classes: Specificity Control CSS Cascade Layers Vs. BEM Vs. Utility Classes: Specificity Control Victor Ayomipo 2025-06-19T15:00:00+00:00 2025-06-19T20:32:57+00:00 CSS is wild, really wild. And tricky. But let’s talk specifically about specificity. When writing CSS, it’s close to impossible that you haven’t faced the frustration of styles not applying as…
Read moreSmashing Animations Part 4: Optimising SVGs
Smashing Animations Part 4: Optimising SVGs Smashing Animations Part 4: Optimising SVGs Andy Clarke 2025-06-04T08:00:00+00:00 2025-06-05T21:02:28+00:00 SVG animations take me back to the Hanna-Barbera cartoons I watched as a kid. Shows like Wacky Races, The Perils of Penelope Pitstop, and, of course, Yogi Bear. They inspired me to lovingly recreate some classic Toon Titles using…
Read moreSmashing Animations Part 3: SMIL’s Not Dead Baby, SMIL’s Not Dead
Smashing Animations Part 3: SMIL’s Not Dead Baby, SMIL’s Not Dead Smashing Animations Part 3: SMIL’s Not Dead Baby, SMIL’s Not Dead Andy Clarke 2025-05-21T08:00:00+00:00 2025-06-05T21:02:28+00:00 The SMIL specification was introduced by the W3C in 1998 for synchronizing multimedia. This was long before CSS animations or JavaScript-based animation libraries were available. It was built into SVG 1.1, which is why we can still use it there today….
Read moreSmashing Animations Part 2: How CSS Masking Can Add An Extra Dimension
Smashing Animations Part 2: How CSS Masking Can Add An Extra Dimension Smashing Animations Part 2: How CSS Masking Can Add An Extra Dimension Andy Clarke 2025-05-14T13:00:00+00:00 2025-05-15T20:32:37+00:00 Despite keyframes and scroll-driven events, CSS animations have remained relatively rudimentary. As I wrote in Part 1, they remind me of the 1960s Hanna-Barbera animated series I…
Read moreSmashing Animations Part 1: How Classic Cartoons Inspire Modern CSS
Smashing Animations Part 1: How Classic Cartoons Inspire Modern CSS Smashing Animations Part 1: How Classic Cartoons Inspire Modern CSS Andy Clarke 2025-05-07T08:00:00+00:00 2025-05-08T20:32:35+00:00 Browser makers didn’t take long to add the movement capabilities to CSS. The simple :hover pseudo-class came first, and a bit later, the transitions between two states. Then came the ability…
Read moreMasonry In CSS: Should Grid Evolve Or Stand Aside For A New Module?
Masonry In CSS: Should Grid Evolve Or Stand Aside For A New Module? Masonry In CSS: Should Grid Evolve Or Stand Aside For A New Module? Gabriel Shoyombo 2025-05-06T13:00:00+00:00 2025-05-08T20:32:35+00:00 You’ve got a Pinterest-style layout to build, but you’re tired of JavaScript. Could CSS finally have the answer? Well, for a beginner, taking a look at the pins on your Pinterest page, you…
Read moreTransitioning Top-Layer Entries And The Display Property In CSS
Transitioning Top-Layer Entries And The Display Property In CSS Transitioning Top-Layer Entries And The Display Property In CSS Brecht De Ruyte 2025-01-29T10:00:00+00:00 2025-05-01T20:32:48+00:00 Animating from and to display: none; was something we could only achieve with JavaScript to change classes or create other hacks. The reason why we couldn’t do this in CSS is explained…
Read moreNew Front-End Features For Designers In 2025
New Front-End Features For Designers In 2025 New Front-End Features For Designers In 2025 Cosima Mielke 2024-12-31T12:00:00+00:00 2025-05-01T20:32:48+00:00 Component-specific styling, styling parents based on their children, relative colors — the web platform is going through exciting times, and many things that required JavaScript in the past can today be achieved with one simple line of…
Read moreAn Introduction To CSS Scroll-Driven Animations: Scroll And View Progress Timelines
An Introduction To CSS Scroll-Driven Animations: Scroll And View Progress Timelines An Introduction To CSS Scroll-Driven Animations: Scroll And View Progress Timelines Mariana Beldi 2024-12-11T15:00:00+00:00 2025-05-01T20:32:48+00:00 You can safely use scroll-driven animations in Chrome as of December 2024. Firefox supports them, too, though you’ll need to enable a flag. Safari? Not yet, but don’t worry — you can still offer a…
Read moreCSS min() All The Things
CSS min() All The Things CSS min() All The Things Victor Ayomipo 2024-10-17T10:00:00+00:00 2025-05-01T20:32:48+00:00 Did you see this post that Chris Coyier published back in August? He experimented with CSS container query units, going all in and using them for every single numeric value in a demo he put together. And the result was… not…
Read more