More recently, the idea to treat attribute selectors on par with classes as first-class citizens has been proposed more widely. We’re no longer talking about edge cases, but challenging the very defaultness of classes, all while not giving up that sense of structure that many of us look for in CSS naming conventions.

👍‍

And think of aria-selectors too ! This promotes an a11y-first mindset — if there is no attribute or pseudo selector available to represent the state we wish to style, should we add one?

this is the principle that class selectors violate. An element’s classes are never guaranteed to reflect their state

Using data attributes instead seems a good idea to avoid impossible states!

And there’s a reason why

looks attractive — it’s mirroring the APIs we’re used to seeing in design systems and component libraries, but bringing it to vanilla HTML and CSS.
Indeed, it’s a small step from data attribute selectors to custom pseudo selectors or prop-based selectors when using Web Components (think ).

Styling based on ARIA attributes encourages more accessible markup, and styling based on custom data attributes makes it more robust and readable — a better experience for users and developers alike.

A CSS-only tree view

Define a grid fast

Creates animation based on a timeline

:last-child, :nth-last-child(2), nth-child(2), nth-child(3n), nth-child(even), nth-child(odd), nth-child(n+3), nth-child(-n+3), nth-child(3n+1), nth-child(3n-1)

TL;DR Use HTML attributes with the content: attr() CSS property.

Here is an example with a notification icon with a counter nudge.

Minimal CSS to look great: 58 bytes, 100 bytes, and 100 more bytes.

Physical properties (margin, paddings) seems wrong: we need to specify intent in the design. That's why flow-relative or directions were introduced: inline-size, flexbox, block-size, ...

Examples of original icon hover effects 👍

Examples of original button effects 👍

Examples of original link effects 👍

Two circular navigation demos

A demo of 3 types of navigation menu with sublebels:

1. Overlapping levels
2. Covering levels
3. Overlapping levels with backlinks

CSS specificity as image 👍

You're encountering a flexbox default setting.

A flex item cannot be smaller than the size of its content along the main axis.

The defaults are...

• min-width: auto
• min-height: auto
  ...for flex items in row-direction and column-direction, respectively.

display: contents is underrated: it removes the box layout of the element!

grid-row or grid-column only works on explicit layout: workaround at 18:55

Why not :)

#idea #project fork it to provide a demo

Headings are not focusable because they are not interactive, as long as the headings are not links… ;)

Here an example of how to make focused element transition on focus:

section:focus {
  outline: 0;
  animation: yellowFade 3s forwards;
}
@keyframes yellowFade {
  from { background: lightYellow; }
  to   { background: white; }
}

and the code example: https://codesandbox.io/s/css-grid-blog-bonus-v2-nn7t2

Improved list designs. It's refreshing.