DEV Community

loading...

Discussion on: BEM Methodology In CSS: A Quick Start Guide

Collapse
dirtycode1337 profile image
Dirty-Co.de

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:

card
    card__header
        card__header-title
        card__header-subtitle
    card__body
        card__body-title
        card__body-content 

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 :)

Forem Open with the Forem app