porsager/bss

Document how bss handles specificity

fuzetsu opened this issue ยท 3 comments

Please close if this isn't a concern but I just came across it, and was a bit confused for a sec, might be worth documenting.

m('a' + b.d('block'), { hidden: true }, 'Still Visible')

Makes sense why it happens, and easily solvable.

Flems to reproduce.

Ah yes. It's not really related to bss, but I guess it gets more apparent when the definitions are so close to each other. the same could happen using style

It is more of a general css gotcha that hidden sets display none, under the covers while it doesn't have high enough specificity to win over the css display block ๐Ÿ˜Š

It seems like quite an edge case to include in the docs (I've never used the hidden attribute myself). Maybe a wiki page with general css gotchas?

Maybe a wiki page, yes.

I brought it up as a bss issue because of this this commit: 44ea8d9

While using bss you kind of convince yourself you're working with normal css and classes, but (for good reason) bss applies classes with higher specitivity that they normally would be applied, potentially causing this kind of thing.

EDIT: never mind, I just tested it out again and I think I was just remembering using the hidden attribute with some library that applied !important to it or something. It's pretty easy to override the hidden attribute.

I think I'll just close this ๐Ÿ˜„

Hehe.. Yeah hidden is overridden even with the lowest specificity, but you've got a good point about documenting the part about bss specificity workings... I'll rename the title and reopen ;)