Theoretical improvement of "class" and "id" in html

[tomtom]

I was just thinking …

in HTML, classes and IDs are assigned with tag attributes:

<div id="foo">...
or
<div class="bar">...

In CSS they are referred with div.foo and div#bar

This is no matching syntax …
how nice would it be if we could write this in html instead:
<div.foo>… or <div#bar>… or <div.foo.fooo#bar>…

it would be shorter and more consistent declaration of classes and IDs, separating them from other, more specific tag attributes.
Also, browsers may be able to parse this faster into DOM and assign styles than looking for tag id and class attributes further down the string …

This would require browser support of course, and standardization and some fallback solutions, and it’s unlikely to happen … just wanted to drop the idea and get some feedback. Maybe someone knows if this idea is “new” or came up before.

[Chris Coyier]

That’s a neat idea! I’ve never thought of that or seen it proposed. I don’t know enough about language design to know how it would play out in reality, but it certainly seems to tie the two languages together cleverly at first glance.

[Frenchness]

That would indeed be neat! It would make things more consistent and easier to look up. I look forward to this idea being picked up :)

[mmcgu1966]

IIRC, you can have a dot in a class or ID name, so that could prove interesting if you had an element with id=”.madness”.. would it look like this: “<div#.madness”> or if it was class=”.madness” it would be “<div..madness”>

[nkrisc]

A cool idea, but I think it just makes it harder to read. Though I guess if you could put spaces between it’d be OK.

[josh]

@mmcgu1966, You are correct; this is from the W3C spec: “In CSS, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [a-zA-Z0-9] and ISO 10646 characters U+00A0 and higher, plus the hyphen (-) and the underscore (_); they cannot start with a digit, two hyphens, or a hyphen followed by a digit.”

http://www.w3.org/TR/CSS21/syndata.html#characters

[Paulie_D]

Here’s my problem

<div.foo.fooo>

Does this have one classs .foo.fooo or two (.foo & .fooo)?

[Frenchness]

Ai…
I see what you mean. It could be considered as both. Problem, yes :) We could agree only one dot would be allowed? And that further classes would have to be written separately, such as

<div.foo fooo>

But then again, this all complicates the matter. I prefer to keep things simple. But it was a nice idea :)

[Bert]

Love this idea. To overcome the mentioned problem by Paulie_D why not use this:

<

div>
in stead of:

<

div>
(separation by spaces)

[Bert]

Love this idea. To overcome the mentioned problem by Paulie_D why not use this:
http://codepen.io/anon/pen/kXpoGY
in stead of:
http://codepen.io/anon/pen/JKkyAE
(separation by spaces)

[Bert]

Ok i give up… Sorry.

[Frenchness]

You could post it in between three backquotes maybe? :D

[Frenchness]

Actually my code did not go well either :D

[tomtom]

Thanks for the thougts, its interesting to read approvals and caveats, even if implementation is unlikely anyway.

I didn’t realize that class and ID names can contain . and they have to be escaped with a backslash in css to be different from referring to
id="foo" class="bar" or class="fo baar"

learnt something new, even if it’s rather strange to me this is even possible … well, html was there before css i guess.

So if this was done, it may have to be like
<div #lama .foo .bar> to work, leaving css syntax again,
or forbid the . in classes and IDs in html …

[Author]

Posts