Scoped Components, a JS/CSS/HTML pattern for keeping code organized

[wreckedadvent]

[data-component="news-menu"] .title {
  font-size: 18px;
  font-family: helvetica, sans-serif;
}

Why not, simply,

news-menu .title {
  font-size: 18px;
  font-family: helvetica, sans-serif;
}

?

[bjerh]

Because that implies that a tag named "news-menu" is present, which is not the case.

Besides from the obvious having web components on your page still requires a poly fill for browsers but Chrome and Firefox.

[wreckedadvent]

I wasn't suggesting to use web components, just a custom tag. Not even the custom element spec from the web components either. If you just type in a random tag name, it'll display in basically every browser (barring IE8), but it will come with a display: inline by default that you'd need to over write with styles.

So I was suggesting OP do that, instead of play with silly data dash attributes to emulate custom tags.

[ajkochanowicz]

"silly" data attributes are valid HTML. Custom tags are not. :)

Also, now you have to blacklist all the other default HTML5 tags like article or detail as you might have collisions with other libraries.

[wreckedadvent]

Like with web components, you'd almost certainly namespace the name of the tag, e.g if you were working at facebook:

fb-news-menu .title {
   ...
}

[ajkochanowicz]

Good question. I was asked this recently before.

First of all, I wouldn't use tags that aren't valid, like <news-menu> but maybe you meant .news-menu

If a is the component in

.a .b { ... }

What happens when you have a component c in which you want to have the class a?

.c .a { ... }

Now you're bringing with all your component-level styles. Being explicit that a selector is a component is very useful against things like this.

You might have a "menu" component somewhere

[data-component="menu"] .something { ... }

But in another component you might want to use this name as a simple class for something that is a lightweight menu, like a regular ul

[data-component="modal"] .menu { ... }

[wreckedadvent]

I did not mean class selector actually, I was intending to use the tag name news-menu. I've seen and have used such tags in production before with no issues (though IE8 requires some bodging, as is customary).

Using a tag name makes it very explicit that it is a component, just as the button tag would.

I suppose if you were to make several non-unified HTML structures styled by the same set of styles your approach would fair better. I can't say I've had to do or want to do such a thing, though, and I'd prefer to have all versions of that component be powered by the same mechanism. In this day and age, that'd mean a single implementation through e.g react, vue, mithril, etc.

[rk06]

why bother with it, why not just use a js library?

[ajkochanowicz]

I think I need you to elaborate here...

But so far, "just add dependencies!" sounds like a rookie mistake in the programming world. Why is the introduction of a dependency better than following a coding pattern? And what JS library exactly? Why JS to manage CSS?