what should be the naming class for various font style and variant BEM

[zymr-keshav]

I am reading this BEM and tried to apply in my project which using less and Bootstrap v3. I have tried to set class name for font setting in BEM but it doesn't look valid to me. something I am missing to understand. here is the relevant less file

@OpenSans: "Open Sans";

.open-sans {
  font-family: @OpenSans;
}

.font-light {
  font-weight: 300;
}

.font-regular {
  font-weight: 400;
}

.font-semibold {
  font-weight: 600;
}

.font-bold {
  font-weight: 700;
}

.font-normal {
  font-style: normal;
}

.font-italic {
  font-style: italic;
}

.font__normal--light {
  &:extend(.open-sans, .font-normal, .font-light);
}

.font__normal--regular {
  &:extend(.open-sans, .font-normal, .font-regular);
}

.font__normal--semibold {
  &:extend(.open-sans, .font-normal, .font-semibold);
}

.font__normal--bold {
  &:extend(.open-sans, .font-normal, .font-bold);
}

.font__italic--light {
  &:extend(.open-sans, .font-italic, .font-light);
}

.font__italic--regular {
  &:extend(.open-sans, .font-italic, .font-regular);
}

.font__italic--bold {
  &:extend(.open-sans, .font-italic, .font-bold);
}

.font__italic--semibold {
  &:extend(.open-sans, .font-italic, .font-semibold);
}

so my question is

what shoud be name

font__normal--bold or font__bold--normal or font__bold-normal ?

Please suggest

[maciejsaw]

You shouldn't have separate styles for each font style. Don't use class to provide single style. If you want a specific element to have italic font, just add font-style: italic; to the element specific styles. For example

.promo-table__additional-message {
   font-style: italic;
}

This keeps the style attached to the component, which makes it more flexible, reusable and safer to maintain.

[zymr-keshav]

I need separate style for the need of my project.

[maciejsaw]

I'm sure there's a different way to achieve what you need, without classes like these. I assume you need these because you handle this with JS somehow, so maybe consider using attributes selectors? For example [font-style="italic"]?