BEM in CSS Complete Tutorial (+ Examples)

Why use BEM?
👉 Professional JavaScript Course: https://bytegrad.com/courses/professi...
👉 Professional CSS Course: https://bytegrad.com/courses/professi...
👉 Email newsletter (React + Next.js course out soon!): https://email.bytegrad.com

💻 Premium Courses:
Professional JavaScript: https://bytegrad.com/courses/professi...
Professional CSS: https://bytegrad.com/courses/professi...
All courses: https://bytegrad.com/courses

🔔 Email newsletter (get notified of new courses): https://email.bytegrad.com

⏱️ 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 .
.
TOP resource to LEARN AI for Developers - https://datacamp.pxf.io/RGyxrR (paid sponsorship & ByteGrad Sp. z o.o. gets commission)