PB101: L08 - DRY Development With Classes & Global Styling

In the last lesson, you were introduced to DRY (Don't Repeat Yourself) development concepts, the tokenization of website styling, and the importance of scalability, maintainability, consistency, and so on.
This lesson builds on those concepts by introducing global element styling, BEM classes, utility classes, and the universal selector. I also touch on why ID styling is undesirable in most cases (even though page builders tend to encourage it).
This is a pillar video in the course for three reasons:
1. It corrects most web designers' biggest mistake with page builders - styling at the ID level.
2. It answers the super common question, "How do I know when to use BEM classes, utility classes, or global styling?"
3. It teaches a proven method for organizing your classes (BEM), which is essential for properly managing a class-first workflow.
If you want a deep dive on BEM, you should watch this video: • BEM 101: How to Make W...
I also did a deep dive on BEM classes vs utility classes here: • Utility Classes vs Cus...
** MY TOOLS **
🔥 AutomaticCSS (ACSS) - automaticcss.com
🔥 Frames - getframes.io
See all my recommended tools here: geary.co/tools/
** INNER CIRCLE **
Step your design/dev game up, 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 **
👉 FB - / marketingkev
👉 LinkedIn - / kevingeary
** CHAPTERS **
0:00 Intro
01:56 Main Options for Targeting Elements
03:18 Global Element Styling
06:16 BEM Classes
23:45 Utility Classes
31:26 Universal Selector
35:22 ID Styling

[@richardlassiter]

I started teaching web design when everything was done in Notepad and evolved 20 years through Front Page, Dreamweaver to WordPress. I am excited as I can be about what I am learning from you. You are making a skill I was about to let go of fun, challenging and exciting again. Sincerely, you are a great teacher. Thank you.

[@Gearyco]

💪🏻💪🏻💪🏻

[@ukukudu]

Yes Kevin is very good teacher ❤ Make web design Great again!

[@ZachariahWiedeman]

@@ukukudu please don't ruin it 😅😅

[@jamorahcito]

Bev's different shades of pink have been haunting me for 20 years. this video nailed it. You are freaking hilarious.

[@Gearyco]

🙏

[@VangelisTsiotsios]

@Gearyco, What a fantastic series of content. The signal-to-noise ratio is off the charts!!! I came for the Oxygen related stuff (to solve some of the struggles I am facing), and staying for the fantastic learning. The chuckles are a bonus. Can't help but burst out with laughter every time I hear "Prison time!!! Thank you for such amazing learning experience

[@Gearyco]

🙌

[@ManolisGerakakis]

Thank you for yet another great video Kevin. Your PB101 course gives away so much valuable information that others would easily charge $997 for (or even more). Really and deeply appreciate it. 🙏

[@InfoMentor-Ops]

Definitely an old school chump here. I took on rebuilding our company's promo site after the original 3rd party developers washed their hands of it about 18 months ago. Crash course / self learned Oxygen and came up with a similar representation within 2 months, but still based on a 20+yr old methodology (the last time I was seriously involved with web design). How I wished I had viewed this back before the rebuild. I am now re-re-building the site within a sandbox environment, implementing all the newly acquired techniques thanks to this 101+ course. Huge thanks for opening my eyes

[@mbrinmanidw]

8:17 - man, such a good teacher. Had me laughing as you got me to be more interactive with the lesson. 😂

[@gojiyaravi2]

BEV Calling 🤙🏻☎️📱😂. Really excited for next lectures 🤩.

[@katewhelan2407]

I am soaking up all of your lessons as fast as I possibly can and absolutely loving the value I get from each one. Thanks so much for your awesome teaching Kevin, and for cracking me up in a cafe along the way (although the BEM chant got me some awkward looks haha)

[@andrew.schaeffer4032]

Great lesson - jam packed with concise content. I like to remember double underscores for elements because elements are close to the ground like the underscores look on the screen.

[@jeffersonsavian]

I finally understood the problems in using tailwind css in wordpress. Thanks

[@felixrivera2691]

Boy, I can't wait for the next Lesson!

[@kakenetit2]

Another excellent lesson. Thanks, Kevin.

[@eucalyptech]

Great poke to Bev ! Thank you Kevin for your tutorial !

[@basilbabaa1628]

And yet another excellent and concise lesson. Invaluable!

[@davidwalls2304]

Enjoyed and learned quite a bit from this lesson. I will be rewatching and taking personal notes. Looking forward to lesson #09.

[@juanb.274]

Your acting sketch was top notch mate, we are also getting lessons on how to handle clients requests. Best tutorial series I've witnessed. I started with pure css, then bootstrap and then Elementor, lost all the joy in building as I could see myself getting chumpier. Now time to level-up!

[@Gearyco]

Thanks a ton!

[@juanb.274]

I'm the one thanking you! enjoy your weekend!@@Gearyco

[@zakirfaizal6321]

I actually thought you got a phone call the first time! Love this course

[@microice-]

Fantastic!!!, now I understand better your previous videos before this 101 section. Thanks for this content 😁

[@rudyhanusek424]

you, sir, are legend 👍

[@stripedgoat8470]

I've been a fan of your channel since your very first videos came out, and I really enjoy seeing the progress you've made along while selflessly sharing your knowledge... Especially your path of figuring out which approach fits the best for the given situation. I see the introduction of "pro mode" in ACSS exactly as a result of that! Massive congrats for your journey 🤝 Let's keep rocking!

[@Gearyco]

🙌

[@ManolisGerakakis]

Golden! Thank you once again Kevin!

[@Gearyco]

Who is Dave? 🤔

[@ManolisGerakakis]

@@GearycoHahaha. This was for Dave Foy and his video about fluid typography. I had already left you a comment for PB101: L08 for which I have to say again it is sooooo Pro Level!

[@VascoDanielBaiao]

You've got me at first with that picking phone at 13:19 "Hey Beth!" It was fucking hilarious 😂 I really appreciate the way you teach. It's what keeps me going through the lessons-the cheering up, the evident passion you have for the subjects you're teaching, and the humor throughout the classes. I'm not a professional in the sense that I don't make a living from this. I only manage my own business's personal website (DIY mode). I've been getting quite frustrated with Elementor for the past few years, wondering if it was all there is for someone who doesn't want to be a programmer (PHP). I also started realizing what you referred to-that many web designers lack the insight, passion, or understanding (this is happening in many fields, unfortunately) and end up doing poor work. Now I understand better why I had these red flags at the back of my head (🚩 Elementor 🚩 pixels 🚩 plugins for everything 🚩 repeating tedious actions 🚩 following a path just because everyone was doing it). Thank you for guiding us through the valley. I feel that this generous pro bono course you provide is creating a chain reaction in the field that will become more visible as time passes by.

[@Gearyco]

Glad you’re liking it!

[@izkuhl]

Very good content.

[@davidnickson5043]

wow it all makes sense now. 🤯🤯🤯🤯

[@flexjones1983]

Spot on as always.

[@varidenes]

Kevin! This is very useful!

[@derekshort]

Did you know that you can customize your cursor in macOS? Use your brand's colors by going to Settings > Accessibility > Display then scroll down to Pointer outline color and Pointer fill color.

[@jnslzr]

thanks a lot for these amazingly entertaining explanations = )

[@JanWessels]

As a teacher of webdesign you are inspiring and a funny guy. And futhermore you are a physical and talkative double of my brother in law. He is also passionate about martial arts. I would not be surprised if your constellation is twins as he is.

[@ManolisGerakakis]

BEM vs. Bev = 1-0 😂 I just realized how much I hate my previous web dev chump life. Time for some love ❤ with the power of Global Styling and BEM!

[@AmandaLucaseu]

Great lesson Kevin

[@salsh4937]

hahahahhahaah my phone is ringing hold on... oOH its BEV lolzzz.........very nice i had a laugh out loud on it.........perfect lesson very good "When in Doubt BEM it Out"

[@a1webguy]

Kevin, Listen Up......"When in doubt, BEM it out!!!!!"

[@anaf4072]

13:10 LOL Can't get better than that: education + entertainment. That's Kevin

[@chelofonte]

That call from Bev was funny 😂

[@Aktiff.B]

Or.. ooooor.... you could just ignore Beth and leave it as it is. :D And now seriously. I was a chump for some time (but doing only small websites just for my personal use). Thanks to you I decided to go from elementor to bricks (first great step up). but I was always scared being web developer for clients. Thanks to you (again) I see, it's not only much easier than it seems but also fun. And I really didn't know 10% of what I know now like 4 months ago. Also, ACSS changed the game too. So.. third time thank you. More thanks incoming. :D

[@Gearyco]

This is what I do 99% of the time! Great call.

[@koperkuba]

Present!

[@user-cr2sp7my8h]

Thank so much for this tutorial! Will BEM still be needed when Bricks has introduced its new feature Components?

[@Gearyco]

100%

[@wordpressjunkie8830]

Can you make an episode in the future about accessibility? and how you handle that in your projects?

[@Gearyco]

We will talk about various things related to accessibility throughout the course

[@TammyButcherPlus]

BEV IS RELENTLESS! 🥵

[@Rollclick]

I know this is the next lesson, but do we not use variables for grid?

[@Gearyco]

Yes I recommend tokens for grids.

[@philipplunch8526]

25:11 is there a way to use the .breakout-xl class from Automatic.css in a BEM class? I think there is no variable, did I miss something?

[@Gearyco]

That technique requires multiple lines of CSS so there’s no way to make a variable for it. You can make a sass mixin for it but that’s a little more advanced.

[@philipplunch8526]

@@Gearyco Thanks for the quick reply! I see, than this might be one of those use cases for utility classes :). But I will look forward to getting into the more advanced stuff as well.

[@jcc5018]

is the double underscore a styling choice you made to distinguish elements or is it a required syntax/ common practice in CSS?

[@Gearyco]

It’s BEM Syntax. It makes the CSS easier to read and distinguish. It’s not a physical requirement but it’s the standard practice.

[@jcc5018]

@Kevin Geary cool, thanks. I'm debating trying to redo my site from the messy bootstrap and theme css to just writing my own. But I'm going have to remove so many classes in my view if I do. Not sure if it's worth it. Cause that's not my strong suit

[@Gearyco]

@@jcc5018 I always recommend people just follow best practices on the new sites they build rather than trying to go back and fix existing sites.

[@philipplunch8526]

21:13 I get that but what confuses me is BEM naming when it comes to any kind of wrappers. Also not sure when to use wrappers at all

[@philipplunch8526]

3 seconds later you point out my mistake. Im totaly BEM-grandparenting. Need to stop with that

[@John.Rearden]

Good lesson. All this is new to me and there is definitely merit to your approach but it must be stated that it is a very niche way of building things in the no-code world we live in. Forget about Elementor, the page builder I use, not even Webflow has the functionality for this method. But yes, if one goes the Bricks route, this is the way to go, and one will eventually have to take the assistance of ACSS for quality of life improvements of web designing. Your approach has merit, but it requires one to learn to code, and I am not sure how many will be up to task in the no-code world we live in!

[@Gearyco]

It’s not niche, it’s proper methodology based on the advancement of CSS. Most page builders have failed to keep up because they’re too busy trying to cater to absolute beginners. As you’ve seen, elementor is the worst of the worst. That, in no way, is any sort of standard to measure by.

[@stripedgoat8470]

What you're saying is essentially that if one wants to up their game to the highest efficiency possible, one has to put in the effort to get there. In this case - yes, that is entirely correct; some css skills are necessary to be learned. Those who aren't willing to "get their hands dirty", will remain in the majority - which is the "no code" world you mentioned. However do note that we're not learning programing here, and HTML/CSS are ESSENTIAL knowledge for any web developer, whether one uses a page builder or not. What Kevin demonstrates throughout these lessons is not "the Bricks route", it's THE cleanest route to develop your frontend, outside of the scope of using any page builder. Bricks/Oxygen just happens to fully allow for utilizing the objectively best approach, and makes the development process tremendously easier, vs. doing it all completely yourself.

[@Gearyco]

@@John.Rearden I don't delete comments.

[@Gearyco]

@@John.Rearden You keep saying it's a "niche way of doing things." It's literally what the entire CSS world does outside of the land of page builders. BEM has been around since 2005. Class-first workflow has been around since the 90s. If you're looking for "niche" -- it's the approach page builders like Elementor take as they deviate from decades-long accepted standards and consistently fail to keep up with CSS innovation.

[@John.Rearden]

@@Gearyco Hi Kevin, My comment to @stripedgoat got deleted so I assumed that the only person who could delete my comment was you as you didn’t like my reply, in which case I apologise for the insinuation, may be KZbin deleted my comment thinking it was spam. Anyhow, I don’t use the word ‘niche’ as a slur, rather as a compliment, and if I have to use another word for it, I’ll use the word ‘Elite’, I.e. it’s the elite way of doing things, like a surgeon with a super-speciality degree, it’s a niche category amongst surgeons, who themselves are a niche category. What I essentially wrote in that deleted comment was that learning CSS is not a small deal, it’s a big deal, and if one has to learn anything well, one must go down the CSS rabbit hole. For instance, there are so many CSS libraries and frameworks such as Bootstrap, Foundation, Materialize, Bulma, Taileind CSS, Semantic UI, UIKit, SCSS, ACSS, and the like, that a beginner to CSS wouldn’t even know where to start. There is this another fellow on KZbin, Kevin Powell, who makes complicated videos on CSS. The question then becomes, do I want to go down that CSS rabbit hole? I am not sure yet, and I reckon many would share my scepticism, as no page builder outside of Brucjs/Oxygen even offers these functionalities, not even Webflow, thus making these methods niche/elite. If one has to examine the page building business model, what is it that these page builders are selling? A no-code environment, and essentially what they are saying is that you don’t need to know how to write code, just design and assemble, and we will write the code for you, and that approach has worked, and I don’t think the clock is turning back from the no-code world to a learn-to-code world. PB101 is gold, and I have been watching it and absorbing it with an open mind. Cheers.

[@j.h.fehlis]

The call! 😆

[@sSimoneenomiSs]

Maybe a dumb question, but how do you use the owl spacing inside BEM? Custom CSS?

[@Gearyco]

Owl spacing is deprecated. Just use gap.

[@sSimoneenomiSs]

@@Gearyco okay, thank you! And thank you so much for making this course! All lessons contain so much value.

[@-ct-celcomtechniques2566]

I was not ready for Bev's phone call 😂

[@Gearyco]

She always catches you off guard

[@dallaslogic]

I legit took like 30 seconds to remember who Bev was. I thought he was making some kind of BEM joke 😂

[@euandrefrancisco]

I won't be scared to answer Bev's calls anymore.

[@groundpets5101]

love the phone funny

[@filmgenius2]

When will the Grid course come out. ? Lol😅

[@Gearyco]

L09

[@ZachariahWiedeman]

These long variable names would make my grandfather, who had to write software with only a single KB of space available to program in, eat his hat. 😅

[@sophiemulders]

is there a cheatsheet somewhere? i have trouble with remebering everything you say lol.

[@Gearyco]

It’s a lot! Maybe when the course finishes I can create one

[@developermonir]

👋

[@PswACC]

13:07 I thought to myself, it is only a matter of time before the wife called or the kids came running in. No reason to stop the video though. but no, was Bev from accounting. lol

[@jeffbarnhart6441]

Need to add the Peanut's teacher sound effect next time. kzbin.info/www/bejne/p5Clhmieh56ajqc

[@rickdugmore]

Chump level reduced 📉

[@ZachariahWiedeman]

Why is Bev in Accounting making decisions about how the website looks? Stay in your lane, Bev! 😂

[@derekshort]

Of course Bev would call instead of text or email. Lol

[@PapaG-0101]

oh, how I don't wanna be a chump anymore... 🤣

[@derekshort]

BEM violations = web prison time

[@Testfortest142]

But if it would be prison time with Kevin, would you do it?

[@derekshort]

@@Testfortest142 No! Lol. We can't rid the world of bad websites if we're in prison. Lol. I also don't want prison shower time.

[@Testfortest142]

@@derekshort 😂😂