5 ms·

Most style guides say to use namespaces for everything. I've never used them. What do I have to be worried about?

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 ago
  Wouldn't you just instead write the CSS as follows? .sidebar.title { text-decoration: underline; }
  - talmand 11y ago
    That 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 ago
    Well, 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 ago
  I 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 ago
  I'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 ago
    I 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 ago
  If 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 ago
    It'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 ago
      Well, 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 ago
        Rarely? I would think the vast majority of websites would have a version of that in place in several ways.
lstamour 11y ago
If you use SCSS and group your CSS by, e.g. a class in the body tag and additional nesting for components, or if your component-specific styles are loaded only when necessary (e.g. HTTP/2) then not much. The purpose of these techniques, or of prefixing your class names, is to avoid naming collisions. E.g. is your list supposed to have bullets? If you just say ul { list-style: none; } you've effectively said all lists shouldn't. But you might later say the opposite and not notice until your stylesheets are all compiled together and it's a race to see which one wins on every page. Or the other example posted (above, since this comment was downvoted for unknown reasons) where you move HTML around and your stylesheets aren't in sync. Of course, prefixing isn't for everyone -- e.g. https://github.com/twbs/bootstrap/issues/1235 https://github.com/twbs/bootstrap/issues/1235 -- some argue you should know all the styles on your page and how they interact, even if using a "CSS framework" and so naming collisions is just one of the things you'll have to worry about -- if you namespace, what's to prevent a naming collision even with your namespaces? :) This is also where it might be useful to point to https://speakerdeck.com/vjeux/react-css-in-js https://speakerdeck.com/vjeux/react-css-in-js

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 ago
Wouldn't you just instead write the CSS as follows? .sidebar.title { text-decoration: underline; }
- talmand 11y ago
  That 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 ago
  Well, 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 ago
I 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 ago
I'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 ago
  I 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 ago
If 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 ago
  It'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 ago
    Well, 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 ago
      Rarely? I would think the vast majority of websites would have a version of that in place in several ways.

lstamour 11y ago

If you use SCSS and group your CSS by, e.g. a class in the body tag and additional nesting for components, or if your component-specific styles are loaded only when necessary (e.g. HTTP/2) then not much. The purpose of these techniques, or of prefixing your class names, is to avoid naming collisions. E.g. is your list supposed to have bullets? If you just say ul { list-style: none; } you've effectively said all lists shouldn't. But you might later say the opposite and not notice until your stylesheets are all compiled together and it's a race to see which one wins on every page. Or the other example posted (above, since this comment was downvoted for unknown reasons) where you move HTML around and your stylesheets aren't in sync. Of course, prefixing isn't for everyone -- e.g. https://github.com/twbs/bootstrap/issues/1235 https://github.com/twbs/bootstrap/issues/1235 -- some argue you should know all the styles on your page and how they interact, even if using a "CSS framework" and so naming collisions is just one of the things you'll have to worry about -- if you namespace, what's to prevent a naming collision even with your namespaces? :) This is also where it might be useful to point to https://speakerdeck.com/vjeux/react-css-in-js https://speakerdeck.com/vjeux/react-css-in-js