一、 Vertical Rhythm(垂直节奏)是什么？有什么优点？
（1）含义：
垂直节奏是一种网页排版的方法,它可以创建视觉上平衡且协调的布局。使页面上元素之间的空格彼此保持一致。垂直节奏是在基线的帮助下创建或维持的，用于创建一致空间的共同点。基线（由网格提供）是通常用于创建一致间距的公分母。也就是说：在页面上布置文本块和可能的其他内容块时，文本的边距，填充，边框，行高不应该是随机的。
（2）Vertical Rhythm的原则是:
(a) 基线网格(Baseline Grid):网页的一切元素都应该挂载在基线网格上,形成垂直的节奏感。
(b) 一致的行高(Line Height):文本行高保持一致的节奏。
(c) 垂直间距一致:页面元素的垂直间距倍数保持一致。
（3）使用Vertical Rhythm的好处:
(a) 提高可读性和界面美观性:提高用户体验，布局和谐美观,浏览感知流畅。视觉节奏感强，布局视觉协调统一。
(b) 强调内容的层次:通过变化行高和间距突出层次。
(c) 提高垂直方向空间的利用率。
(d) 便于维护:有一定的规范可依循。
(e) 对响应式布局友好:可以根据不同设备调整字体大小和行高。
综上，Vertical Rhythm使布局更富有韵律感，是提高网页可读性和美观的简单有效方法，值得在实际项目中应用。但要注意不要为了节奏感而牺牲内容的可读性。
二、CSS-in-JS是什么？有什么优缺点？
（1）含义：
CSS-in-JS 是CSS-in-JS是一个外部功能层，允许通过JavaScript为组件编写CSS属性，它将 CSS 模型抽象到组件级别，而不是文档级别。这个想法是，CSS的范围可以限定为特定组件 - 并且仅限于该组件 - 只要这些特定样式不会与其他组件共享或泄露给其他组件，并且仅在需要时调用。
（2）CSS-in-JS的缺点：
最大的缺点渲染阻塞——直接影响用户体验。CSS-in-JS的明显缺点是它引入了运行时：样式需要通过JavaScript加载，解析和执行。CSS-in-JS库的作者正在添加各种智能优化，如Babel插件，但仍然存在一些运行时成本。
(a) 延迟渲染：CSS-in-JS将执行JavaScript来解析来自JavaScript组件的CSS，然后将这些解析的样式注入DOM中。组件越多，浏览器进行第一次绘制所花费的时间就越多。
(b) 缓存问题：CSS 缓存通常用于缩短连续的页面加载时间。由于使用 CSS-in-JS 时不涉及 CSS 文件，因此缓存是一个大问题。此外，动态生成的 CSS 类名使此问题更加复杂。
(c) 不支持 CSS 预处理器：使用常规的组件化CSS方法，很容易添加对SASS等预处理器的支持。对于 CSS-in-JS，这是不可能的。
(d) 凌乱的DOM、库依赖关系、没有广泛的支持，大多数UI和组件库目前不支持CSS-in-JS方法，因为它仍然有很多问题需要解决。
（3）CSS-in-JS的优点：
JavaScript开发人员可能更喜欢使用CSS-in-JS进行样式设置，而不是通过CSS类。CSS-in-JS方法解决的最大问题是全局范围。它还具有其他一些优点，如果是JavaScript开发人员，则这些优点非常有意义：
(a) 没有范围界定和特异性问题：由于样式在本地范围内可用，因此它们不容易与其他组件的样式发生冲突。您甚至不必担心严格命名以避免样 式冲突。样式是专门为一个组件编写的，没有预置子选择器，因此特异性问题很少见。
(b) 动态样式：条件CSS是CSS-in-JS的另一个亮点。
(c) 较低的 CSS 特异性：CSS-in-JS 可以帮助您将 CSS 声明的特殊性保持在最低水平，因为您唯一使用它的样式就是元素本身。这同样适用于创建组件变体，您可以在其中检查 prop 对象值并在需要时添加动态样式。
(d) 轻松主题化、无痛维护：CSS-in-JS允许你完全用JavaScript编写主题逻辑。使用样式化组件包装器，您可以快速对组件的主题进行颜色编码。
三、CSS模块是什么？有什么优缺点？
（1）含义：
CSS 模块是一个 CSS 文件，其中所有属性在呈现的 CSS 中默认在本地限定范围。JavaScript 进一步处理 CSS 模块文件并封装它们的样式声明以解决范围问题。CSS模块是构建步骤中的一个过程（在 Webpack 或 Browserify 的帮助下）其中所有类名和动画默认都在本地限定范围。它们看起来很像常规的CSS，但我们使用它们的方式却大不相同。它们作为对象导入到 JavaScript 中，其中键对应于创作的类名，值是为我们自动生成的唯一类名，将范围限制在组件中。
（2）CSS模块的缺点：
(a) 非标准属性(global)：在全局范围内定位选择器时，必须使用该规则。这不是CSS规范的一部分，但JavaScript使用它来标记全局样式。
(b) 无动态样式：使用 CSS 模块，所有声明都进入单独的 CSS 文件。因此，不可能实现像 CSS-in-JS 这样的动态样式，因为我们无法在 CSS 文件中实现任何 JavaScript。
(c) 外部 CSS 文件：不能省略组件中带有 CSS 模块的 CSS 文件的用法。使用 CSS 模块的唯一可能方法是维护和导入外部 CSS 文件。
(d) 打字稿限制：要将 CSS 模块与 TypeScript 一起使用，您必须在文件中添加模块定义或使用 webpack 加载器：index.d.ts。
（3）CSS模块的优点：
CSS 模块提供的最显着的好处是消除了对 CSS-in-JS 的依赖，以解决范围和特异性问题。如果我们可以通过保持CSS尽可能传统来解决范围特异性问题，那么CSS-in-JS将比必要的工作更多：
(a) 没有范围界定和特异性问题：CSS 模块成功地解决了传统、旧式 CSS 的作用域问题。由于规则是松散地编写在CSS模块文件中的，因此很少观察到任何特异性问题。
(b) 有组织的代码：保留单独的 CSS 文件似乎是一个限制。但是，这种方法实际上促进了更好的组织。
(c) 缓存可能性：浏览器可以缓存使用最终构建生成的缩小的CSS文件，以改善连续的页面加载时间。
(d) 云服务器预处理：添加对CSS预处理器（如PostCSS，SASS，Less等）的支持很容易。但是，您必须依靠其他软件包来执行此操作。
(e) 零学习曲线和内置支持。
四、shadow dom样式是什么？如何使用？
（1）含义：
Web 组件的一个重要方面是封装。能够隐藏标记结构、样式和行为，并与页面上的其他代码分开，以便不同的部分不会发生冲突，并且代码可以保持美观和干净。Shadow DOM API 是其中的关键部分，它提供了一种将隐藏的分离 DOM 附加到元素的方法。
（2）基本用法：
可以使用 Element.attachShadow() 方法将阴影根附加到任何元素。这将一个选项对象作为其参数，该对象包含一个选项— — ，其值为：mode、open、closed.
```
const shadowOpen = elementRef.attachShadow({ mode: "open" });
const shadowClosed = elementRef.attachShadow({ mode: "closed" });
```
open意味着您可以使用在主页上下文中编写的JavaScript访问shadowDOM，例如使用Element.shadowRoot属性：
```
const myShadowDom = myCustomElem.shadowRoot;
```
如果要将Shadow DOM 作为其构造函数的一部分附加到自定义元素（到目前为止Shadow DOM 最有用的应用程序），则可以使用如下所示的内容：
```
const shadow = this.attachShadow({ mode: "open" });
```
将影子 DOM 附加到元素时，只需使用与常规 DOM 操作相同的 DOM API 即可对其进行操作：
```
const para = document.createElement("p");
shadow.appendChild(para);
```