In CSS for years we were using classes for both layout/document structure and visual element styling itself. Later new HTML tags like header, footer was added. What's next?
Today I found for myself an interesting HTML+CSS API and using it more. Short example:
<flex type="column">
<flexitem order="5">
...
</flexitem>
...
</flex>
CSS:
flex {
display: flex;
}
flex[type="column"] {
flex-direction: column;
}
flexitem[order="5"] {
order: 5;
}
...
It also would be very useful if we could use attr() not only for content but:
flexitem[order] {
order: attr(order)
}
Now I have semantics and document structure separated from visual styling and using classes only for colors, borders, sizes and other decorations.
I also have custom small CSS responsive <grid> framework. No more <div class="col-x-y col-q-w col-whatever-else ...">
What do you think about this approach?