如何快速定位BEM、SASS编写的css规则？

编程问答 2022-05-26

问题描述

如何快速定位BEM编写的css规则的来源？

当我在 Inspector 中发现一个 css 规则时，说

.section__title{
  ...
}

如果我可以复制 .section__title 并在我的代码编辑器中搜索，我会很高兴。一步，好快。

但是，当使用 BEM 编写代码库时，也有很多 sass 部分，我需要先找到 .section，然后向下钻取找到 &__title。眼睛疲劳！

您在代码库中快速定位 BEM 规则的方法是什么？

谢谢！

解决方法

由于您可能在模块化/组件基础架构中工作，因此在这种情况下，通过使用 BEM，您可以通过查看类名本身轻松识别此类来自哪个组件。

  • 如果你想搜索它在编译文件中的样子。那么在这种情况下，您需要以纯 css 格式编写代码，那么您将无法使用 sass 功能。

  • 当您使用 @mixins 或 function 时，您将面临同样的问题，而不是搜索确切的类名，因此它不是特别的 BEM

识别下面写的是点的线。

  • 不要继续嵌套每个块，这会使代码很难找到示例：

方式不对

.parent {
    &__block {
        &__inner-block {
            &__inner-block-2 {
                &--modifier {
                    &::selector {}
                }
            }
        }
    }
}

正确方法

.parent {
    &__block {}
    &__block {}
    &__block {
        &--modifier {}
    }
 }

  • 尽量保持不超出level-3的特殊性。要计算 css 特异性，您可以在此处查看 Specificity Calculator

  • 当你在组件基础架构中工作时，就像每个组件都有唯一的选择器一样，尝试添加唯一的父选择器，这样它就不会与任何其他类名发生冲突。这有助于您通过直接查看类名本身来定位文件。

  • 即使您正在创建多主题，这也会有所帮助 项目，您需要将所有样式文件放在一个地方，即> index.sass 使用 @import 关键字。由于每个文件都有唯一的父文件，因此不会有冲突的类。

bemcodebasedebuggingdebuggingdebuggingfindfull-text-search