Hacker News Reader

Comment by ryantownsend | Hacker News Reader

It's not so much about performance, it's about specificity. To override anything in `.c-button.primary` you'd need something to have equal or greater specificity (meaning you couldn't do `.c-button--large`).

Obviously this is a fairly basic example, but with more chaining comes more levels of specificity which makes for increasingly difficult changes and worse productivity.

View on HN

I've done a fair amount of CSS in my time and I have felt the pain, I understand why BEM wants to keep specificity at 1.

One thing bothers me though. Isn't this very WET? You have to repeat the `.primary` rules in every `--primary` thing?

I'm still torn apart about `.button.primary` and `.button--primary`. Also semantic classes vs style bound classes. I'm not completely convinced by any methology.

I don't get your example.

What's the difference between

    .c-button.primary { … }
    .c-button.large { … }

and

    .c-button--primary { … }
    .c-button--large { … }
?

.c-button--primary has lower specificity that .c-button.primary

But .c-button.large has the same specificity as .c-button.primary.

Indeed, but with BEM, you keep a specificity of 1, which means you can override styles simply by adding a class and ensuring that it is further down in the style sheet than its other base classes.

Like mentioned above, this keeps things simple and prevents the snowball effect of people continually adding classes or selectors to override styles.

Single Reaponsibility principal. Create a class called .button. The responsibility of that class is to define what a button looks like. Then create a class called .button--primary whose sole responsibility is to define what a primary button looks like. If you create a class called .primary it has multiple responsibilities spread over the solution making it harder to maintain and improve upon

Reply on news.ycombinator.com