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?
When something new comes out, you have to make changes in your system anyway.
When you are going to change the layout significantly, in your example to Grid spec, you always will need to change a markup. Shouldn't flexboxes be used for different purpose not a whole page layout?
So writting a lot of <div class="flex"> when I need exactly a flexbox is a better approach? For page layout as I said you could use something like <grid> which you can easily control behing the scenes or you preffer to write and use a lot of another divs with grid-x classes when Grid spec will be implemented?