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.
Link tags: selector
32
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.
Notes on `lang` by Taylor Hunt on CodePen
A really deep dive into the lang attribute, and the :lang() pseudo-class (hitherto unknown to me). This is all proving really useful for a little side project I’m working on.
Focusing on Focus Styles | CSS-Tricks
A deep dive into the :focus pseudo-class and why it’s important.
Nobody Said CSS Is Easy
One thing I gained a stronger awareness of (simply from working with checkboxes) is that it’s important to progressively enhance UI components, so that a fancy custom one is able to fall back to the default browser styles and functionality. This way, a user can still access the UI if JavaScript or CSS fail.
Frequently Asked Questions [CSS Working Group Wiki]
Rebuttals to the most oft-asked requests for browsers to change the way they handle CSS.
[selectors] Functional pseudo-class like :matches() with 0 specificity · Issue #1170 · w3c/csswg-drafts
A really interesting proposal from Lea that would allow CSS authors to make full use of selectors but without increasing specificity. Great thoughts in the comments too.
How Our CSS Framework Helps Enforce Accessibility | eBay Tech Blog
Following on from Ire’s post about linting HTML with CSS, here’s an older post from Ebay about how being specific with your CSS selectors can help avoid inaccessible markup getting into production.
Hey designers, if you only know one thing about JavaScript, this is what I would recommend | CSS-Tricks
This is a really great short explanation by Chris. I think it shows that the really power of JavaScript in the browser isn’t so much the language itself, but the DOM—the glue that ties the JavaScript to the HTML.
It reminds me of the old jQuery philosophy: find something and do stuff to it.
CSS Diner - Where we feast on CSS Selectors!
Here’s a fun game to help practice those CSS selectors.
Battling BEM – 5 common problems and how to avoid them
We tend to use a variant of BEM in our CSS at Clearleft. Glad to see that when we’ve hit these issues, we’ve taken the same approach.