我的最佳实践：CSS

1. 前言

如今 CSS 远远没有被充分利用。Angular/React/Vue/... 开发者和 UI 设计师之间隔着一道鸿沟。

UI 设计师嵌套了三十层 <div>，上面挂着四十个 CSS 类；而 Angular 开发者每隔两周就为最新的库兴奋不已，可他的依赖地狱早就离了 npm i --force 就构建不起来了，因为各个 peer dependency 互相冲突。这位 TypeScript 狂热者对 CSS 和 HTML 没什么兴趣。哪怕是最简单的输入框，他也非得用 Material，因为他担心不用的话就搞不定校验。更何况谁也不想把时间浪费在重新发明轮子上。可他没有意识到：一旦遇到第一个库无法满足的需求，省下的时间就会全部赔进去，最后发现自己正在翻这个库的 GitHub issues。

在全栈项目里做开发，很少有机会施展自己作为前端设计师的本事。你拿到 Figma 里的界面原型，就得原样实现。这类前端开发者大多根本没意识到，只用一行 CSS 就能做出响应式布局。CSS 比以往任何时候都更强大。JS 样式 hack、成堆的 media query 和 IE 8 兼容方案的时代已经过去了。万岁！

2. 完美居中

面试时并不总是讨喜，但我自己乐在其中：每当被问到前端水平如何，我都喜欢回答：“噢，当然。我能把一个 <div> 垂直居中。”

让一个 div 居中，向来是出了名的难。

现在不再是了：

.parent {
    display: grid;
    place-items: center
}

3. 响应式网格

.parent {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

4. 响应式 Flex 布局

.parent {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.box {
    flex: 1 1 150px; /*  Stretching: */
    flex: 0 1 150px; /*  No stretching: */
    margin: 5px;
}

5. 页面布局

.parent {
    display: grid;
    grid-template-rows: auto 1fr auto;
}

6. 侧边栏

.parent {
    display: grid;
    grid-template-columns: minmax(150px, 25%) 1fr;
}

7. 致谢

1-Line Layouts