PB101: L08 - DRY Development With Classes & Global 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]

🙏

[@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. 🙏

[@GavinDavidson]

Thanks again, Kevin! I've watched you explain BEM so many times, and yet you've shown me another nugget of wisdom. Looking forward to the next lesson with much anticipation! I've always struggled with grid, and I know you will sort it out for me. Great job, dude!

[@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

[@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.

[@mbrinmanidw]

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

[@jeffersonsavian]

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

[@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)

[@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]

🙌

[@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.

[@felixrivera2691]

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

[@davidwalls2304]

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

[@koperkuba]

Present!

[@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

[@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!

[@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!

[@a1webguy]

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

[@zakirfaizal6321]

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

[@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!

[@om78692]

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"

[@microice-]

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

[@rudyhanusek424]

you, sir, are legend 👍

[@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.

[@davidnickson5043]

wow it all makes sense now. 🤯🤯🤯🤯

[@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]

🙌

[@TammyButcherPlus]

BEV IS RELENTLESS! 🥵

[@eucalyptech]

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

[@basilbabaa1628]

And yet another excellent and concise lesson. Invaluable!

[@chelofonte]

That call from Bev was funny 😂

[@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

[@kakenetit2]

Another excellent lesson. Thanks, Kevin.

[@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.

[@anaf4072]

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

[@flexjones1983]

Spot on as always.

[@izkuhl]

Very good content.

[@jnslzr]

thanks a lot for these amazingly entertaining explanations = )

[@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.

[@varidenes]

Kevin! This is very useful!

[@AmandaLucaseu]

Great lesson Kevin

[@user-cr2sp7my8h]

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

[@Gearyco]

100%

[@-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 😂

[@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

[@j.h.fehlis]

The call! 😆

[@euandrefrancisco]

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

[@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.

[@groundpets5101]

love the phone funny

[@Rollclick]

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

[@Gearyco]

Yes I recommend tokens for grids.

[@RobCooper]

I was going to add a utility class to a section and heard you in my brain "that's a violation"

[@Gearyco]

Not always! Depends on the utility class 💪🏻

[@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.

[@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

[@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

[@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.

[@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. 😅

[@ZachariahWiedeman]

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

[@developermonir]

👋

[@jeffbarnhart6441]

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

[@rickdugmore]

Chump level reduced 📉

[@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 😂😂