Stylable

在 Wix，我们深以为然。我们热爱 CSS。它语法简洁、声明式，原生支持浏览器，是为网页和网页应用添加样式的最快方式。但当编写作用于单个组件的 CSS 时，开发者必须维护高度特定的选择器，并使用复杂的命名约定来模拟命名空间。在大型团队和项目中编写和维护 CSS 变得十分棘手。

我们希望扩展 CSS，使其在组件化生态中更易使用，同时不丢失 CSS 的核心优势：声明式、熟悉、静态且高效。因此我们创造了 Stylable。

Stylable 是一个预处理器，允许你以 CSS 语法编写样式规则，并加入一些我们认为符合 CSS 精神的扩展功能。

那么，Stylable 能做什么？

Stylable 让你能够构建可复用、高性能的组件。每个组件都暴露一个风格 API，映射其内部结构，使你在跨团队复用组件时仍能保持可定制性。

将样式作用域限定在组件内，防止样式“泄漏”或与其他样式冲突。

支持自定义伪类和伪元素，抽象组件内部结构，从而可在外部进行样式设置。例如，你可以样式化按钮内的标签，或从组件外部样式化视频播放器的播放按钮。

通过主题机制，你可以在整个 Web 应用中应用不同的外观风格，例如同一个组件可根据页面需求使用 Wix 主题或 Bootstrap 主题。

在构建时，预处理器会将 Stylable CSS 转换为扁平、静态、标准的原生 CSS，兼容所有浏览器。

致敬 CSS，欢迎 Stylable。希望你喜欢。