How to quickly locate a css rule written in BEM, SASS?

Question

How to quickly locate the source of a css rule written in BEM?

when I found a css rule in Inspector, say

.section__title{
  ...
}

I'd love it if I could just copy the .section__title, and search in my code editor. One step, so fast.

However, when codebase is written in BEM, also there're many sass partials, i need to find .section first, then drill down find &__title. Eye strain!

What's your approach to locate a BEM rule in codebase quickly?

Thanks!

Answer 1

As you might be working in modular / component base architecture then in that case by using BEM you can easily identify this class can come from which component by looking at the class name itself.

• If you want to search the way its looking in complied file. Then in that case you need to write your code in plain css format then you would not be able to avail sass features.

• You will face same issue not for searching exact class name when you are using @mixins or function so its not particularly BEM

To identify the line where its written for below are the points.

• Do not keep on nesting every block this makes code really complicated to find out examples:

Incorrect way

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

Correct way

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

• Try to maintain not to go beyond level-3 in specificity. To calculate the css specificity you can check it over here Specificity Calculator

• When you are working in component base architecture then like every component has unique selector in the same way try to add unique parent selector so that it won't get conflicted with any other class name. This is help you to locate the file by directly looking at the class name itself.

• This will also help even if when you are working on creating multi theme project and you need to bring all your style files at single place i.e> index.sass by using @import keyword. As every file has unique parent, so there will be no conflicting classes.