用BEM和现代CSS选择器控制级联
发布网友
共1个回答
热心网友
本文为 360 奇舞团前端工程师翻译 原文标题：Taming the Cascade With BEM and Modern CSS Selectors 原文作者：Liam Johnston 原文地址： css-tricks.com/taming-t...
BEM格式编写CSS在前端开发领域是颇具争议的，但它是更受欢迎的CSS方之一。尽管个人持有不同意见，但BEM有其显著优势，尤其是避免CSS级联中的特异性冲突。正确使用BEM格式的选择器时，选择器的特异性得分通常为0,1,0，这有助于确保CSS编写和编辑的样式不会影响到网站的其他部分。在大型项目中，BEM的这种特性尤其有用。
在CSS选择器方面，现代CSS选择器如:is()、:has()和:where()为开发者提供了更多控制级联的手段。:is()和:where()选择器的特异性得分分别是其参数列表中特异性最高的元素和0,0,0。:has()伪类的特性正在迅速得到浏览器支持，但当前在生产环境中使用仍需谨慎。
将BEM与现代CSS选择器结合使用，可以帮助开发者更有效地管理特异性。例如，使用:where()选择器可以在不增加特异性得分的情况下，减少模板逻辑和BEM类的使用。在处理非BEM格式的HTML时，:where()和:is()选择器可以提供解决方案，即使在HTML结构不受控制的情况下，也能确保CSS选择器的特异性保持一致。
总之，无论是否全心支持BEM命名法，保持选择器特异性的一致性对开发者来说是一个良好的实践。利用现代CSS选择器，结合BEM的优势，可以更高效地管理和控制CSS级联，从而提升开发效率和代码质量。
