How to categorize typography variants in BEM?

Question

I have just recently been introduced to BEM and I'm excited to implement the methodology in my react component library.

I have a Typography component with different variants. Notably, the variant is required (i.e. there is no default).

Suppose I have these variants:

• header1
• header2
• header3

I'm trying to figure out the best way to implement BEM for this typography component. One option would be to make each variant its own block element like so:

.header1 {}

.header2 {}

.header3 {}

However, these are technically variants or modifiers, aren't they? So another option is to make each variant a modifier like so:

.typography {
  &--header1 {}  

  &--header2 {}  

  &--header3 {}  
}

But block element typography is supposed to be able to stand-alone. In this case, the variants are required... The more I think about this, the more unsure I feel about how to best name this. Any suggestions?

Answer 1

The second option is more in-line with the BEM philosophy, i.e:

.typography {
  &--header1 {}  

  &--header2 {}  

  &--header3 {}  
}

The "one class per component" principle is a good rule of thumb in general.