CSS and BEM
This article explains CSS and BEM.
YouTube Video
HTML for Preview
css-bem.html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>BEM Example</title>
7 <link rel="stylesheet" href="css-base.css">
8 <link rel="stylesheet" href="css-bem.css">
9</head>
10<body>
11 <!-- Header -->
12 <header>
13 <h1>CSS & BEM(Block Element Modifier)</h1>
14 </header>
15
16 <!-- Main content -->
17 <main>
18 <header>
19 <h2>BEM Example</h2>
20 </header>
21 <article>
22 <h3>BEM HTML Example</h3>
23 <section>
24 <header><h4>HTML</h4></header>
25<pre class="sample">
26<div class="button button--primary">
27 <span class="button__text">Click Me</span>
28</div>
29</pre>
30 </section>
31 </article>
32 <article>
33 <h3>BEM Example</h3>
34 <section>
35 <header><h4>HTML</h4></header>
36<pre class="sample">
37<header class="header">
38 <div class="header__logo">My Logo</div>
39 <nav class="header__nav">
40 <ul class="header__menu">
41 <li class="header__menu-item header__menu-item--active">Home</li>
42 <li class="header__menu-item">About</li>
43 <li class="header__menu-item">Contact</li>
44 </ul>
45 </nav>
46</header>
47</pre>
48 </section>
49 <header><h4>HTML+CSS</h4></header>
50 <section class="sample-view">
51 <header class="header">
52 <div class="header__logo">My Logo</div>
53 <nav class="header__nav">
54 <ul class="header__menu">
55 <li class="header__menu-item header__menu-item--active">Home</li>
56 <li class="header__menu-item">About</li>
57 <li class="header__menu-item">Contact</li>
58 </ul>
59 </nav>
60 </header>
61 </section>
62 </article>
63 <article>
64 <h3>BEM Example</h3>
65 <section>
66 <header><h4>HTML</h4></header>
67<pre class="sample">
68<header class="header">
69 <div class="header__logo">My Logo</div>
70 <nav class="header__nav">
71 <ul class="header__menu">
72 <li class="header__menu-item header__menu-item--active">Home</li>
73 <li class="header__menu-item">About</li>
74 <li class="header__menu-item">Contact</li>
75 <li class="header__menu-item header__menu-item--disabled">Disabled</li>
76 </ul>
77 </nav>
78</header>
79</pre>
80 </section>
81 <header><h4>HTML+CSS</h4></header>
82 <section class="sample-view">
83 <header class="header">
84 <div class="header__logo">My Logo</div>
85 <nav class="header__nav">
86 <ul class="header__menu">
87 <li class="header__menu-item header__menu-item--active">Home</li>
88 <li class="header__menu-item">About</li>
89 <li class="header__menu-item">Contact</li>
90 <li class="header__menu-item header__menu-item--disabled">Disabled</li>
91 </ul>
92 </nav>
93 </header>
94 </section>
95 </article>
96 </main>
97</body>
98</html>CSS and BEM: An Approach for Effective Style Management
CSS is a fundamental language used to define the appearance of a website. However, managing CSS effectively can be challenging, especially for large-scale projects. BEM (Block Element Modifier) is a CSS naming convention designed to address these issues and improve reusability and maintainability.
Challenges in CSS and the Need for BEM
Challenges in CSS include the following problems:.
- Global namespace collision: In CSS, class names are global, which poses a risk of collision between different components.
- Overuse of complex selectors: Overly complex descendant or ID selectors increase specificity, making future modifications difficult.
- Reduced reusability: Specific styles become harder to reuse in other components.
BEM was designed to solve these problems.
Basic Concepts of BEM
BEM consists of three main elements:.
- Block: An independent component with its own meaning.
- Element: A part of a block, logically connected to it.
- Modifier: Changes the appearance or behavior of a block or element.
BEM naming conventions follow the format below:.
.block__element--modifierblock: The component name of the block.element: An element that is part of the block.modifier: Represents a specific state or style variation.
Practical Example
Below is a simple example.
1<div class="button button--primary">
2 <span class="button__text">Click Me</span>
3</div>buttonis a block.button__textis an element.button--primaryis a modifier.
Benefits of BEM
The following are the advantages of BEM.
- Consistency Because the naming convention is consistent, the code becomes easier to read.
- Reusability It becomes easier to reuse components.
- Maintainability Other developers can understand the code more easily, making modifications easier.
Building a project using BEM
HTML design
Here is an example of HTML that applies BEM.
1<header class="header">
2 <div class="header__logo">My Logo</div>
3 <nav class="header__nav">
4 <ul class="header__menu">
5 <li class="header__menu-item header__menu-item--active">Home</li>
6 <li class="header__menu-item">About</li>
7 <li class="header__menu-item">Contact</li>
8 </ul>
9 </nav>
10</header>CSS design
Write the corresponding CSS for the HTML as follows.
1.header {
2 background-color: #333;
3 color: #fff;
4 padding: 10px;
5}
6
7.header__logo {
8 font-size: 24px;
9}
10
11.header__nav {
12 display: flex;
13 justify-content: space-around;
14}
15
16.header__menu {
17 list-style: none;
18 margin: 0;
19 padding: 0;
20 display: flex;
21}
22
23.header__menu-item {
24 margin: 0 10px;
25 padding: 5px 10px;
26}
27
28.header__menu-item--active {
29 font-weight: bold;
30 border-bottom: 2px solid #fff;
31}- This CSS defines modular styles using the BEM (Block Element Modifier) convention to enhance reusability and maintainability.
Extending styles
Let's look at how to add a new modifier to make a specific menu item inactive.
The corresponding HTML would look like this.
1<li class="header__menu-item header__menu-item--disabled">Disabled</li>1.header__menu-item--disabled {
2 opacity: 0.5;
3 pointer-events: none;
4}- This CSS defines a modifier that visually dims inactive menu items and disables click interactions.
Frequently Asked Questions
When using BEM, the following points can be kept in mind.
Q1: Do I have to strictly adhere to BEM's naming conventions?
It is not necessary to strictly follow BEM's naming rules, but maintaining consistency is important. Establish unified rules within the project and ensure the entire team follows them.
Q2: Doesn't introducing BEM make CSS more verbose?
Introducing BEM may result in longer CSS class names, but this makes the roles of components clearer. As a result, maintainability improves, and the benefits outweigh the redundancy.
Q3: Can BEM be used alongside other CSS frameworks?
BEM can be used together with other CSS frameworks. For example, even when using Tailwind CSS or Bootstrap, you can apply BEM to custom components.
Conclusion
BEM provides a clear naming convention to modularize and make CSS easier to manage. By using this method, you can prevent style conflicts and dramatically improve maintainability and reusability. Designing appropriate naming conventions contributes to improved project quality and productivity.
You can follow along with the above article using Visual Studio Code on our YouTube channel. Please also check out the YouTube channel.