CSS :has() Interactive Guide
This isn’t just a great explanation of :has(), it’s an excellent way of understanding selectors in general. I love how the examples are interactive!
Link tags: selectors
36
What is Utility-First CSS?: HeydonWorks
Heydon does a very good job of explaining why throwing away the power of selectors makes no sense.
Utility-first detractors complain a lot about how verbose this is and, consequently, how ugly. And it is indeed. But you’d forgive it that if it actually solved a problem, which it doesn’t. It is unequivocally an inferior way of making things which are alike look alike, as you should. It is and can only be useful for reproducing inconsistent design, wherein all those repeated values would instead differ.
He’s also right on the nose in explaining why something as awful at Tailwind could get so popular:
But CSS isn’t new, it’s only good. And in this backwards, bullshit-optimized economy of garbage and nonsense, good isn’t bad enough.
CSS Nesting and the Cascade | WebKit
As well as a very welcome announcement, Jen has a really good question for you about nesting in CSS.
If you have an opinion on the answer, please chime in.
dbohdan/classless-css: A list of classless CSS themes/frameworks with screenshots
A collection of stylesheets that don’t use class selectors. Think of them as alternatives to default user-agent stylesheets.
Using :has() as a CSS Parent Selector and much more | WebKit
A terrific tour of just some of the fantastic ways you can use :has() in CSS.
The section on using it with sibling selectors blew my mind:
How often have you wanted to adjust the margins on a headline based on the element following it? Now it’s easy. This code allows us to select any h2 with a p immediately after it.
h2:has(+ p) { margin-bottom: 0; }Amazing.
Here’s what I didn’t know about :where() - Manuel Matuzović
I feel like I’m starting to understand how the CSS :where pseudo-class works and why it’s useful. The cogs are slowly turning in my brain.
Scope Proposal & Explainer
This detailed proposal from Miriam for scoping CSS is well worth reading—it makes a lot of sense to me.
No, Utility Classes Aren’t the Same As Inline Styles | frontstuff
This is supposed to be a defence of utility classes …but it’s actually a great explanation of why classes in general are a great mechanism for styling.
I don’t think anyone has ever seriously suggested using inline styles—the actual disagreement is about how ludicrously rigid and wasteful the class names dictated by something like Tailwind are. When people criticise those classes they aren’t advocating for inline styles—they’re advocating for better class names and making more use of the power of the class selector in CSS, not less.
Anyway, if you removed every instance of the word “utility” from this article, it would still work.
Can I :has()
This would be such a great addition to CSS—a parent/ancestor selector!
With the combined might of :has(), :not(), nth-child(), and calc(), CSS has become a powerful language for specifying rules to account for all kinds of situations.
CSS { In Real Life } | Quick Tip: Style Pseudo-elements with Javascript Using Custom Properties
Oh, this is smart! You can’t target pseudo-elements in JavaScript, but you can use custom properties as a proxy instead.
What Makes CSS Hard To Master - Tim Severien
If we, as a community, start to appreciate the complexity of writing CSS, perhaps we can ask for help instead of blaming the language when we’re confused or stuck. We might also stop looking down on CSS specialists.
CSS Stats
A handy tool for getting an overview of your site’s CSS:
CSS Stats provides analytics and visualizations for your stylesheets. This information can be used to improve consistency in your design, track performance of your app, and diagnose complex areas before it snowballs out of control.
What is CSS Specificity? Sarah Chima - Front-End Developer
An excellent and clear explanation of specificity in CSS.
Selectors Explained
I can see this coming in very handy at Codebar—pop any CSS selector in here and get a plain English explanation of what it’s doing.
The CSS Cascade
This is a wonderful interactive explanation of the way CSS hierarchy works—beautiful!
The Origin Story of Container Queries—zachleat.com
Everyone wants it, but it sure seems like no one is actively working on it.
Zach traces the earliest inklings of container queries to an old blog post of Andy’s—back when he was at Clearleft—called Responsive Containers:
For fun, here’s some made-up syntax (which Jeremy has dubbed ‘selector queries’)…
Fading out siblings on hover in CSS | Trys Mudford
Well, the clever CSS techniques just keep on comin’ from Trys—I’m learning so much from him!
Use the :lang pseudo-class over the lang attribute selector for language-specific styles
This is a great explanation of the difference between the [lang] and :lang CSS selectors. I wouldn’t even have thought’ve the differences so this is really valuable to me.
The CSS Working Group At TPAC: What’s New In CSS? — Smashing Magazine
Rachel gives us the run-down on what’s coming soon to Cascading Style Sheets near you, including an aspect-ratio unit and a matches selector (as originally proposed by Lea).
Sass Selectors: To Nest Or Not To Nest? | Brad Frost
The fascinating results of Brad’s survey.
Personally, I’m not a fan of nesting. I feel it obfuscates more than helps. And it makes searching for a specific selector tricky.
That said, Danielle feels quite strongly that nesting is the way to go, so on Clearleft projects, that’s how we write Sass + BEM.