掌握CSS BEM命名规范，让你的代码更整洁

在前端开发中，样式表管理是一项重要的任务。随着项目规模的增长和复杂度提高，“类名混乱”的问题愈发凸显出来。“BEM”作为一种流行的 CSS 命名规则，在一定程度上解决了这个问题。

什么是BEM？

BEM 是一种结构化的 CSS 类名称编写方式——Block-Element-MODifier 的缩写形式。它通过将 HTML 元素拆分为 Block (模块) 和 Element(元素)，并根据需要加上 Modifier 修改器来实现清晰且易于维护的设计系统。

如何应用到你的设计流程里呢?

当你开始一个新的 UI 设计时，请按照以下步骤操作：

第一步: 定义块(Block)

每个独立的功能组件都可以被看作是一个“block”。例如按钮可以定义成 .button；头部导航栏则命名为.header-nav

<!-- 示例 -->
<div class="header">
    <div class="logo"></div>
</div>

<style scoped lang='scss'>
.header {
}
.logo {}
</style>

这里我们把整个页面布局部分称为 header, 而内部的小图标就叫做 logo.

第二步 : 添加子元素(Element)

接下来是给这个 block 中的一些特定区域或者功能点起名字, 这些就是 element 部分了。 比如上面例子中的 <div> 就属于 header 区域的一部分. 我们可以这样表示:

<header class="header">
   <!-- 子元素如 nav-link 等等... -->
 </header> 

此时如果想单独修改某个具体的内联标签的话就可以这么写了:

/* 只针对 .nav-link 内容生效 */
.nav-link {}

/* 如果要改变所有此类样式的颜色，则需先找到其父级容器再设置属性值即可*/
.header .nav-link{}

第三步 ：引入修饰符(Modifiers)

有时候我们需要一些细微的变化去适应不同的需求情况这时就需要用 modifier 来完成这项工作啦！它可以用来标记某些特殊状态或者是增加默认配置之外的新特性等等... 举个简单的例子来说如果我们想要让某一个 button 在点击后变成灰色背景色那么只需要这样做就行了：

<button type="submit" disabled></button>

然后我们在 scss 文件里面声明一下就好啦！

.button--disabled { background-color:#ccc; }

这样一来当我们的业务逻辑发生变化的时候只需简单地调整对应的变量而无需改动过多的地方从而大大提高了项目的扩展性和灵活性同时也方便团队成员之间的协作沟通

以上便是关于如何正确运用 BEM 规范来进行网页制作的一些建议希望对你有所帮助!