网格布局（Grid）是最强大的 CSS 布局方案。 它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。以前，只能通过复杂的 CSS 框架达到的效果，现在浏览器内置了。

前言 移动端web项目越来越多，设计师对UI要求越来越高，比如1px的边框。在高清屏下，移动端的1px会变粗。 比如下面： 产生的原因 为什么会产生这个问题，主要是跟DPR（devicePixelRa

在 GPU 渲染的过程中，一些元素会因为符合了某些规则，而被提升为独立的层（黄色边框部分），一旦独立出来，就不会影响其它 DOM 的布局，所以我们可以利用这些规则，将经常变换的 DOM 主动提升到独立的层，那么在浏览器的一帧运行中，就可以减少 Layout 和 Paint 的时间

日常的开发模式 存在以下痛点。 对于这个问题，也有一些方案。 style 标签的 scoped 指令定义作用域，通过编译为该作用域所有标签生成唯一的属性。如图： 但是 react 并未给我们实现，我们可能会能通过其它方案来实现，如：约定 css class 命名规范(命名空间)…