css bem 模型 – 编写可扩展和可维护的 css 指南
在本文中，我们将深入探讨 bem（块、元素、修饰符） 方法，这是一种流行的 css 命名约定，可帮助您为大型项目编写干净、结构化且可维护的 css。 bem 确保您的代码随着项目的增长保持可扩展性，并减少风格冲突的可能性。
1.什么是边界元法？
bem 代表：
块：本身有意义的独立实体，例如按钮、菜单或表单。元素：执行特定功能的块的一部分，例如按钮标签或菜单项。修饰符：块或元素的变体或状态，例如禁用的按钮或突出显示的菜单项。
bem 方法强调创建可重用、可预测和可维护的 css 代码。
bem 命名约定：
.block {}.block__element {}.block--modifier {}
block：代表主容器。元素：跟在块名称之后，用双下划线（__）分隔。修饰符：跟在块或元素名称之后，用双连字符 (–) 分隔。
2.定义结构
让我们用一个例子来分解bem的结构。
立即学习“前端免费学习笔记（深入）”；
示例：
在此示例中：
块：.menu 是代表导航菜单的主块。元素：.menu__list 和 .menu__item 是块内的元素。修饰符：.menu__item–active 是修饰符，指示菜单项的活动状态。
3. bem 中的块
块是一个独立的、可重用的组件。将其视为一个独立的实体，可以放置在代码中的任何位置，而不必担心其样式受到其他元素的影响。
示例：
.button { padding: 10px 20px; background-color: #3498db; color: white; border: none;}
这里，.button 是一个定义按钮组件样式的块。您可以在网站的多个部分重复使用此块。
4. bem 中的元素
元素是块的一部分，没有独立的含义。它与区块绑定并存在以执行与区块相关的功能。
示例：
.button__icon { margin-right: 10px;}.button__label { font-size: 14px;}
这里：
.button__icon 是 .button 块中的一个元素，代表按钮中的图标。.button__label 是另一个元素，代表按钮的文本标签。
5. bem 中的修饰符
修饰符 表示块或元素的变体。修饰符用于更改组件的外观或行为，例如更改按钮的颜色或使元素更大。
示例：
.button--primary { background-color: #2ecc71;}.button--large { padding: 15px 30px;}
这里：
.button–primary 是一个修改按钮背景颜色的修饰符。.button–large 是另一个增加按钮大小的修饰符。
修饰符也可以应用于元素：
.button__icon--small { width: 10px; height: 10px;}
6.使用 bem 的好处
可扩展性：bem 被设计为可扩展的，使其成为具有许多组件的大型项目的理想选择。可重用性：块是独立的，可以在项目的不同部分重用。可维护性：bem 鼓励清晰、一致的命名，使得随着项目的发展更容易维护 css。可预测性：您可以轻松辨别哪些元素属于哪些块，并根据修饰符了解它们的变化。
7. bem 的实际应用
让我们看一个更完整的示例，其中包括块、元素和修饰符：
html：
card title
this is a simple card component.
css：
/* Block */.card { border: 1px solid #ddd; padding: 20px; border-radius: 5px;}/* Elements */.card__header { margin-bottom: 15px;}.card__title { font-size: 18px; color: #333;}.card__body { margin-bottom: 15px;}.card__text { color: #666;}.card__footer { text-align: right;}/* Modifier */.card__button--primary { background-color: #3498db; color: white;}
在此示例中：
.card 是代表整个卡片组件的块。.card__header、.card__title、.card__body 和 .card__footer 是卡片块中的元素。.card__button–primary 是将主要样式应用于卡片内按钮的修饰符。
8. bem 中要避免的常见错误
嵌套元素过多：避免深层嵌套元素，因为它可能导致不必要的长类名。不必要的修饰符：仅当需要更改块或元素的外观或状态时才使用修饰符。将 bem 与其他命名约定相结合：在整个项目中坚持使用 bem 以保持一致性。
结论
bem 方法是保持 css 有序、可预测和可扩展的强大方法。通过将组件分解为块、元素和修饰符，您可以维护更清晰的代码并避免样式冲突，从而使您的项目开发更快、更高效成长。
在 linkedin 上关注我
里多伊·哈桑
以上就是CSS BEM 模型 – 编写可扩展和可维护的 CSS 指南的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1629973.html
微信扫一扫 
支付宝扫一扫 
