When I set out to build this blog, I had one goal: showcase what's possible with modern, native web technologies. No React. No Vue. No build step. Just HTML, CSS, and JavaScript the way the platform intended.

CSS Cascade Layers

One of the first features I reached for was @layer. Cascade layers give us explicit control over the cascade, making it easier to organize styles without specificity wars.

The order of the @layer declaration determines priority. Later layers win, regardless of selector specificity within earlier layers.

Web Components

For reusable UI elements, I built custom elements with Shadow DOM. Here's a simplified version of the theme toggle component:

Modern Color with oklch()

For the color system, I used oklch() instead of HSL or hex values. OKLCH provides perceptual uniformity, meaning colors with the same lightness value actually look equally bright. Combined with color-mix(), it's easy to derive related colors.

What's Next

In future posts, I'll dive deeper into specific features like container queries, scroll-driven animations, and the View Transitions API. The modern web platform is incredibly powerful, and I'm excited to explore it all.

Further Reading