Hacker News new | ask | show | jobs
by allendoerfer 3621 days ago
I don't get your example.

What's the difference between

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

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

.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