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.

Make your links beautiful and accessible.

The principle of 8pt Grid is that use multiples of 8 (8, 16, 24, 32, 40, 48, 56, etc.) to layout, dimensions, padding, and margin of elements.

Declan Chidlow takes us on a really interesting tour of the often, under-reported world of print stylesheets, how to use them and also how to debug them.

Physical, absolute units

When we’re writing CSS, we tend to use relative, responsive units such as rem, em, etc, which scale based on user preferences and such.
Sometimes, I find myself forgetting that CSS even has units of standard, absolute measurements, but we have a lovely collection at our disposal. It is worth keeping in mind they aren’t always accurate on screen, but they usually are when physically printed.

An interactive guide to learn CSS Relative Colors.

When you hide an interactive element, make sure you choose a hiding technique that keeps it screen reader-accessible, position it on top of whatever is visually replacing it so that a user navigating by touch can find it where they expect to, and then make it transparent.

This technique explores using: animation with CSS transition and transform, using the :focus-within pseudo-class, CSS grid, and accessibility considerations for dropdown menus.

Make a smooth css shadow

https://tobiasahlin.com/blog/layered-smooth-box-shadows/

But with a simple CSS technique, we can expand our range of options. If we use layered box-shadows we can get more fine-grained control over how shadows are rendered:

Create & export mesh gradients as SVG or to Figma. Quickly experiment with grainy noise and blur. Includes a one-click export to Figma for use in designs.

About Roel: https://pixelambacht.nl

Depending on whether the information is technical or not, you might want different font features.

29:20 - "Never grab a Monotype font"

font-variant-numeric: tabular-nums;

@font-face {
size-adjust: 110%;
}

https://wakamaifondue.com/
(what can my font do?)

https://pixelambacht.nl/

A look at text wrap balancing in CSS

Have you ever wished there is a native way in CSS to make two lines headlines consistent in the number of words per line? As a designer, I spot that a lot when dealing with varying content lengths while designing a website or a UI.

A simple guide to building keyboard-activated layout grid overlays with JavaScript and CSS for web development projects.

How (and why) to use shadow DOM, now that the declarative syntax is here.

https://www.youtube.com/watch?v=8Z8H2NEbLtE

shadow DOM has lower precedence than regular styles

(X, Y, Z)
#id, classes and attrs, elements

[id="myid"] is (0,1,0) not (1,0,0)!

You can duplicate classes to increase specificity! (0, 4, 0)
.button.button.button.button
or
.button {
&&& {
}
}

is( .button, #hammertime )
.button:not(#id1#id2) -> "impossible" because two IDs, (2, 0, 0)!

Decreasing specificity

:where( .button) -> (0,0,0)

** Very useful for css reset!
input:where([type="checkbox"])

17:55 - meta keyword in sass

** Might need to use !important in layers (dialog: display:none)

Little relatively unknown fact, if you have an id attribute on an element, you can reference it in this way:

<button id="yo">…</button>

yo.onclick = ...

Furthermore, child elements with a name attribute can be referenced in this way:

<form id="x"> 
  <input name="em"> 
</form>

x.em.onclick = ...

A button is arguably the most likely component to find itself in your codebase so I’m going to show you how I approach building one.

Modern CSS makes styling HTML tables in a considered, responsive nature a breeze. Michelle Barker breaks it all down for you in this deep dive.

So you think you know box shadows huh? I bet you didn't know they could do this.