0

我一直在考虑 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 和基于浮动的网格不一样，这里的重点是它们使 layouts基于属性而不是基于类，从而使类中的样式声明仅用于该项目的特定样式。我已经听过一千次“引导程序与语义相反”的论点，我相信这是为了提供易于实现的感觉而不是非语义的。

根据这个概念，理论上我们可以用 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+ 中有效，并且还遵循在标记中制作样式仅与样式相关的主题。这里的缺点是它使用属性选择器，它比类慢（稍微但仍然）。

我的问题：

  • 这确实是一种更语义化的布局方法吗？
  • 语义化是否值得（尽管很小）CSS 性能成本？

我意识到这可能是在深入研究意见，但考虑到这是某些事物的方向（比如 Angular Material，甚至在某种程度上是 Web 组件），我认为这也是一个有效的实践问题。如果您不这么认为并且它应该属于另一个 StackExchange 站点，请告诉我并很乐意移动它。

4

0 回答 0