CSS và BEM
Bài viết này giải thích về CSS và BEM.
YouTube Video
HTML để Xem trước
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 và BEM: Một phương pháp để quản lý kiểu dáng hiệu quả
CSS là một ngôn ngữ cơ bản được dùng để định nghĩa giao diện của một trang web. Tuy nhiên, quản lý CSS hiệu quả có thể là một thách thức, đặc biệt đối với các dự án quy mô lớn. BEM (Block Element Modifier) là một quy tắc đặt tên trong CSS được thiết kế để giải quyết các vấn đề này và cải thiện khả năng tái sử dụng và bảo trì.
Những thách thức trong CSS và sự cần thiết của BEM
Các thách thức trong CSS bao gồm các vấn đề sau:.
- Va chạm không gian tên toàn cầu: Trong CSS, tên lớp là toàn cục, điều này có thể gây ra rủi ro va chạm giữa các thành phần khác nhau.
- Lạm dụng bộ chọn phức tạp: Các bộ chọn con hoặc bộ chọn ID quá phức tạp làm tăng mức độ cụ thể, khiến việc sửa đổi sau này trở nên khó khăn.
- Giảm khả năng tái sử dụng: Các kiểu cụ thể trở nên khó tái sử dụng trong các thành phần khác.
BEM được thiết kế để giải quyết những vấn đề này.
Các khái niệm cơ bản về BEM
BEM bao gồm ba thành phần chính:.
- Block: Một thành phần độc lập với ý nghĩa riêng.
- Element: Một phần của block, được liên kết về mặt logic với nó.
- Modifier: Thay đổi diện mạo hoặc hành vi của block hay element.
Quy tắc đặt tên BEM tuân theo định dạng sau:.
.block__element--modifierblock: Tên của thành phần block.element: Một element là một phần của block.modifier: Đại diện cho một trạng thái cụ thể hoặc một biến thể phong cách.
Ví dụ thực tế
Dưới đây là một ví dụ đơn giản.
1<div class="button button--primary">
2 <span class="button__text">Click Me</span>
3</div>buttonlà một khối.button__textlà một phần tử.button--primarylà một bộ thay đổi.
Lợi ích của BEM
Sau đây là những ưu điểm của BEM.
- Nhất quán Vì quy tắc đặt tên nhất quán, mã nguồn trở nên dễ đọc hơn.
- Tái sử dụng Việc tái sử dụng các thành phần trở nên dễ dàng hơn.
- Dễ bảo trì Những lập trình viên khác có thể hiểu mã nguồn dễ dàng hơn, giúp việc chỉnh sửa trở nên thuận tiện.
Xây dựng một dự án sử dụng BEM
Thiết kế HTML
Dưới đây là một ví dụ về HTML áp dụng 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>Thiết kế CSS
Viết CSS tương ứng cho HTML như sau.
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}- CSS này định nghĩa các kiểu dáng dạng mô-đun sử dụng quy tắc BEM (Block Element Modifier) để tăng khả năng tái sử dụng và bảo trì.
Mở rộng kiểu dáng
Hãy xem cách thêm một modifier mới để làm cho một mục menu cụ thể trở nên không hoạt động.
HTML tương ứng sẽ trông như thế này.
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}- CSS này định nghĩa một modifier để làm mờ các mục menu không hoạt động và vô hiệu hóa thao tác nhấp chuột.
Các câu hỏi thường gặp
Khi sử dụng BEM, bạn có thể lưu ý các điểm sau.
Hỏi 1: Tôi có phải tuân thủ nghiêm ngặt quy tắc đặt tên của BEM không?
Không nhất thiết phải tuân thủ nghiêm ngặt quy tắc đặt tên của BEM, nhưng việc duy trì sự nhất quán là rất quan trọng. Xây dựng các quy tắc thống nhất trong dự án và đảm bảo toàn đội tuân thủ chúng.
Hỏi 2: Việc áp dụng BEM có khiến CSS trở nên dài dòng hơn không?
Việc áp dụng BEM có thể dẫn đến tên lớp CSS dài hơn, nhưng điều này giúp làm rõ vai trò của các thành phần hơn. Kết quả là khả năng bảo trì được cải thiện và lợi ích sẽ lớn hơn so với sự dư thừa.
Hỏi 3: Có thể sử dụng BEM cùng với các framework CSS khác không?
BEM có thể được sử dụng cùng với các framework CSS khác. Ví dụ, ngay cả khi sử dụng Tailwind CSS hoặc Bootstrap, bạn vẫn có thể áp dụng BEM vào các thành phần tùy chỉnh.
Kết luận
BEM cung cấp một quy tắc đặt tên rõ ràng để mô-đun hóa và giúp CSS dễ quản lý hơn. Bằng cách sử dụng phương pháp này, bạn có thể ngăn ngừa xung đột kiểu dáng và cải thiện đáng kể khả năng bảo trì cũng như tái sử dụng. Việc thiết kế quy tắc đặt tên phù hợp góp phần nâng cao chất lượng và năng suất của dự án.
Bạn có thể làm theo bài viết trên bằng cách sử dụng Visual Studio Code trên kênh YouTube của chúng tôi. Vui lòng ghé thăm kênh YouTube.