BEM 101: How to Make Web Design Organized & Scalable
HTML-код
- Опубликовано: 6 июн 2024
- This is one of those tutorials that will 100% change how you develop websites, so don't sleep on it!
Too many sites out there are "good looking," but when you look at the underlying page and component structure, CSS, etc. you realize that it's actually a nightmare in terms of scalability and maintainability.
Styling is just haphazardly tossed around to achieve an initial objective with zero thought put into future-proofing the design and layout.
This is a huge failure. It doesn't matter how pretty a website is, if it can't be easily maintained and scaled, you've failed as a developer.
In this training you'll learn a specific methodology called BEM (Block, Element, Modifier) for organizing your website's styling. The benefits of BEM are enormous:
• Organization
• Scalability
• Semantic accuracy & readability
• Avoiding class name collisions
• Easier writing
• Easier debugging
• Easier modification
• Avoid specificity issues
• Faster rendering
• "Self-documenting code"
Never again will your sites fail what I call the 3-month or 6-month rule. Never again will you develop a pretty website that has a horrific styling architecture underneath.
Not enough people take pride in building sites with a clean, efficient, concise, organized structure. In my opinion, this should be one of the main goals because scalability and maintainability is everything.
Want to go deeper? Join my Inner Circle: digitalambition.co/inner-circle/
00:00 Context & Black Belt Development
05:20 Why BEM?
08:38 Examples of Bad Dev
23:34 How BEM Works (Structure)
35:05 Example CSS
36:22 Real-World Example
39:07 Adding the HTML Elements
41:03 Adding the BEM Classes
43:36 Styling the Component
54:24 Adding a Modifier (Dark Component)
1:00:00 Final Thoughts
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.
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.
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!
🙌
Join it! It is fantastic. I actually landed a job through the community and it has been amazing.
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!
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!
Finally got around to watching this one. So good, and clarifies the “why”. Excellent as always, Kevin.
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.
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!
I had been running into reusability issues with classes and this BEM explanation really helped
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!
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
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!!
Glad it helped!
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!
Glad it was helpful!
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!
Thank you very much Kevin for this detailed BEM architecture course!!😊👌
Thank you Kevin. Very helpful information. Very much appreciate the work you do for the community. All the very best.
Definetly love this tutorial, Kevin! Thank you for sharing and explaining BEM !
Thank you Kevin ! I love so much your deep tutorials because they really help to improve web development.
This was amazing to watch. Can't wait to see more videos.
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!!
💪🏻
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.
You're very welcome
Very cool. Been writing css since 2001 and hadn't ventured into BEM. Thank you
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.
Happy to help!
This is the best `BEM` tutorial on the planet!!!. Thanks for sharing
This is amazing…I never stop learning from your platform…keep it up please I benefit a lot.
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
🙌
Thanks Kevin! I will be applying this to all my projects starting today.
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.
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.
Glad to have you on board!
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!
Glad it was helpful!
Kevin, thanks, now I am one step closer to choosing acss. Feeling confident. Thanks!
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. 🙏🏼
💪🏻
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!
Great to hear! Hope to have you as a subscriber :)
2 Years later and i found this gem!
Thanks Kevin :)
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. 😁🙌🏻
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 =)
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!!
Glad it helped!
Glad it helped!
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.
Definitely stick with it. The sooner you implement this kind of stuff the better!
Hi Kevin! been a bit busy with other stuff....loved this video..really well put together...
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.
🙌
Amazing content.. even after a year, its really helpful to me. Thank you
Great tutorial. I've used BEM in the past but now realize I wasn't using it 100% correctly.
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 :)
Great tutorial Kevin! I will try it out BEM. Thanks a lot!
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
This is my life now. Watching 1 hour videoes about BEM
yep!
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.
I show the ACSS version in most of my tutorials. But also, just created a new ACSS RUclips channel and it’ll be shown a lot there. RUclips.com/automaticcss
This is a very good explanation of BEM! Thanks a lot, Kevin!
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 ✌
All good my friend!
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.
Great tutorial!
Thank you for these clear practical insights, it is much appreciated.
You are very welcome
Great tutorial Kevin! Thanks a lot!
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 :)
ANOTHER awesome tutorial Kevin. Thanks a million. Am I the only one that thinks to themselves "I hope this never get's deleted"?😂
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.
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
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.
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
Very useful and interesting tutorial. Thanks for sharing.
Nice video. Maybe already answered. But the sr-only class in the card is mainly used for screen readers only.
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?
Thanks! Not using anything this is oxy 4.0.
Great Job!! I was using similar withing Webflow... hence why I am watching this..>!!
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?
There will be a lot of them both here and on the ACSS youtube channel. Make sure you're subscribed there, too: ruclips.net/user/automaticcss
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.
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 :)
Great! excited for it to come out now 🙌
This video alone elevate my skill level Thanks a lot Its a Gem
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.
For reusable components you would want to create custom classes. You can use ACSS variables to style those classes.
Another great one Gary.
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?
We have a Frames livestream on Thursday this week for full Q&A and demos. Come join us!
It's on the ACSS channel.
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!
ACSS has a style guide page you can add to every website in seconds. ui.automaticcss.com/
Thank you very much, very useful for me.
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!
They're decided during dev.
Another great tutorial!
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?
var(-social-icon-size)
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.
excellent content s2
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.
lmao. It's definitely and art + science. There's no linear set of instructions to follow each and every time.
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
That’s still annoying. Shouldn’t have to do that.
Thanks for the brilliant tutorial
you rock
i watch this video because im having problems with naming css .. and i want to make my css better , more better .. thanks for this tutorial ..
FYI sr-only typically means only show in the screen reader. Typically you would make something like a skip to content button sr-only
Finally found this video and understand what BEM is ^_^
Awesome video - what Oxygen add on(s) plugin are you using/ would recommend? Cheers!
As of right now only automatic.css and oxyextras. Those are the only oxygen specific plugins I use.
Thank you!
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.
No this is why all font sizes are created from a base size and a math scale. You still have complete global control.
@@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!
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.
I show the exact process in a lot of my videos.
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?😀
You can do it!
Always best Kevin!!!
I loved the dark version specifier
I'm glad I watched this, it clarified some questions I had about naming conventions. Who says BEM aint sexy? :-)
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?
Just going forward probably
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.
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.
Oh damn. I needed to see this.
This was extremely BEMeficial! Thank you.
fantastic tutorial. thanks from ❤. Please more dev stuff like metabox cloneable fields rending on frontend and so on 🎉
In grade 10, my final project for my Apple Basic class, I had more lines of comment than code. There was a lot of code too but more comments. Classmates asked me to write their code for them and I said the teacher would recognize my logic and comments
Could you do this with bricks, but with query loop? How would you use the modifier if the card you’re trying to change is a copy of the first by query
For a query loop you have to use nth-child or data attributes
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.
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.
@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.
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
Yes, they're part of automaticcss.com ... but they're deprecated now. You can just use gap.
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.
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.
@@Gearyco yeah indeed. Thanks
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?
Not sure how to answer that. You want to use as few as possible.
sir, is it advisable to use BEM if you're creating from with many radio button, label.. , many div container to use? i used BEM but im having trouble with radion button and label using div to group them ..
Not necessarily. I’d need to see what you’re working on.