Question

我一直在考虑Angular Material使用的布局系统，其中（通过使用指令）它们应用了创建布局的简单属性：

<div layout="row">
    <div flex>One</div>
    <div flex>Two</div>
    <div flex>Three</div>
</div>

除了更清洁之外，他们认为这是一个更加语义的描述你在标记中所做的事情，而不像Bootstrap方式那样只应用了一堆类：

<div class="row">
    <div class="col-xs-4">One</div>
    <div class="col-xs-4">Two</div>
    <div class="col-xs-4">Three</div>
</div>

是的，我知道flexbox和基于浮动的网格不一样，这里的重点是他们正在制作基于属性的布局，而不是基于 class 的布局，在课堂上留下样式声明，专门用于该项目的特定风格。我听过“Bootstrap与语义相反”的论点一千次，我相信这是为了提供易于实现的感觉而不是非语义的。

借助这个概念，我们理论上可以做一些与CSS非常相似的事情：

<div data-row>
    <div data-col-xs="4">One</div>
    <div data-col-xs="4">Two</div>
    <div data-col-xs="4">Three</div>
</div>

或者你可以做data-flex，无论你的船是什么漂浮。点是这些属性是有效的HTML，适用于IE7 +，并且还遵循使标记中的样式仅与样式相关的主题。这里的缺点是它使用属性选择器，它比类慢（稍微但仍然）。

我的问题：

我意识到这可能正在深入研究意见，但考虑到这是某些事情的方向（如Angular Material，甚至Web Components），我认为这也是一个有效的实践问题。如果你不这么认为它应该属于另一个StackExchange网站，请告诉我并高兴地移动它。