Modifying BEM classes with Sass @extend

Question

With the BEM methadology, say I have two classes like this:

.staff__teacher

and .staff__teacher--professor

In the markup for the professor, is the idea to have both classes or just the modified class?

<div class='staff__teacher staff__teacher--professor'></div>

or

<div class='staff__teacher--professor'></div>

From my point of view, it seems to make much more sense to go for the latter as it is more streamlined and easier to read.

In Sass, the class would be created by simply extending the .staff__teacher class

.staff__teacher--professor{
    @extends .staff__teacher;
    //...extra professor styles here..
}

However, in the majority of tutorials I've seen on BEM, both classses are added to the markup. Can someone help me understand if one way is preferable to the other? Are there any problems that using my method might cause?

Answer 1

Firstly, this is a fairly opinion based answer. There is nothing stopping you using @extends instead of a base class. Here are some reasons why two classes may be used.

1. It's not just about SASS

Firstly, not everyone uses SASS. Even LESS didn't have extend until fairly recently. A methodology should not limit itself to a particular preprocessor or one at all. Plain old CSS is what we are looking at here. However to could do something like this:

CSS

.button,
.button--red,
.button--green {
    // base styles
}

Personally I'd rather leave the base style alone once I've written it and in the case of buttons I might have quite a lot of modifiers. For me this is getting a bit messy, where as putting two classes on an element is keeping my CSS cleaner and more concise.

2. Descriptive

Part of BEM is that classes are now more descriptive, you can look at a stylesheet and have a greater understanding of the module/component and what is contained within it. For me base classes do the same. It gives me more information when I'm looking at my markup.

<input type="submit class="button button--green"/>

I can see it's a green button and that it derives from button, I know I can change this easily and there are probably other options available to me. All without looking at the stylesheet.

3. Flexibility and consistency

Don't think that you will only ever have a base class and one modifier. You can quite easily have many. For example, I could have button, button--large and button--green.

<input type="submit class="button button--large button--green"/>

So which modifier would extend button? If both did then you would have the same styles applied twice. How does another developer know? By keeping a simple consistent approach your component is much clearer to read, understand and use correctly.

Summary

These were a few reasons why extend is not used often in examples. I think the most important point is, what ever you do make sure is a consistent approach and all developers are aware of this.

Answer 2

  use code this sample 
  //css 

   <style>
   .firstClass{
      color:red;
      font-size:20px;
    }
    .secondClass{
        border:1px solid red;
        font-size:30px;
        display:inline-block;
    }
    .thirdclass{
       font-size:40px;
    }
    .fourthclass{
       padding:50px;
    }

   </style>

     //use code html

    <div class="firstClass secondClass thirdclass fourthclass">[email protected]</div>
    <div class="secondClass thirdclass"> [email protected] </div>
    <div class="thirdclass firstClass"> [email protected] </div>
    <div class="secondClass fourthclass"> [email protected] </div>