3 ms·
If you have say a post entry: .post { border: 1px solid #000; } .post .title { font-weight: bold; } And you want to put it into a sidebar
by mikewhy 11y ago
If you have say a post entry:
.post {
border: 1px solid #000;
}
.post .title {
font-weight: bold;
}
And you want to put it into a sidebar
.sidebar {
background-color: #ccc;
}
.sidebar .title {
text-decoration: underline;
}
That post's title is now going to be underlined. That's one of the reasons
for namespacing. If the classes were `.post--title` and `.sidebar--title`, this
would be avoided
- austinlyons 11y agoWouldn't you just instead write the CSS as follows? .sidebar.title { text-decoration: underline; }
- talmand 11y agoThat likely wouldn't have the intended effect as I find it doubtful that the element with the sidebar class would also be the title.
- lstamour 11y agoWell, you could also write .sidebar > .title to be more specific than simply all .title elements in .sidebar, but the point is to not tie your CSS quite so closely to the HTML hierarchy I suppose.
- talmand 11y agoI had an explanation as to why your CSS was wrong but then I realized an HTML example is needed. I'm assuming you mean something like this: <section class='content'> <div class='post'> <h1 class='title'></h1> </div> </section> <section class='sidebar'> <div class='post'> <h1 class='title'></h1> </div> </section> If so, what you say would indeed happen. Also, I've never thought of .post--title as a form of namespacing. I always understood it to be more like .post .title, as in nesting with SCSS or Less. Not saying you're wrong, just never thought of it that way.
- armandososa 11y agoI've found that these cases are non-issues when you use something like BEM. The downside is that the HTML then becomes horrible to look at: <div class='sidebar'> <div class='sidebar__post'> <h2 class='sidebar__post__title'> Please kill me </h2> </div> </div> So… you have to chose between unmaintainable CSS or weird HTML. I think that, in the end, something like this is the only sane outcome: https://medium.com/seek-ui-engineering/the-end-of-global-css-90d2a4a06284 https://medium.com/seek-ui-engineering/the-end-of-global-css...
- mikewhy 11y agoI probably wouldn't go so far as to use `sidebar__post__title `, just `sidebar--title` and `post--title`. That way if you want to style a post title in the sidebar, it's clearly `.sidebar .post--title` using something like BEM solves a lot of problems. Silly collisions and searchability are my big takeaways.
- jt2190 11y agoIf not underlining post titles is so important, than the CSS rule should make that explicit: .post .title { font-weight: bold; text-decoration: none; } Leaving text-decoration out of the rule is basically saying: "I defer to my ancestor rules for advice on styling this, and I accept their decision."
- mikewhy 11y agoIt's not just that the post titles shouldn't be underlined, it's that one elements style should not creep into another elements style by accident
- marcosdumay 11y agoWell, the "all descendants" selector is explicitly intended to do that. It's a bit too far to call it "by accident". There's rarely a real use for the ".sidebar .title" construction.
- talmand 11y agoRarely? I would think the vast majority of websites would have a version of that in place in several ways.