A system called BEM has been invented to avoid the CSS selector mess which seems to be the rule more than the exception in many modern websites. The way that the system works is to view HTML content as components or modules. The idea has spread and exists in some variants like SUITCSS and OOCSS, but they share a simular way to write your CSS based on blocks of elements.

An example the Media block

A media block is used often to illustrate a typical block of content, a pattern you could also call it.

In traditional CSS you could write something like this:

.media {...} /* The wrapper */
.media h2 {...} /* header */
.media img {...} /* image */
.media p {...} /* text */

Now in a BEM style that would could be written like this:

.media {...} /* The wrapper */
.media-header {...} /* header */
.media-image {...} /* image */
.media-text {...} /* text */

The question: x-tags would it work?

The whole explanation of why BEM style is better I will not give you, however I want to ask:

If we had custom elements would this CSS class based structuring really be necessary?

At the time of writing Custom Elements are not well supported, only the blink folks (Chrome and Opera) really supports them, according to can I use: can I use

However x-tags seems to have more support. The browser seems to somehow accept tags/element prefixed with x- as more valid tags. Take a look at this pen:

I created the same markup using a ha tag and a x-ha tag. As you can see the browser fails to reconize the ha tag as a HTMLElement. The x-ha tag however is a fully accepted HTMLElement (DOM object).

We could then skip the extra class attribute?

If the browser accepts the x-ha as a valid element, which can be styled using CSS and is a full blown valid DOM element, why not use it?

We could (for now) use x-tag based styling:

x-media {...} /* The wrapper */
x-media-header {...} /* header */
x-media-image {...} /* image */
x-media-text {...} /* text */

and thereby save a lot of CSS classes!

You may ask something like this

But you have no ensured structure, you could use the x-media-header anywhere!

Well, yes - but that goes for the BEM CSS class naming convention too?

A x-tag example

The x-tag project actually also has a javascript polyfill which I have tried to use in this x-clock example also found on the project frontpage. It is, a clock which can be inserted simply by adding the x-clock tag, the x-clock code and the polyfill:

Likely to be many arguments against this x-tag approach

I would prefer to start using true custom elements, with all of its great related pieces of gold. Like shadow dom and other, but for now I will not. I however am a bit confused by the above thoughts. So please comment and share your thoughts, thanks :-)


1,602 4 9