CSS 和 BEM
本文解释了 CSS 和 BEM。
YouTube Video
预览的HTML
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 和 BEM：实现高效样式管理的方法
CSS 是一种用于定义网站外观的基础语言。然而，尤其是在大型项目中，有效管理 CSS 可能会充满挑战。BEM（块-元素-修饰符）是一种 CSS 命名约定，旨在解决这些问题并提高复用性和可维护性。
CSS 的挑战与对 BEM 的需求
CSS 的挑战包括以下问题：。
- 全局命名空间冲突：在 CSS 中，类名是全局的，这会导致不同组件之间可能发生冲突。
- 过度使用复杂选择器：过于复杂的后代选择器或 ID 选择器会增加权重，从而使后续修改变得困难。
- 复用性减少：特定样式难以在其他组件中复用。
BEM 的设计初衷就是为了解决这些问题。
BEM 的基本概念
BEM 由三种主要元素组成：。
- 块（Block）：具有独立意义的组件。
- 元素（Element）：块的一部分，与块在逻辑上相关联。
- 修饰符（Modifier）：改变块或元素的外观或行为。
BEM 命名规则如下所示：。
.block__element--modifierblock：块的组件名称。element：块的一部分。modifier：表示特定状态或样式变化。
实际示例
以下是一个简单的示例。
1<div class="button button--primary">
2 <span class="button__text">Click Me</span>
3</div>button是一个块（block）。button__text是一个元素（element）。button--primary是一个修饰符（modifier）。
BEM 的优势
以下是BEM的优点。
- 一致性 由于命名规范一致，代码更易于阅读。
- 可复用性 组件复用变得更加容易。
- 可维护性 其他开发者可以更容易地理解代码，使修改变得更加简单。
使用 BEM 构建项目
HTML 设计
以下是一个应用了BEM的HTML示例。
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 设计
根据 HTML 编写相应的 CSS，如下所示。
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使用BEM（区块-元素-修饰符）规范定义了模块化样式，以增强复用性和可维护性。
扩展样式
让我们来看看如何添加一个新的修饰符，使某个菜单项变为不可用状态。
相应的 HTML 将如下所示。
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定义了一个修饰符，用于将不可用菜单项视觉上变暗并禁用点击操作。
常见问题
使用BEM时，可以注意以下几点：。
问题 1：我必须严格遵守 BEM 的命名规范吗？
没有必要严格遵循BEM的命名规则，但保持一致性非常重要。在项目内建立统一的规则并确保整个团队遵循这些规则。
问题 2：引入 BEM 不会让 CSS 更冗长吗？
引入BEM可能会导致CSS类名变长，但这样可以让组件的角色更加清晰。因此，可维护性得到提升，优势远大于冗余。
问题 3：BEM 可以与其他 CSS 框架一起使用吗？
BEM可以与其他CSS框架一起使用。例如，即使在使用 Tailwind CSS 或 Bootstrap 时，你也可以将 BEM 应用于自定义组件。
结论
BEM提供了清晰的命名规范，实现CSS模块化，使管理更加便捷。通过这种方法，可以防止样式冲突，并大幅提升可维护性和复用性。设计合适的命名规范有助于提升项目质量和生产效率。
您可以在我们的YouTube频道上使用Visual Studio Code跟随上述文章进行学习。 请也查看我们的YouTube频道。