Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums Other On Specificity: What's the difference? Reply To: On Specificity: What's the difference?

#184993
__
Participant

Well, in this version,

.block
    something: 100%
    .element
        something-else: black

.element is useless outside of a .block. One might intend this, but it does allow for hard-to-notice mistakes, while you know that .block--element is always going to work, even if you forget the .block parent. (Of course, forgetting the .block parent might be just-as-easy a mistake to make.)

they mention specificity traps and move on.

Meaning, .one .two is more specific than (for example) .not-two. So, if you wanted to override the styling in .two, just adding the .not-two class wouldn’t cut it. At the very least, you’d need something like .one .not-two and possibly .one .two.not-two.

using BEM on crack

TBH, this is exactly how I feel about it. I don’t like the way BEM looks, and I don’t like how crowded and convoluted it makes the markup. It’s not friendly. In my mind, it’s just a few steps away from inline styling. CSS has child/descendent selectors because that’s often the best way to find an element. I try really hard to never have more than one or two levels of nesting, but I there’s nothing inherently wrong with nesting.

Some styling shouldn’t depend on context. But some clearly should. I guess my biggest objection is that BEM dismisses that idea out-of-hand.