2020 年样式方法比较

在 Smashing 上，Adebiyi Adedotun Lukman 涵盖了所有这些样式方法。 它是在 Next.js 的背景下，这在某种程度上很重要，因为 Next.js 有一些特定的方式可以让你使用这些工具，它是 React 并且因此是一个基于组件的架构。 但是，所讨论的样式方法超出了 Next.js，可以广泛应用于许多网站。

以下是我对当今样式可能性整个目录的看法。

• 常规 CSS。 如果可以，请使用。没有构建工具是令人耳目一新的。它将经久耐用。我唯一真正想念的没有其他工具的是在选择器块中嵌套媒体查询。
• Sass。 Sass 已经存在很长时间了，并且仍然是一个非常流行的 CSS 预处理器。Sass 被内置到许多其他工具中，因此选择 Sass 并不总是意味着相同的事情。简单的 Sass 集成可能与 sass --watch src/style.scss dist/style.css npm 脚本一样容易。然后，一旦你接受了你有构建过程的事实，你就可以开始连接文件、缩小文件、清除缓存以及所有这些你可能最终会以某种方式完成的步骤。
• Less & Stylus。 我很惊讶它们没有更受欢迎，因为它们一直都是 Node 并且非常适合 Node 支持的构建过程的激增。更不用说它们是不错的功能丰富的预处理器了。我并不反对两者，但 Sass 更普遍、更积极地开发，并且规范 Sass 现在可以在 Node-land 中正常工作。
• PostCSS。我并不被 PostCSS 所吸引，因为我不喜欢必须拼凑我想要的处理功能。这也具有负面影响，即在不同项目中编写 CSS 的过程不同。此外，我不喜欢预处理掉现代功能的想法，其中一些功能实际上是无法预处理的（例如，自定义属性无法预处理）。但是我确实喜欢 Autoprefixer，当我们真的需要它的时候，它是基于 PostCSS 构建的。
• CSS 模块。（基于 PostCSS）。如果您正在使用任何技术中的组件，CSS 模块使您能够将 CSS 范围限定到该组件，这是一个非常棒的想法。我喜欢这种方法，无论我在哪里都能得到它。您的模块 CSS 也可以是 Sass，因此我们可以在那里获得两全其美。
• CSS-in-JS。 事实上，这意味着“CSS-in-React”。如果您正在编写 Vue，您正在编写样式 Vue 帮助您 的方式。 相同 与 Svelte。 相同 与 Angular。React 是不固执己见的，让你可以选择 styled-components、styled-jsx、Emotion 之类的东西……有很多很多。我在 React 中有项目，我使用 Sass+CSS Modules 并且认为这很好，但很多人也喜欢 CSS-in-JS 方法。我理解。您会自动获得范围，并且可以做一些花哨的事情，例如将道具合并到样式决策中。对于设计系统来说可能很棒。
• 全部采用实用程序样式：巨大优势：CSS 文件小，样式一致且灵活。巨大缺点：您的标记中混合了无数个类，这使得阅读和重构变得很麻烦。我不被它吸引，但我理解，这些优点确实会击中一些人。

如果您想听听其他关于此范围的看法，Syntax FM 的人最近对此发表了评论s。