9 ms·

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 specificit

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.

allendoerfer 10y 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 { … } ?
- nilliams 10y ago
  .c-button--primary has lower specificity that .c-button.primary
  - allendoerfer 10y ago
    But .c-button.large has the same specificity as .c-button.primary.
    - deleted 10y ago
      [deleted]
    - buchanaf 10y ago
      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.
      - grumpywizards 10y ago
        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
kolme 10y ago
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.

allendoerfer 10y 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 { … } ?

nilliams 10y ago
.c-button--primary has lower specificity that .c-button.primary
- allendoerfer 10y ago
  But .c-button.large has the same specificity as .c-button.primary.
  - deleted 10y ago
    [deleted]
  - buchanaf 10y ago
    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.
    - grumpywizards 10y ago
      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

kolme 10y ago

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.