BEM 101: How to Make Web Design Organized & Scalable

[@Gearyco]

Just realized I never showed what the grid of 6 cards was for in the beginning. Too much to cover! It was to show how global styling changes work to highlight one of the main goals of scalability. But I forgot about them. Oh well! You end up seeing global styling control in the end example anyway.

[@AntiAtheismIsUnstoppable]

What about custom variables instead of using modifier classes? I like that settings are always at the top, and that can be done with custom variables. All the modifiers are then set in custom variables in the dark theme class itself. You can then make all sorts of custom themes of the card very easily, and all the settings are at the top. Custom variables are good especially with colors, because you want to keep track of what colors you use, for documentation purpose also. Usually I would try to make all the colors needed available in the :root, I think that's where they belong, and then any modified color will be taken from that list.

[@alyssadotson246]

I am new to web development, and I have blown through your videos over the past week. I NEVER comment on here, but I am genuinely thankful for your content. Will be joining the inner circle soon, thanks for taking your time to create these tutorials for us!

[@Gearyco]

🙌

[@jasonvargas4798]

Join it! It is fantastic. I actually landed a job through the community and it has been amazing.

[@LonaldBruhn]

I’m the same way. His contents is just so relevant and indisputably logical. I’ve never had anything taught that in way that just so clearly makes perfect sense.

[@davidnickson5043]

My lord I’ve heard you talking about bem for ages and I sort of knew it, but I’m so glad I found this old tutorial! 100% know how to structure everything now and the dark card was a bonus! Cheers legend!

[@bluefuzecom]

Been a designer for 22 years now, and I feel like I have been doing this in my own unique way. But it’s really cool to see some kind of formalized system here. Nice work!

[@francesgonzales4547]

I went thru a junior front-end developer interviews where one interviewer said that my CSS is not structured and organised but my Front-end is close enough to the mock-up. I came across BEM and glad to learn it from this video first-hand. Your video is easy to understand from concept of BEM to practical usability is on point. Now I will structure my CSS in a whole new perspective. Thanks, Kevin for this!

[@om78692]

OMG you are a life saver i am a newbie and I found you as my mentor I am starting from this video I am getting the best practices i love this content how is this on youtube this invalueable and only 6000 views... this is gold in web development which make your foundation to be a good and best developer

[@SimonAngel]

I had been running into reusability issues with classes and this BEM explanation really helped

[@VeriousSmithIII]

Very cool. Been writing css since 2001 and hadn't ventured into BEM. Thank you

[@jasonetaylor]

Great tutorial. I've used BEM in the past but now realize I wasn't using it 100% correctly.

[@ReubenHochstetler]

The BEM naming system has been a real game changer. I don't recall where I first heard about it (probably one of Kevin's other videos) but I always had a little bit of confusion around the element and the modifier. Now it's perfectly clear. Thanks Kevin for another great tutorial!

[@blcksgnota]

2 Years later and i found this gem! Thanks Kevin :)

[@bjoernzosel]

super valuable and professionell content! I never used BEM. Makes maintaining and changing existing websites a piece of cake. What I find really terrible is that if one makes a chump video explaining how Elementor works, there are thousands of views. But professional content, which is much more valuable, unfortunately not. It's just that most flies sit on the dog pile :)

[@arpitgupta8838]

I was trying to implement bem technology but i didn't know what it was. I came across your video and the way you explained was crystal clear. Thank you for the great content and you just earned a subscriber!!

[@Gearyco]

Glad it helped!

[@chelofonte]

FANTASTIC Kevin, this is something so necessary for me, you probably can realize it due to my recurrent questions in the Inner-Circle, you don't know how much I appreciate this video.

[@Gearyco]

You're very welcome

[@alineduchesne6422]

This video was perfect timing. I purchased Oxygen quite some time ago and it was too in-depth for me as a newbie. I've dabbled with various themes and when I got the email about the new Oxygen, I decided to jump back in since I've learned quite a bit since my first purchase. Watching this made quite a few things click and I immediately knew what some of my past mistakes were. Very well done. Looking forward to checking out some of your other videos.

[@MrAverageViewer]

Your tutorial was outstanding!! I've combed the web, trying to find a cohesive & in-depth explanation of BEM, and after having viewed your tutorial, I finally understand the concepts, and the rationale behind the concepts. Thanks for giving a thorough, yet concise walkthrough of BEM!!

[@Gearyco]

Glad it helped!

[@Gearyco]

Glad it helped!

[@rouisaek]

This is the best `BEM` tutorial on the planet!!!. Thanks for sharing

[@BrianYiga-d3w]

WOW! This has been so helpful! Have been through many tutorials but yours trumps them all. Thank you so much!!!

[@yuwownly8630]

Thank you very much Kevin for this detailed BEM architecture course!!😊👌

[@jameswthrasher]

Finally got around to watching this one. So good, and clarifies the “why”. Excellent as always, Kevin.

[@burner918]

I had heard of BEM but being new to Wordpress, i didn’t understand what the big deal was or why I’d go through the trouble until I found myself in class hell. This is one of the best explanations I’ve seen on why it’s important and how to use it. Thank you so much for this awesome video. 🙏🏼

[@Gearyco]

💪🏻

[@morozara4962]

I am amateur learning as I go. Thank you so very much. I am so glad . I became a member. At first I thought I would be lost but your style of teaching is incredible. AGAIN THANK YOU SO VERY MUCH

[@Gearyco]

🙌

[@rickheijster9316]

Thanks Kevin! I will be applying this to all my projects starting today.

[@omdollars]

Kevin, thanks, now I am one step closer to choosing acss. Feeling confident. Thanks!

[@Hellboua]

Didn't know about BEM till now. I wish all teachers were as instructive as you are ! Keep up the good work. Joevin, fresh inner circle member.

[@Gearyco]

Glad to have you on board!

[@richardc1925]

Kevin, I am watching your Page Builder 101 course (loving it) and watching this really helped me. This make so much sense and is helping me build better sites! Thank you so much!

[@Gearyco]

Glad it was helpful!

[@GavinDavidson]

Great vid, made so much sense! I learned a lot about CSS, not only BEM. I have been using BEM, but not in the correct way all the time, and now I know why. Yip, the border has a major lag, it's not only you. Thanks for another great tut!

[@Leavventuredifrucci]

I started using BEM since I discovered your videos, very useful tecnique. Thanks to this tutorial I realized that the Modifier could be used in a more efficient way (changing it only on the block element, dark card). Thank you Kevin!!

[@Gearyco]

💪🏻

[@VRudhraksh]

This is more than just gold. I'll be joining the Inner Circe soon. Looking forward to you. Thank you very much for this video. I cannot appreciate it enough.

[@Gearyco]

🙌

[@davidwalls2304]

Kevin, I've already "liked & subscribed" to this video and the channel. This is the second time viewing the BEM 101 video. This is a new concept for me but what a way to keep things easily maintainable, easily customizable, and a whole lot less random across a website. Thank you for opening my eyes to this approach.

[@Gearyco]

Happy to help!

[@martynpage4823]

Hi Kevin! been a bit busy with other stuff....loved this video..really well put together...

[@robertturner1550]

I would love to see the ACSS version of this. I'll be using BEM from now on. I really love the way you did the dark card version. This will definitely save time and money when developing sites.

[@Gearyco]

I show the ACSS version in most of my tutorials. But also, just created a new ACSS KZbin channel and it’ll be shown a lot there. KZbin.com/automaticcss

[@bonhomie.studio]

Thank you Kevin. Very helpful information. Very much appreciate the work you do for the community. All the very best.

[@dynamic-homepages]

Excellent, never heard of it before. But I really love it, and it makes a lot more sense. I recently started a project; just waiting for Bricks 1.5. Then I'm gonna start using BEM and reorganizing my Elements. Thanks a lot =)

[@larryfarr]

Thank you for taking the time to make this excellent video. So well explained. It cleared up so much for me and I appreciate it very much!

[@Gearyco]

Glad it was helpful!

[@patmatt8283]

ANOTHER awesome tutorial Kevin. Thanks a million. Am I the only one that thinks to themselves "I hope this never get's deleted"?😂

[@juliewilliams3461]

Thank you. This was very helpful I'll be making changes to our company website and your structure is great. I have tried to use a naming structure for software development and this is very easy to follow for Oxygen classes.

[@tlohangmotsokotsi9503]

This was amazing to watch. Can't wait to see more videos.

[@marinastanic]

This was TURBO awesome!!! Looove the neatness, orderliness and clarity of BEM application. Thanks Kevin - I've learned so much from this video 🎊🤩 Simply pure value!

[@Gearyco]

Great to hear! Hope to have you as a subscriber :)

[@kevinfisher1059]

I am a complete newbie to oxygen, understanding CSS, etc but I really want to learn. The organizational structure makes perfect sense. Great tutorial, thank you.

[@Gearyco]

Definitely stick with it. The sooner you implement this kind of stuff the better!

[@OneBrokeBloke]

This is my life now. Watching 1 hour videoes about BEM

[@Gearyco]

yep!

[@cabolove89]

This is amazing…I never stop learning from your platform…keep it up please I benefit a lot.

[@progress8888]

thank you! i really like your style that how you supply the information, this hour for me was like about 10 minutes duration lol +1 like/subscriber

[@ricardopurep056]

Amazing content.. even after a year, its really helpful to me. Thank you

[@WebTacticsLLC]

Ok. I've been building websites with Divi for a while and consider myself proficient in CSS...until now that is haha. The BEM framework is blowing my mind and I feel like I've been building wrong this whole time. Thanks Kevin for these trainings. I'm working through PB101 now as well.

[@Gearyco]

💪🏻

[@liviustanciu165]

Hi, Kevin. Would have been very interesting to add to this video a hover tutorial too. Like having the - - dark version on hover. I knew what BEM is, but the way you explain things is out of this world. Thank you for having the idea to become a digital marketer :)

[@jkarel-brovisuals]

Definetly love this tutorial, Kevin! Thank you for sharing and explaining BEM !

[@Pxwahid]

Nice video. Maybe already answered. But the sr-only class in the card is mainly used for screen readers only.

[@derekshort]

Thanks again for another great video! I’ve been using this style of coding for a while but not to this high degree. Thanks for the lesson. 😁🙌🏻

[@pablobarrientos2071]

Thanks to much for the class, i learned a lot! I´m already knew about BEM but i coudn´t use it to efficient as you demostrate. Now i have to practice! pd: i was using the class with the modifier at the same time because i learned that was necesary, and that made me troubles. Thanks again and pls forgive me for my english if i made a mistake. Peace ✌

[@Gearyco]

All good my friend!

[@sujit_webdev]

This is a very good explanation of BEM! Thanks a lot, Kevin!

[@ced888]

Very useful and interesting tutorial. Thanks for sharing.

[@justinluethke]

This video was greatly helpful for me! Very on point. The BEM naming convention has always scared me kinda xD. But thanks to this video, I am now pleasantly surprised at how easy this actually is. Thank you very much... Another question, because I got interested in seeing more videos from you: Is the Pagebuilder 101 Course also interesting for people who are learning and want to code websites with HTML, CSS, and JS?😀

[@Gearyco]

You can do it!

[@eucalyptech]

Thank you Kevin ! I love so much your deep tutorials because they really help to improve web development.

[@GrantAmbrose]

Very helpful! My CSS is all over the place, I'm definitely going to give this a go. I was wondering - if you have multiple blocks that share common styling like 2em padding / white bg / dropshadow... do you define these same rules in each block's css class, or would you create a new css class like .box and then stack this onto the other css class you create for each block.. if that makes sense

[@Gearyco]

There might be different types of cards that have shared styles. The shared styles go on the main .card class. The other styles go on modified card classes.

[@toby-green]

Great tutorial, like the ordered approach to CSS nomenclature. Did you do a video on using BEM with frames? Having seen this video I can see why there are so many classes with each imported frame. Managing the classes when the frame is used multiple times with different styling on different views is what I'm thinking about - how best to rename classes when wanting to change them or is it best to add css outside the class?

[@Gearyco]

We have a Frames livestream on Thursday this week for full Q&A and demos. Come join us!

[@Gearyco]

It's on the ACSS channel.

[@petrajovkov8622]

Thank you Kevin for all your effort! I was using BEM for a little while now. Also made the "mistake" to use nested BEM and found out that it is not working for me at all.

[@daansitters3531]

Great tutorial Kevin! I will try it out BEM. Thanks a lot!

[@loukaskouros2582]

Kevin I really love your explanation and thank you for your content to give us. When i use ACCSS framework can i do the same or i can use your existing class? Every time i was wondering how can i create a Card with ACCSS.

[@Gearyco]

For reusable components you would want to create custom classes. You can use ACSS variables to style those classes.

[@Bublelicious]

Thanks as usual for another fantastic tutorial, you make things so easy to understand!! Off-topic question : what are you using to change the look of Oxygen interface?

[@Gearyco]

Thanks! Not using anything this is oxy 4.0.

[@warrenaddison8422]

This was awesome. All your tutorial videos are awesome. What plans do you have for a version of this tutorial but instead of using vanilla Oxygen show best practices with how to combine BEM and ACSS?

[@Gearyco]

There will be a lot of them both here and on the ACSS youtube channel. Make sure you're subscribed there, too: kzbin.info

[@simonepagnini6735]

Very helpful as usual! Thanx for sharing! A question: when do you write these classes? I mean during the project of the web site (mockup for example, when you see the elements) or you write on the go while "translating" the sketch to real website blocks, sections and so on? Thanx!

[@Gearyco]

They're decided during dev.

[@tjveach]

Great Job!! I was using similar withing Webflow... hence why I am watching this..>!!

[@smithbenites5409]

I loved the tutorial Kevin, I had heard before about BEM, I used it in a very "cabernicola" way and not correctly, but this helped me to understand better the use of double hyphen, I had no idea what it was for. And also trying to learn how to use AutomaticCCS, I still get frustrated when I'm trying to recreate a design made in figma because I tend to be very stubborn in having the exact measurements in the design, that everything goes to the pixel hahaha. Anyway I love the tutorial and I comment that about the use of borders in Oxygen does not get slow or I have not felt it. I use windows on a decent laptop.

[@Gearyco]

Thanks for commenting on the borders field. I’ll keep trying to track down the problem. Im writing an article about the era of pixel perfect design being dead, so that may help you :)

[@smithbenites5409]

Great! excited for it to come out now 🙌

[@williamalake]

Awesome video. I learned a lot. Thanks! A quick question, how about consistency with other parts of the website. What if, for example, you used the same font styling in other parts of the website which are not team cards. Would you create the CSS class for each one or would you use a more global class which covered them all. How would you handle that with BEM? Because if I followed BEM in this instance, and then wanted to change the font size, I'd have to change it in multiple places.

[@Gearyco]

No this is why all font sizes are created from a base size and a math scale. You still have complete global control.

[@williamalake]

@@Gearyco thanks for your reply. I'm shocked you're still replying to messages after all this time! I'm not sure I explained myself clearly. I meant, what if in the team card name, I decided I wanted to use 1.2rem because I had used it in a "service catd" too. But then I thought that actually, I want both of those to be the same, always. So, now I have 2 classes with the same font size. I want all the other text to stay the same size and not change. Now I want both classes to have 1.3 rem. So I have to change them both? Is it better to change them both indivially to 1.3 or give them a separate class which controls them both? I might have 4, 5 or even 6 places that use that particular styling? I'd have to edit 4,5 or 6 classes to keep them all the same or is there a better way? Sorry, if I'm not explaining it clearly!

[@mihaiandrei97]

Been waiting for this video for so long. I am finally sure that I'm not supposed to be nesting elements. I can confirm that the borders window inside of Oxygen is insane. How is this still not solved yet... Hope we're gonna see some vids on Zaraz, Plausible, and maybe Motion Page. The later looks amazing, even for just creating some nice hover styles.

[@CartridgeBros]

New web dev here and I've built a couple small sites already. Would you recommend going back and fixing the classes on those to align with BEM or should I just focus on using it in the future?

[@Gearyco]

Just going forward probably

[@gagegogan4062]

FYI sr-only typically means only show in the screen reader. Typically you would make something like a skip to content button sr-only

[@Kaos9696]

I really love this video! It's helping me so much! I was wondering though, what if i always want every social icon on my website to be the same size? Would i still have a separate social icon class for the team card? Or would I have a block of social icon and also an element team card social icon?

[@Gearyco]

var(-social-icon-size)

[@JaysonRivest]

Thanks, Kevin! Hadn’t heard of BEM before and always struggled with class organization. This makes a lot of sense to me. I’d be curious how you would recommend implementing BEM and ACSS on the same site. I’m currently developing on Bricks, but am familiar with Oxygen too, so it wouldn’t necessarily have to be builder specific.

[@Gearyco]

I show the exact process in a lot of my videos.

[@Syphronix]

Awesome video - what Oxygen add on(s) plugin are you using/ would recommend? Cheers!

[@Gearyco]

As of right now only automatic.css and oxyextras. Those are the only oxygen specific plugins I use.

[@atomicpx]

I'm glad I watched this, it clarified some questions I had about naming conventions. Who says BEM aint sexy? :-)

[@vitspisek]

Great schtuff as always! You've touched a few pain points of mine. And I am certainly guilty of the "block-ception" of "block__within-block___of-another-block--variant__element" naming 🙂 I wish there was a better way to target and organize the elements of the modified variants (such as ".card--dark .card__heading") in 1 place instead of having the original set within the Oxygen GUI and the more specific variant in custom stylesheets. Recoda's class suggestion is helpful when writing the custom CSS in the stylesheet, but I still lose precious seconds when I click an element, check the default class properties in Oxygen GUI get puzzled by not seeing the properties/values only to realize that it's part of a modified parent block and its properties are set via stylesheet (or Selector Inspector or whatever tool which lets you create/select specific classes is called - which is good for organizing/listing, but pain to create). And yes, the border settings stutter for me too (Win + FF Dev). And I'd swear it started when you mentioned it in one of your previous videos 😀 Maybe it was not doing it in previous versions of Oxygen, I can't imagine I would not have noticed earlier.

[@Gearyco]

Oxygen needs to dramatically improve how stylesheets are accessed. For one, we should be able to edit stylesheets without opening the builder. Two, we should be able to open a floating stylesheets panel in the builder that doesn't block our access to other controls. That way we can easily pull it up whenever needed, add/change, and then minimize it again.

[@vitspisek]

​ @Digital Ambition Exactly. I am not having the common problems some people complain about: My Oxygen loading times are bearable, I got used to the (sometimes) clunky structure pane and the fact that I occasionally need to tripple-click things when renaming, etc. Once I chiseled my workflow a bit (which you greatly contributed to!), the experience of creating websites with Oxygen became very pleasant and efficient. But there are still areas in the UI which need improvement. Recoda is an amazing tool for improving the editor and the workflow in my opinion btw.

[@muldermediatube]

Thank you for these clear practical insights, it is much appreciated.

[@Gearyco]

You are very welcome

[@ceciliatabbi4218]

Finally found this video and understand what BEM is ^_^

[@jaimematos6457]

It would be awesome to see you covering how to properly build a Design System in Oxygen, following a grid guide and things like that!

[@Gearyco]

ACSS has a style guide page you can add to every website in seconds. ui.automaticcss.com/

[@kuba32110]

About borders - if you switch from all to, for example, top border, there's no such lag and i think is even faster to make 4 borders this way instead of all

[@Gearyco]

That’s still annoying. Shouldn’t have to do that.

[@SBinVancouver]

You're even more intense at 1.5x. Thanks. Excellent.

[@martinkarpowski8365]

Or even at 2x 😄

[@bikimel-directes]

Hello Kevin, thanks for this video. I didn’t know hiw bem worked so this been really helpfull. I thought it was mofe powerfull to work with general classes. I will try it out

[@CodeFusion]

This video alone elevate my skill level Thanks a lot Its a Gem

[@AlexArce]

Kevin great video, it filled a lot gaps in my knowledge. One question How do you name section that aren’t a Component. Like a hero section for example. Is the whole hero section consider a block and naming goes as follows .hero .hero_heading Etc Also, what if you have a couple of hero section designs. How would name them? Thanks Kevin for all the work you do. Your content help me leveled up my game.

[@SinisaSinjori]

Great tutorial Kevin! Thanks a lot!

[@andrew.schaeffer4032]

Thanks for the video! I mostly use the WET naming convention: write everything twice -jk. I do my best with BEM, but it is tricky to name stuff.

[@Gearyco]

lmao. It's definitely and art + science. There's no linear set of instructions to follow each and every time.

[@alexander-van-aken]

Kevin, you used stylesheets to use the dark modifier. Isnt the state button on an element also a way to target all the other classes inside the dark modifier? Or is it too much hastle instead of a stylesheet. Good idea by the way to make a stylesheet per content type.

[@Gearyco]

you want to avoid adding those types of selectors manually to the selectors area in Oxygen because they are a nightmare to edit and keep organized.

[@alexander-van-aken]

@@Gearyco yeah indeed. Thanks

[@tonifrisch1075]

Hi Kevin, you should maybe check your browser extentions if they lead to the lag problem on the border settings. I dont have this issue in all of my oxygen sites.

[@Gearyco]

We found out what it is. Oxygen add ons that add features to the panel. Specifically oxyextras and wp grid builder oxygen extension. Seems to be an oxy bug. We reported it.

[@bikimel-directes]

I loved the dark version specifier

[@Zp00kie]

This was extremely BEMeficial! Thank you.

[@jeffbarnhart6441]

may want to look at adding tools like hoverify chrome extension and text expander app to increase efficiency in development.

[@orzOnWeb]

I have had this naging feeling that my css wasn't clean and scaleable your video is proof of that. Can BEM replace tailwind?

[@Gearyco]

Tailwind is a very different philosophy and not a good solution for CSS in page builders. I would read this for a full understanding: automaticcss.com/tailwind-page-builders-bad-idea/

[@ryan-ho]

By adding wrappers to groups of elements, the upside is more control for styling of the child elements as you mentioned. How about balancing the issue of excessive DOM size (by having too many wrappers)? Curious to hear your thoughts!

[@Gearyco]

Wrappers are necessary for a lot of reasons. There shouldn't really be a DOM issue unless you're going completely overboard.

[@johanseidenfaden190]

Hi Kevin. Thanks a lot! So clear. I am trying to implement this method on a current project (a magazine site) and I have a question. Fx lets say that you have several types of cards on your site: .article-card & .opinion-card & .graphics-card and you want the byline to be styled the same way on all of them. I guess it wouldn't make sense to have .article-card__byline & .opinion-card__byline & .graphics-card__byline? Would it e BEM correct to have just a class called .card-byline that is used on all them?

[@Gearyco]

I still create unique classes. If I’m writing css it’s easy to group all three selectors so you don’t have to write the same styling code three times. And in the future it’s easy to break them up if their styling needs to become unique.

[@johanseidenfaden190]

@@Gearyco Makes sense. Thanks for the reply!

[@NelmediaCa]

So, if I understand well, let's say you create a card and have an h3 for the title/name and a p for description. You use global styling so that it looks like all the other h3 and p throught the page/site. So, that means that card__title and card__description would be created for "nothing" (i.e. maybe for future use, but that's all). What's the "weight" of working like that for a big page and whole site, having maybe 70-80% of classes without any styling at all? Is it really worth it? And if you want your card button (i.e. card__button) to look like other buttons on the page (let's say NOT all buttons, because that would be done with general styling in Bricks or ACSS I guess), then you end up styling buttons in 2 or 3 places exactly the same...? Do you create a more global class that you apply to your buttons then? Not criticising: just trying to understand the BEM mentality (though you explain a lot of stuff and your examples are really good, I still have those questions above in mind)... P.S. Need to work while listening to your videos, so pardon me if you answered those in it and it slipped by me).

[@Gearyco]

I can’t really answer all these in KZbin comments. Come to WDD live and ask and I can show you on the live.

[@iamjoker11]

Thanks for this, Kevin! I understand the concept of BEM in the card level however I'm struggling on this in a section level. If the UI designer is not following a fixed rule for font sizes, how do you deal with this? I.e. h3s are normally 2.4rem, then sometimes they use a different font size? I notice it happening a lot across the design but since they aren't under 1 section or card, they have no correlation at all, do I style this on the ID level or how would you create a utility class for this? Thanks

[@Gearyco]

Do the changes in font size have any reasoning behind them or the designer a bad designer?

[@iamjoker11]

@@Gearyco that's one way of putting it 😅 most likely the latter. The struggles of not having your own team yet 😂

[@badinpattamasirikul1287]

Thank you so much for another perfect video tutorial! About a block element inside a block element... Should we write Block__Element__Block__Element?

[@Gearyco]

No, you simply put the other block, like a button, inside of your main block. It gets its own classes like .btn and .btn--primary. If you need to modify it, you can target it using the parent block like: .custom-parent-block .btn {}

[@badinpattamasirikul1287]

@@Gearyco Thank you so much. Really Appreciate. I was really confused about this part.

[@jcc5018]

When using variables in handwriiten CSS, most site variables are defined under :root { }. Here you may define your various site colors and so forth that your components will use. But if you want to create new theme options, such as light and dark without having to go through and changing components to an alternate, is there a way to tell CSS to use one set of variables, over a different set of variables? The names themselves will be the same with each color set. But if there is a way to change one setting such as "Theme_style: DARK //Light; and it changes everything based on something like :root { dark { --primary:black;} Light { --primary:white;} } That would be even better for efficiency. I'm not sure how to handle that with CSS, or if I would need a conditional switch to use a different palette with php or similar.

[@Gearyco]

Yes, for automatic dark mode you can redefine your color variables inside @media (prefers-color-scheme: dark). For manual dark mode you need a switch to add a body class like "dark-mode" and then redefine your color variables within the .dark-mode class. This overrides globally scoped variables with local scoping.

[@SridharKatakam]

Nice video. Don't agree with what you said that it is a good practice to always have card images be wrapped in a div though. Why add an extra DOM element when it is not needed? Can be added only if and when required.

[@Gearyco]

Because if you’ve used the card on 10 different pages it’s too much work to go add it manually everywhere. Time is money and an extra DOM element costs practically nothing. That’s my take anyway. It’s not *wrong* to not include it, but it can come back to bite you in some cases.

[@dzulhelmi81]

When you do the modifier dark to the center card, you add a new class to the card. Actually how many classes we can assign to an element/div?

[@Gearyco]

Not sure how to answer that. You want to use as few as possible.

[@dzulhelmi81]

I am halfway thru this video, I see many classes use owl- name, is this owl classes is part of any css framework? The swaytheme you show when I inspect in the browser also use owl as the div class name

[@Gearyco]

Yes, they're part of automaticcss.com ... but they're deprecated now. You can just use gap.

[@marcorubiol_]

Hi there! Thank you for this tutorial. I was asking myself... Why the modifier --dark is having priority from the .team-card itself?

[@Gearyco]

Because the modifier class comes later in the cascade.

[@marcorubiol_]

@@Gearyco got it. Thank you!!

[@art-paintshop1684]

Great tutorial!