Im not the best at CSS and came across a piece of code that kind of confuses me.

.grid-product__title.grid-product__title--body:hover {
  text-decoration: underline;
}

I had a look at MDN and it usual declares a reusable property, like a variable?

But what does it mean if it is in the selector? Is it maybe a parent selector of .grid-product__title.grid-product__title and gives it an underline when the parent body is selected or something? Im highly confused

Thank you very much :)

CodePudding user response：

It's not special to CSS, it's just part of the BEM (Block, Element, Modifier) naming methodology where you're supposed to name your selectors as BLOCK__ELEMENT--MODIFIER, so

• grid-product is the block
• title is the element
• body is the modifier (though in all honesty that's maybe a bit of an adapted "modifier").