QQ登录

只需要一步,快速开始

APP扫码登录

只需要一步,快速开始

手机号码,快捷登录

手机号码,快捷登录

查看: 637|回复: 0

[HTML/CSS/JS] Facebook开源StyleX ,在JavaScript中写CSS

[复制链接]

等级头衔

积分成就    金币 : 2851
   泡泡 : 1516
   精华 : 6
   在线时间 : 1301 小时
   最后登录 : 2024-12-4

丰功伟绩

优秀达人突出贡献荣誉管理论坛元老活跃会员

联系方式
发表于 2023-12-20 09:55:55 | 显示全部楼层 |阅读模式
Meta(原 Facebook)开源了全新的 CSS-in-JS 库 StyleX。官方介绍道,StyleX 是一个富有表现力、具有确定性、可靠且可扩展的样式系统。它通过使用编译时 (compile-time) 工具融合了静态 CSS 的性能和可扩展性。
, w& l$ E# i/ w; G此外,StyleX 不仅仅是一个基于编译器的 CSS-in-JS 库,它经过精心设计,可以满足大型应用程序、可复用组件库和静态类型代码库的要求。Meta 旗下多款产品如 Facebook、WhatsApp、Instagram、Workplace、Threads 等都在使用 StyleX 作为其 CSS 样式解决方案。
2 P; d# H+ ~/ h) g' k8 \* c9 j 1.jpg 1 H/ F8 Y. p0 A
GitHub 地址:https://github.com/facebook/stylex9 i. w0 c% o0 i& e2 A  v1 c
StyleX 主要特性0 U  H% p: `6 C/ W8 V
  • 快速:StyleX 在编译时和运行时都具备高效的性能。Babel 转换不会对构建过程产生显著影响。在运行时,StyleX 避免了使用 JavaScript 插入样式的开销,并仅在必要时高效地组合类名字符串。生成的 CSS 经过优化,确保即使是大型网站的样式也能被浏览器快速解析。
  • 可扩展:StyleX 旨在适应像 Meta 这样的超大型代码库。通过原子构建和文件级缓存,Babel 插件能够处理数万个组件在编译时的样式处理。由于 StyleX 设计为封装样式,它允许在隔离环境中开发新组件,并期望一旦在其他组件中使用时能够可预测地呈现。
  • 可预测性:StyleX 会自动管理 CSS 选择器的特异性,以确保生成的规则之间不会发生冲突。它为开发人员提供了一个可靠地应用样式的系统,并确保 “最后应用的样式始终生效”。
  • 类型安全:使用 TypeScript 或 Flow 类型来约束组件接受的样式,每个样式属性和变量都具有完全的类型定义。这有助于提高代码的可读性和可维护性,同时减少潜在的错误和冲突。
  • 样式去重:StyleX 鼓励在同一文件中编写样式和组件。这种方法有助于使样式在长期内更具可读性和可维护性。StyleX 能够利用静态分析和构建时工具来跨组件去重样式,并删除未使用的样式。
  • 可测试性:StyleX 可以配置为输出调试类名,而不是功能性的原子类名。这可以用于生成快照,以便在对设计进行轻微更改时不会经常变化。通过这种方式,开发人员可以更轻松地测试和验证样式的正确性,从而提高开发效率和产品质量。( [/ b* ^( X$ _
示例代码
' c; w0 e; c' ~* w
import stylex from '@stylexjs/stylex';

const styles = stylex.create({
  root: {
    padding: 10,
  },
  element: {
    backgroundColor: 'red',
  },
});

const styleProps = stylex.apply(styles.root, styles.element);
下面是一个按钮组件的示例代码
* |$ p$ h1 \! k. K
import * as stylex from "@stylexjs/stylex";

const styles = stylex.create({
  base: {
    appearance: "none",
    borderWidth: 0,
    borderStyle: "none",
    backgroundColor: "blue",
    color: "white",
    borderRadius: 4,
    paddingBlock: 4,
    paddingInline: 8,
  },
});

export default function Button({
  onClick,
  children,
}: Readonly<{
  onClick: () => void;
  children: React.ReactNode;
}>) {
  return (
    <button {...stylex.props(styles.base)} onClick={onClick}>
      {children}
    </button>
  );
}
相关链接:https://stylexjs.com/blog/introducing-stylex/
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|手机版|小黑屋|paopaomj.COM ( 渝ICP备18007172号|渝公网安备50010502503914号 )

GMT+8, 2024-12-4 04:24

Powered by paopaomj X3.5 © 2016-2025 sitemap

快速回复 返回顶部 返回列表