css的结构化类名命名方式（structured class names），网上的讨论比较少，就发一期专栏。

(资料图片仅供参考)

结构化类名是一个非常常见的css类名处理方式（BEM这类规范用的就是结构化类名），好处在于：

避免了复合选择器的使用，类名层次关系明确，更易于后期维护；

让css像js一样可折叠，代码简洁方便阅读；

示例：

在使用sass时，可以使用父选择器 & 进行结构化类名的处理，使其变得可折叠。

父选择器 & ：您可以使用父选择器为外部选择器添加额外的后缀。当使用像BEM这样使用高度结构化类名的方法时，这一点尤其有用。只要外部选择器以字母数字名称结尾（如类、ID和元素选择器），就可以使用父选择器附加其他文本。

这时，css可以像js代码块一样折叠，后期封装组件或是重构都可以直接折叠起来，打包带走。

并且所有样式都是直接添加到对应的元素，没有使用复合选择器。这意味着所有的元素样式都不依赖于元素所处的位置。

命名没有绝对的规范，但一个好的命名方式往往能减轻维护的负担。

参考链接：

https://sass-lang.com/documentation/style-rules/parent-selector

同步专栏（方便复制代码）：

https://juejin.cn/post/7235966403063758908