BEM in CSS Complete Tutorial (+ Examples)

Why use BEM?

💻 Premium Courses:

⏱️ Timestamps:
0:00 - Intro: the pitfalls with selecting HTML-elements in CSS that arise from its global scope
0:45 - Problems with using mixed selectors (by tag, id's and classes at the same time)
4:25 - Specificity is the mechanism the browser uses to decide which declaration 'wins' in case of conflict
6:37 - !important rule: don't use it to escape from these specificity issues
7:14 - Another problem with the 'beginner' way
7:55 - First improvement: use only classes everywhere and select HTML-elements directly by their class
9:05 - Example with classes everywhere
9:39 - Clashes in class names are very common when there is no modularity
11:03 - We want modularity in our CSS
11:29 - BEM gives us that modularity
13:24 - BEM creates this modularity by giving us an easy way to create unique class names
13:38 - Components in React/Angular/Vue vs BEM
13:59 - BEM stands for Block Element Modifier
16:02 - Modifiers in BEM are variants
17:34 - React/Angular/Vue have options for CSS modularity, but some people still prefer BEM in those frameworks
18:10 - Learn BEM because you will see it often as a developer

#css #bem #cssbem #webdevelopment #coding #programming

Note that my videos may contain mistakes. Always verify yourself that your code is safe and does what you want it to do for your specific situation. You agree by watching the videos that you are solely responsible for any mistakes in your code.

This channel and all its content is owned & operated by ByteGrad Sp. z o.o. with Tax ID: PL6762676561 .
.

[thomastthai]

Excellent explanation of the "why" behind BEM.

[JustforFun-icee]

This is a spectacular introduction to BEM, its motivation, and usages. I’m very much a fan of educational approaches that walk the student with how the solution comes about and why, showing the thought process that can then be used for other problems too!

[michelemoneywell]

Thank you for an excellent presentation. You have a gift for teaching.

[tabliqatchi]

Thank you very well explained. You seem to be a new gem on the YouTube :). I'm officially your 12th subscriber. Good luck. 💪

[ExaltMySelf]

The algorithm suggested a gem, thank you :) it would be awesome if you could setup react projects from scratch for beginners

[guitarguy-europe]

Hi Wesley, just bought your Pro CSS course. BUT... after login the browser screen remains completely blank. Using Chrome and FireFox Developer browsers in latest versions. As you have no contact mail address for support I have to communicate right here on YT.