WDD LIVE 058: CSS Pop Quiz Results, Explanation, & Live Breakdown!

**Agenda**
The other day I did a very simple pop quiz based on a CSS instructional video that I saw recently, teaching people to style things within a group based on a single class, like this:
.blog-card figure {}
The quiz asked users, "Which one is better?"
(A) .blog-card figure{}
(B) .blog-card__featured-image
Surprisingly, the results were very mixed! The reason it's surprising is because one answer is objectively correct and the other is objectively incorrect.
This is precisely what we'll explore on today's livestream, which I guarantee will connect tons of CSS dots for you and really help you get a better understanding of concepts like specificity, naming, organization, and more.
----
Join me LIVE every Tuesday at 11am Eastern for in-depth web design and development critiques, plus spur-of-the-moment mini-tutorials based on our discussion!
WANT TO GET YOUR SITE CRITIQUED? SUBMIT YOUR URL AT geary.co/critique-application/
Through the critique process, you'll learn tips, insights, and best practices for things like:
- UX Design
- UI Design
- Technical SEO
- On-Page SEO
- Copywriting
- Content Marketing
- Conversion Optimization
- Offer Strategy
- Technical Development Best Practices w/ DOM Inspection
- And more!
** MY TOOLS **
🔥 AutomaticCSS (ACSS) - automaticcss.com
🔥 Frames - getframes.io
See all my recommended tools here: geary.co/tools/
** INNER CIRCLE **
Step up your design/dev game, make more money, and get the full scoop on scaling your digital agency! When it comes to the Inner Circle, I don't hold back.
⭕ In-depth design & dev trainings
⭕ Business, sales, & marketing trainings
⭕ Agency resources & downloadables
⭕ Vibrant, quality community with zero toxicity
⭕ ...and much more!
Learn more and join here: geary.co/inner-circle/
** SOCIAL **
👉 X/Twitter - / thekevingeary
👉 FB - / marketingkev
👉 LinkedIn - / kevingeary

[@Jim.Hummel]

The explanation cleared that up wonderfully! Mentally, I'm nailing high-difficulty dives from the 10-meter platform... the reality is a poorly executed belly-flop but at least I'm not being a chump anymore! Thanks, Kevin! I hope y'all had a great time at the beach.

[@alex_vie]

I think the topic of 'specificity' can't be explained any better. Thank you, Kevin.

[@matthewolding9427]

Slowly rubbing salt in an open specificity wound someone didn't know they had (and I used to have). Love it.

[@vaughanprint]

I used to feel so !important but, since I started using BEM and CSS less specifically, not so !important. Good to learn about the specificity score. I am noticing the 1 password prompt being a nuisance in the structure panel, when trying to name elements.

[@LupusDesign]

Another excellent session, Kevin. Thank you,

[@eucalyptech]

Great session, thank you Kevin 😉

[@RobCooper]

Thanks for this. Good training today

[@bluetheredpanda]

Curious which video you're referring to (the one that recommended the wrong approach), I didn't see that one. But BEM just makes so much sense, I don't know why you wouldn't use it (or why it seems to rub some people the wrong way). I only wish I was better at naming my components, ah!

[@nmg2023nmg]

How do I enter settings in ACSS now? Before I could adjust the breakpoints in the "Wp-admin" but now I enter the editor and adjust breakpoints there and also change the bricks breakpoints so that they match?

[@Gearyco]

Not sure what you’re asking me. Try positing in the support community with more details.

[@nmg2023nmg]

@@Gearyco Yeah it was hard to explain, but the breakpoints under layouts in AutomaticCSS, they must match breakpoints in bricks breakpoints settings aswell?

[@ElementoryMyDearWatson]

When I save in Bricks it usually says STOP BEING A CHUMP! They have clearly been listening to you ;)}}

[@goannacs6861]

Since I use bem I never had any problems with specificity. Until you use bem you have no idea how much you hate any other way.

[@stripedgoat8470]

11:33 Card A, and Cardi B 🎶 (Sorry, I had to 😂) By the way Kevin, which plugin do you recommend for a multi-language website? 1:16:47 - A shoutout to Bitwarden, as it's open-source and it's code is constantly audited by experts, plus it's self-hostable. But I don't think you care about that, as Arc is closed-source too. Anyway, maybe someone looking at the comments is looking for open source pass manager. 😅

[@Gearyco]

I don’t really build multi language websites so hard to make a suggestion

[@stripedgoat8470]

@@Gearyco ah okay, thanks for the response though!

[@wpeasy]

Typically passionate and informative.. For me a BEM brain simplifies more than just CSS class naming. Although BEM does not specify CSS variable naming or JS variable naming, using BEM thinking for these ties these all together as well. E.g. if you have a BEM Block name 'my-block' with an element 'my-block__my-element' CSS var examples: --my-block-padding-inline, --my-block__my-element-padding-inline Or if on Bricks Element CSS: --padding-inline , --my-element-padding-inline With JavaScript: const myBlock = document.querySelector('.my-block'); const myElement = myBlock.querySelector('.my-block__my-element'); Of course not functional examples, just indicating a common naming convention that ties together CSS class names, CSS variable names & JS const/variable names.

[@LuisAmeglioDiaz]

Canelo is that you?