This is the thing that gets me. Most people who complain about CSS not doing this or not doing that seem to not understand how CSS actually works. Avoiding collision in CSS is so freaking easy it's funny to see Javascript based solutions for it.
I really wish that browsers could parse nested CSS like we do with SASS and LESS so that we can move on from this type of stuff.
Loading CSS on demand I can get behind because it makes sense. But there's no reason to create these strange class name solutions to avoid collisions, which make it hard to use browser developer tools, when you can namespace now. Today. With vanilla CSS even.
Having spent this afternoon scratching my head over one, I'd like to know what I've missed.
Take your standard website, with a block called '.sidebar'. You want this to have default styles (font size, headings etc).
Into .sidebar (and .main, and .some-other-region) you can drop components. I like to use BEM for component naming. This one has:
.box {} and .box__header {}
My issue: given <div class="sidebar"><div class="box"><h4 class="box__header">Header</h4></div></div> the styles on .sidebar h4 {} override those on .box__header.
<div class="sidebar"><div class="box"><h4>Header</h4></div></div> will produce red text.
<div class="sidebar"><div class="box"><h4 class="box__header">Header</h4></div></div> will produce green text.
Both will have the 20px font-size.
It all depends on how you plan out the HTML structure and CSS selectors.
EDIT: I would also say if you are placing HTML like this into the page in several places, then the CSS for it should be self-contained and totally separated fron the rest of the page. I would be reluctant to use default CSS on a container such as that. But I can see it would depend on the nature of the container.
Perhaps I misunderstand BEM, but
.box .box__header {}
seems to be against the spirit of it -- my understanding is that this naming convention exists to prevent needing to nest style rules?
I agree with your edit; global styles are probably not the best here, however tempting they may be to reduce wrapper markup and make everything simpler (to begin with)
BEM would work in this case. It's just that I wouldn't use .sidebar as the starting container for the related elements, it would be .box instead.
In this example .sidebar just happens to be the container to hold other elements being placed into it. I would make .box be the actual true container of the widget I am placing inside whatever container happens to need it. My CSS would be built so that .box is the foundation and it could exist anywhere on the page.
Exactly. This comes from proper element definition and understanding pieces before they go onto the page to begin with. Planning out, using BEM, or OOCSS, or Atomic helps tremendously here.
I really wish that browsers could parse nested CSS like we do with SASS and LESS so that we can move on from this type of stuff.
Loading CSS on demand I can get behind because it makes sense. But there's no reason to create these strange class name solutions to avoid collisions, which make it hard to use browser developer tools, when you can namespace now. Today. With vanilla CSS even.