Hacker News Reader

Comment by matthewbauer | Hacker News Reader

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

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

Wouldn't you just instead write the CSS as follows?

  .sidebar.title {
    text-decoration: underline;
  }

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.

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.

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.

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...

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.

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."

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

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.

Rarely? I would think the vast majority of websites would have a version of that in place in several ways.

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 -- 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

Reply on news.ycombinator.com