CSS-in-JS已过时？——前端新思路不可错过！

前端

2024-01-09 15:06:07

CSS-in-JS 已死：拥抱前端新潮流

前端开发领域瞬息万变，昔日流行的技术如今可能已成明日黄花。曾经风靡一时的 CSS-in-JS 正饱受诟病，因此是时候拥抱新的前端思路了。

CSS-in-JS 的弊端

CSS-in-JS 将样式编写嵌入 JavaScript 代码中，尽管这在早期带来了灵活性，但如今其缺陷也逐渐显现：

性能瓶颈： CSS-in-JS 在运行时生成样式，这可能会拖累大型项目的速度。
调试困难： 样式嵌入在 JavaScript 中，使得调试过程变得更加复杂。
维护成本高： 修改样式需要找到对应的 JavaScript 代码，这耗时费力。

CSS-in-JS 的替代方案

为了规避这些问题，我们可以探索以下替代方案：

CSS 预处理： CSS 预处理在编译时将 CSS 代码转换为标准 CSS，提高可维护性和复用性。
CSS 模块： CSS 模块将样式封装成模块，实现复用和隔离，提升可维护性。
SASS、LESS、Stylus： 这些流行的 CSS 预处理语言提供变量、混入、继承等功能，简化 CSS 开发。

前端开发新潮流

CSS-in-JS 的没落并非前端发展的终点，新的潮流正在涌现，值得关注：

WebAssembly： WebAssembly 在浏览器中高效运行编译代码，拓展了前端的可能性。
GraphQL： GraphQL 是一种灵活的数据查询语言，简化后端数据获取。
微前端： 微前端将单体前端应用程序拆分成独立模块，提升可维护性和灵活性。

代码示例

CSS 预处理（SASS）：

$primary-color: #ff0000;

.button {
  color: $primary-color;
  background-color: darken($primary-color, 10%);
}

CSS 模块：

.button {
  --primary-color: #ff0000;
  color: var(--primary-color);
  background-color: darken(var(--primary-color), 10%);
}

微前端（Module Federation）：

// 主应用程序
import { ModuleFederationPlugin } from 'webpack';

module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      remotes: {
        button: 'button@http://localhost:3001/remoteEntry.js',
      },
    }),
  ],
};

// 按钮模块
import { loadRemoteModule } from '@angular-architects/module-federation';

loadRemoteModule({
  remoteEntry: 'http://localhost:3000/remoteEntry.js',
  remoteName: 'button',
  exposedModule: './ButtonModule',
}).then(({ ButtonModule }) => {
  // 使用按钮模块
  const button = new ButtonModule.Button();
  button.render();
});