biv重叠css

BEM（Block Element Modifier）是一种流行的 CSS 命名约定，通过标准化类名的命名，使得定位和修改 CSS 变得更加清晰和可维护。然而，由于 BEM 的命名方式较为冗长，当需要多次定义样式时，就会导致 CSS 文件变得容易出错。这时，BIV（Block Instance Variable）结构就变得十分有用。

BIV 是一种通过重叠样式来避免重复定义样式的技术。在 BIV 所使用的命名方式中，块（Block）的名称不包含数值，而数值部分可被称为实例（Instance）。同时，采用了变量（Variable）后缀以代表不同的属性。通过 BIV 方式，所有 CSS 皆可由实例、块和变量组成。

/* 通过 BIV 重叠样式 */
.button {}
.button.primary {} 
.button+ .button {}
.button+ .button.primary {}

/* 通过 BEM 定义样式 */
.button {} /* 定义块 */
.button--primary {} /* 定义块的变量 */
.button__inner {} /* 定义块内元素 */
.button.primary {} /* 定义块和变量 */
.button.primary .button.primary {} /* 定义块和块的关系 */

在上面的代码中，可以看到 BIV 和 BEM 的不同。BEM 命名方式相对冗长，而 BIV 的命名方式则更加简洁，同时也避免了 CSS 重复定义，因此更具可维护性。

总之，BIV 使用起来相对 BEM 更加简单，同时也更具可读性。但 BIV 可能会导致 CSS 的重叠复杂性增加，因此需要根据具体的需求来选择。