Your block is card, so last thing wouldn't match, because of cardHeader - writing.
The second way is the way I would go, because it keeps classes "unique" for each element, so a header title and a body title cannot be accidentally switched by the notation like in the first example.
This would also finally lead to really small SASS code, which I would prefer before CSS ;) :
.card{
//properties for the whole card block
&__header{
&-title{
}
&-subtitle{
}
}
&__body{
&-title{
}
&-content{
}
}
}
I don't see a problem in dividing element or block names with a single - for better readability.
Also you could mix up two blocks within a card block here like you have a card block including a header block and a body block, if header and body blocks are logically seperated like:
card
header
header__title
header__subtitle
body
body__title
body__content
But I would use my example before in this case :)
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
Your block is card, so last thing wouldn't match, because of cardHeader - writing.
The second way is the way I would go, because it keeps classes "unique" for each element, so a header title and a body title cannot be accidentally switched by the notation like in the first example.
I would finally write that this way:
This would also finally lead to really small
SASScode, which I would prefer before CSS ;) :I don't see a problem in dividing element or block names with a single - for better readability.
Also you could mix up two blocks within a card block here like you have a card block including a header block and a body block, if header and body blocks are logically seperated like:
But I would use my example before in this case :)