Learn CSS BEM (and avoid these common mistakes)

Summary

This video script delves into the intricacies of CSS methodologies, focusing on BEM (Block Element Modifier). It explains that CSS can be challenging due to its numerous components like selectors, box model, and flexbox. BEM offers a structured approach to writing maintainable CSS by organizing styles into blocks (reusable layout parts), elements (components within blocks), and modifiers (style variations). The script clarifies the use of naming conventions, avoiding high specificity, and common pitfalls like using margins on blocks. It also touches on the flexibility of BEM, such as blocks being elements or utility classes. The speaker encourages viewers to ask questions and shares a personal milestone of reaching 100 subscribers.

Takeaways

• 😀 CSS is challenging due to its vast knowledge requirements and potential for creating unsystematic 'Spaghetti code'.
• 🔧 CSS methodologies, like BEM, provide a structured approach to writing styles to maintain code quality.
• 🔑 BEM stands for Block, Element, Modifier, and helps in organizing CSS for better maintainability.
• 🧩 A Block in BEM is a standalone piece of the layout, which can be reused across different contexts.
• 📐 Elements are parts of a block that only make sense within the context of that block and do not function independently.
• 🎨 Modifiers in BEM represent variations in style or state of a block or element, avoiding high CSS specificity.
• 📄 When naming in BEM, focus on describing the layout rather than the content to ensure reusability.
• 🔄 Grid is a special block type that serves as a container for other blocks but cannot stand alone semantically.
• 🚫 Avoid using margins on blocks as it can hinder reusability and lead to maintenance issues.
• ❌ Common mistakes in BEM include nesting CSS classes, using BEM entities like utility classes, and creating overly complex or simple blocks.
• 🌟 The speaker emphasizes the importance of community engagement, answering questions, and the personal milestone of 8,100 subscribers.

Q & A

What does CSS methodology entail?

CSS methodology refers to a set of rules that guide the writing of CSS styles to ensure systematic and maintainable code.

Why is BEM considered beneficial for CSS?

BEM (Block, Element, Modifier) is beneficial because it helps avoid the 'Butterfly Effect' in CSS, where changes in one part of the project can cause unintended side effects elsewhere, making projects easier to maintain.

What is the significance of the double underscore and double dash in BEM syntax?

The double underscore and double dash in BEM syntax are used to denote elements and modifiers, respectively, which helps in creating a clear and systematic naming convention for CSS classes.

What is a 'Block' in BEM and how is it different from a 'Grid'?

A 'Block' in BEM is a standalone component of a layout that can be reused in different contexts. A 'Grid' is a special case of a block that cannot stand alone semantically but serves a functional purpose as a container for other blocks.

How should you name blocks in BEM to ensure reusability?

Blocks should be named in a way that describes their layout rather than their content to ensure they can be reused in different contexts.

What defines an 'Element' in BEM?

An 'Element' in BEM is a part of a block that does not have semantic meaning or function on its own and only makes sense within the context of its block.

Why is it recommended to keep CSS specificity low in BEM?

Keeping CSS specificity low in BEM helps maintain a flat structure, avoiding nesting and concatenated selectors, which simplifies the CSS and makes it easier to maintain.

How do modifiers work in BEM and what is their purpose?

Modifiers in BEM represent changes in state or slight visual modifications of a block or element. They are used to alter the style or behavior of a block or element without creating entirely new classes.

What is the difference between using a modifier and creating a new block in BEM?

Modifiers should be used for minor changes to a block or element, such as color or size. If extensive changes are needed, creating a new block is recommended to avoid complex overrides and maintain clarity.

Can a block also be an element at the same time in BEM?

Yes, a block can also be an element at the same time in BEM. This is common in patterns where one block is used as a component within another block.

What are some common mistakes to avoid when using BEM?

Common mistakes to avoid in BEM include using margins on blocks, nesting classes in CSS, treating BEM entities like utility classes, creating elements of elements, and creating blocks that are either too complex or not reusable.