如何解决如何快速定位BEM、SASS编写的css规则?
如何快速定位BEM编写的css规则的来源?
当我在 Inspector 中发现一个 css 规则时,说
.section__title{
...
}
如果我可以复制 .section__title
并在我的代码编辑器中搜索,我会很高兴。一步,好快。
但是,当使用 BEM 编写代码库时,也有很多 sass 部分,我需要先找到 .section
,然后向下钻取找到 &__title
。眼睛疲劳!
谢谢!
解决方法
由于您可能在模块化/组件基础架构中工作,因此在这种情况下,通过使用 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
关键字。由于每个文件都有唯一的父文件,因此不会有冲突的类。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。