css bem复用性差

CSS是前端开发中不可或缺的一部分，而BEM(Block,Element,Modifier)则是一种常用的CSS命名规范。虽然BEM规范能够帮助开发者更好地组织CSS代码，但是随着项目的不断扩展，BEM规范也带来了复用性差的问题。

首先，BEM规范中，一个块(Block)通常会包含多个元素(Element)和多个修饰符(Modifier)。这种组织方式是为了让CSS更易于维护和扩展。但是，随着项目的扩展，同一样式被复制粘贴到不同块中的情况越来越普遍，这就导致了样式的冗余。

/* 样式的冗余 */
.menu .item {
  padding: 10px;
  font-size: 16px;
}

.tab .item {
  padding: 10px;
  font-size: 16px;
}

其次，BEM规范中，元素和修饰符都必须依赖于块进行命名。这种依赖性也使得在将元素或者修饰符单独复用时，需要额外添加块的命名前缀，从而导致CSS代码的冗长和复杂。

/* CSS代码的冗长和复杂 */
.menu .item {
  padding: 10px;
  font-size: 16px;
}

.menu .item--active {
  color: red;
}

.tab .item {
  padding: 10px;
  font-size: 16px;
}

.tab .item--active {
  color: blue;
}

因此，尽管BEM规范可以提高CSS代码的可维护性，但在项目扩展和单独复用元素或修饰符时，它也会带来复用性的问题。在实际开发中，开发者需要根据具体情况选择使用BEM规范或者其他更适合的命名规范。