BEM 命名规范

BEM（Block, Element, Modifier）是一种流行的CSS命名约定，旨在提高代码的可维护性和可重用性。以下是BEM命名规范的主要要点：

1. Block（块） ：

   • Block是组件的高级抽象，独立于其上下文的功能性部分。通常表示一个独立的UI组件。
   • Block的命名应该是简洁明了的描述性名称，用以表示它的目的或功能。例如：button, menu, card.

2. Element（元素） ：

   • Element是Block的一部分，没有意义上的独立性，只有在特定的Block内有意义。它们不能单独使用，而是依赖于它们的Block。
   • Element的命名应该使用Block名称作为前缀，以便清晰地表明其所属的Block。例如：button__label, menu__item, card__title.

3. Modifier（修饰符） ：

   • Modifier用于修改Block或Element的外观、状态或行为。它们可以使Block或Element具有不同的变体。
   • Modifier的命名应该使用Block或Element名称以及修饰符的描述性名称。例如：button--large, menu__item--active, card__title--highlighted.

4. 命名约定：

   • 使用双下划线**__来分隔Block和Element，使用双短横线-**来分隔Block/Element和Modifier。
   • 使用类选择器来应用BEM命名约定。
   • 避免使用层叠选择器，因为这会增加特定性，降低了样式的可重用性和可维护性。
   • BEM的命名约定提倡使用长而具有描述性的名称，以便更清晰地表达其用途。

5. 示例：

   <div class="button button--large">
       <span class="button__label">Click me</span>
   </div>
   

6. 优点：

   • BEM提供了一种结构清晰的命名约定，使得代码更易于理解和维护。
   • 通过明确地定义Block、Element和Modifier的关系，可以降低样式冲突的可能性，增加样式的可预测性和可靠性。
   • BEM鼓励重用组件和样式，提高了代码的可重用性。

BEM是一种灵活且功能强大的CSS命名约定，但在实际应用中，也要根据项目的特定需求和团队的实际情况做出适当的调整和变化。