[Day 27] 所以说那个手机版

Grid 还是 Flex

我们回归到行动装置本身，究竟我们在前端设计的时候，要采用 Grid 还是 Flex 来制作所谓的手机版？

我认真说，如果你是 AWD 的话，用 Flex 就绰绰有余。

如果你是采用 RWD 的话，用 Grid 或许比较方便。

当然，这些事情没有一定的准则，不然你看看大家 Bootstrap 还不是用得很快乐，有人在意他到底是 Grid 还是 Flex 吗？

没有。你只在乎你自己。

回过头来看这几年样式表的发展，其实直到 Grid 的出现，好像大家才慢慢意识到所谓的「样式表」是真的拿来设计排版样式的。不然，在 Grid 出现之前，所谓的「排版」这件事情，可能有多数的结构设计，是在 HTML 里面完成，而不是像格线系统这样，可以在样式表中定义格线区块的位置、命名、顺序与结构。

当然，在 Flex 出现的时候，我们终於可以松一口气，不用再处理所谓的 .clearfix 这种事情，但，说句比较不中听的话，对於排版结构来说，Flex 也是这麽恰好的取代了 float 这件事情，然後多了一些比较炫炮的对齐效果这样。对於前端工程师而言，大抵上就是少处理了各种对齐所衍生出来的状况。

相较之下，格线系统的出现，明确的定义了排版相关的事情，虽然目前 subgrid 还在吵架当中，不过目前单就 Grid 的使用与适用面向来说，算是对於排版这件事情有相当明确的帮助。

结构语意

或许有的人会认为，格线系统这样摆在样式表里面，是不是有点捞过界？这一点我个人是乐见其成，毕竟规范样式结构这件事情，交给样式表去做也没什麽不好，况且，相较於放在 HTML 结构里完成，规则与弹性相对来说就没有格线系统那麽大。

那麽，关於结构语意这些事情，还是回到最一开始的初衷，从行动装置（手机版）出发，向上发展，基本上你不会因为复杂的 DOM 结构，而丧失了结构语意。只要你确认好文件的「流」，基本上我觉得这种出现大量 DOM 巢状结构，或是 DOM Tree 太深的事情不太容易发生。当然，写得好的前端工程师，即便不是 Grid 应该也不至於发生才是。

如果从行动装置为出发点来看，我们的 HTML 会相当简洁，

<header>
    <img />
    <nav>
        <ul>
            <li>
                <a href="#"></a>
            </li>
        </ul>
    </nav>
</header>
<main>
    <aside>
        <ul>
            <li>
                <a href="#"></a>
            </li>
        </ul>
    </aside>
    <section>
        <article>
            <h1></h1>
            <p></p>
        </article>
    </section>
</main>
<footer>
    <p>Copyright</p>
</footer>

基本上你就想，当我把所有样式表抽离的时候，这些结构在画面上「看起来」还会保持一定的可读性，且 DOM 结构明确，DOM Tree 也不至於太深（当然，这个范例太简单了，相对来说就没那麽复杂）。因此，即便你向上发展，基本上也只是更动样式表中，关於格线系统方面的设定，让他在画面上「呈现」出你想要的样子，而整个 HTML 基本上是不会有太大更动的。

我觉得这就是格线系统目前的「真意」。

1. 保持 DOM 结构语意。
2. 避免无意义增加 DOM Tree 深度。
3. 减低 HTML 更动幅度。
4. 无样式维持可读性。
5. 让「排版」回归样式表。

当然，你要否定我也可以，这并不是什麽真理，只是从 Grid 这样一路发展下来，确实是让排版这件事情回归到样式表本身，我个人是相当赞成的。

所以说那个手机版

还是刚刚那个裁决点，

• AWD 请用 Flex。
• RWD 可以考虑 Grid。
• 选择障碍请用 Tailwind CSS。
• 有历史包袱请用 Bootstrap。
• 支援 IE 请放弃。

Blog 同步刊登：[12th 铁人赛] 所以说那个手机版, Day 27