Tailwind components vs utilities: why the distinction barely matters
Ahmad Wael on why the Tailwind components vs utilities split is mostly semantic, and how the @utility directive keeps CSS flat without extra layers or specificity fights.
Category: Front-end
Why sustainable UX design is now a performance metric
WordPress sites carry more digital weight than they need. This post covers dark-first themes, lighter image formats like AVIF, and trimming the “digital fat” that slows sites down and drains batteries.
What the CSS :near pseudo-class would replace in your JS
Thomas Walichiewicz proposed a :near() selector so CSS can react when a pointer gets close to an element. It would replace the usual pointermove distance math, though the CSS Working Group is still weighing the fingerprinting risk.
Why your loading spinner should be an SVG, not a GIF
A 2MB GIF spinner is a network request competing with the content it is covering. Inline SVG loaders skip the request entirely, scale without blurring, and inherit theme colors through currentColor.
Responsive pyramidal grid with modern CSS layout logic
A pyramidal hexagon grid used to need JavaScript and negative margins. Modern CSS does it with grid auto-placement, sibling-index() and some triangular-number math, plus a fallback for narrow screens.
CSS @scope: scoped styles without BEM or a build step
The CSS @scope at-rule is Baseline supported, so you can scope styles to a DOM subtree without long BEM class names or a JS build step. Includes donut scoping with the lower boundary and the proximity rule that decides which scope wins.
Scroll animations with CSS sibling-index(), not JavaScript
A text vortex where every character animates on its own, built with CSS sibling-index(), sibling-count() and scroll-timeline. The only JavaScript left is the bit that splits the string into characters.
A semantic CSS pie chart a screen reader can read out
Conic gradients make a pie shape but leave screen readers with an empty box. This build keeps the data in the markup, places labels with cos() and sin(), and uses a few lines of JS for the slice offsets.
A CSS contrast color approximation that ships today
The contrast-color() function only works in Safari and Firefox so far, so dynamic text colors still need a workaround. Here is the OKLCH lightness trick I use in block themes and WooCommerce stores: one declaration, no JavaScript.
February 2026 wallpapers and how to serve them properly
Smashing Magazine’s February 2026 wallpapers collection, with the designs worth grabbing and a developer’s notes on shipping high-resolution images: srcset, lazy loading, and the mistakes that turn a wallpaper gallery into a slow page.