Modern CSS features that replace Sass, PostCSS plugins and JavaScript hacks: nesting, :has(), container queries, subgrid and more, checked in September 2026.

Big stylesheets used to get their order from a folder structure and a build tool. Reset first, then base styles, then components, then utilities, plus a rule that nobody adds !important before the third code review.

@layer writes that order into the CSS itself:

A rule in a later layer beats any rule in an earlier layer, whatever its specificity. .p-0 wins over .card .button because utilities comes after components, and the order of the files no longer matters.

Despite broad browser support, container queries remain surprisingly underused and frequently misunderstood.

A very interesting way to distinguish @media and @container queries is the layout type.

Media queries are for the “macro” layout; they look outward. Stuff like page structure, the header that spans the window, footers, main grid layout, system preferences (prefers-color-scheme), device capabilities (touch screens). You know, anything that is majorly true to the entire page structure.

Container queries, I’d say, are for “micro” layouts, i.e., most things that live inside the “macro” layout. We use them when any content needs to responsively fit whatever space it is allocated. Components that come to mind are things like cards, widgets, forms, navigation, and so on.

In other words, think “page layout” vs. “component layout”.

We're a while off from being able to leverage ::checkmark with checkbox styling, but here's a decent way to get the styling control you want, while preserving the useful parts of the native input element.

A look at the CSS line height unit and how it works.

The idea is to use the lh unit to set the size of the icon.
https://piccalil.li/blog/lh-units-are-cool/

Grid's auto-fit and auto-fill are super useful, and while the declaration is pretty long, and can seem complicated, it's not so bad once you break it down.

✅ Auto-fill vs. auto-fit demo: https://codepen.io/kevinpowell/pen/yyLYoZO
✅ More on getting started with Grid: https://youtu.be/rg7Fvvl3taU

.grid {
display: grid;
gap: var(--gap, 1rem);
grid-template-columns: repeat(
var(--grid-type, auto-fit),
minmax(min(180px, 100%), 1fr)
);
grid-auto-rows: 120px auto auto;
container-type: inline-size;
}

⌚ Timestamps
00:00 - Introduction
00:25 - The basics of grid columns
02:30 - Using the repeat syntax
03:15 - Breaking down repeat auto-fit
05:45 - Preventing overflow
08:00 - Use a variable for the minimum value
08:45 - How to remember this declaration
11:25 - The difference between auto-fit and auto-fill

Styling, UX, validation

Collection of the most essential transitions for web apps that you can just copy and paste into any project.

Oat is an ultra-lightweight HTML + CSS, semantic UI component library with zero dependencies. No framework, build, or dev complexity. Just include the tiny CSS and JS files and you are good to go building decent looking web applications with most commonly needed components and elements.

Semantic tags and attributes are styled contextually out of the box without classes, forcing best practices, and reducing markup class pollution. A few dynamic components are WebComponents and use minimal JavaScript.

https://x.com/technmak/status/2022287404128973056?s=43&t=gAZhA3-2h2DvLb-eSzGa5A

Learn how to use line-height units when setting paragraph margins — creating vertical rhythm in your text.

My favorite thing to do with the lh unit is to set margins on content. Let’s set a new universal margin on paragraphs with:

p { margin-block: 1lh; }

Learn how to use native CSS nesting in modern browsers. Understand the & selector, specificity rules, differences from Sass, and when to use nesting with practical examples for components, themes, and accessibility.

Here's where things get a little interesting. CSS nesting follows the same specificity rules as traditional CSS, with one important detail: the & nesting selector calculates its specificity like the :is() pseudo-class it uses the highest specificity from the parent selector list, not the sum of all the selectors.

The “linear()” timing function is a game-changer; it allows us to model physics-based motion right in vanilla CSS! That said, there are some limitations and quirks to be aware of. I’ve been experimenting with this API for a while now, and in this post, I’ll share all of the tips and tricks I’ve learned for using it effectively. ✨

Richard Rutter helps you to make sense of list-style, list-item, ::marker, counters(), counter(), @counter-style, symbolic, symbols(), symbols and more to push your HTML and CSS lists to the next level.

Generate and customize CSS easing functions with ease and magical precision using Easing Wizard 🧙

A concise guide to CSS backdrop-filter for glassmorphism and translucent overlays — how it works, why order matters, and an interactive CodePen playground.

A CSS reset for modern web development to provide a consistent and high-quality base for projects. Low-specificity and very opinionated to provide a strong foundation allowing seamless use in projects of varying scales and complexity.

• Element selectors keep styles as global as possible

• ID selectors identify things (one per page)

• Class selectors classify things
  Quite often, I’ll style those child elements using a descendant selector:

  # video > p

• Attribute selectors vary things

  .layout { […] }
  [data-layout="bartok"] { […] }

Apparently you are not a real CSS dev if you don’t maintain your own CSS reset. Challenge accepted! Not a typical reset, but for sure a bunch of opinions.

List style position

https://mayank.co/blog/css-reset-layer/

A web component for drawing patterns with CSS

https://cascadiajs-2025.netlify.app/23-starting-style/

A fast paced, animated, and jam packed tik-talk on CSS features from the past ~5 years. CSS has moved so fast, don't feel bad you aren't all caught up, no one is. This talk will teach you as many things as possible while providing good examples of practical use cases. Syntax, typography, color, architecture, and more.

00:00 - Introduction & Overview
01:20 - Page & View Transitions
03:04 - Range Syntax & Media Queries
03:51 - Container Queries & Units
06:04 - Cascade Layers
07:53 - Field Sizing with CSS
09:30 - Color Scheme: Light & Dark Modes
11:47 - Accent Color & Input Styling
12:34 - Type-Safe CSS Variables (app property)
15:14 - Scroll-Driven Animations
16:41 - View Animations & Intersection Observer Alternatives
18:21 - Advanced Easing with linear()
18:57 - Native Search Element
19:27 - Improved Form Validation
20:38 - Exclusive Accordions & Animating Height
21:34 - Math Functions in CSS
22:28 - Text Wrap: balance & pretty
24:47 - Color Mix & Color Spaces
25:51 - Relative Color & Dynamic Palettes
28:01 - Custom Scrollbar Styling
28:13 - Starting Style & Animating Entrances
28:37 - Dialogs, Popovers & Anchor Positioning
29:29 - Textbox Trim & Button Alignment
29:52 - Conclusion & Takeaways

Grid is a powerful, flexible tool that brings complex layouts to life.