Share CSS Style Rules

同学们，今天我们来聊聊一个在Lightning Web Components里非常实用的小技巧——怎么通过一个纯CSS的模块，来共享样式。 想象一下，你有很多组件，都需要用到同一套颜色、字体或者间距。要是每个组件都把样式复制一份，不仅麻烦，以后想改一个颜色，还得满世界去找，容易出错。这时候，我们就可以创建一个“样式库”组件。这个组件很特别，它里面只有一个CSS文件，还有一个配置文件，也就是我们常说的 `.js-meta.xml`，完全不需要HTML或者JavaScript文件。这样，它本身就是个轻量级的样式包，专门用来给别人提供样式。 那么别的组件怎么用它的样式呢？很简单，在你自己组件的CSS文件里，用一句 `@import 'namespace/moduleName'` 就可以导入。这里的 `namespace` 是命名空间，比如我们自定义组件常用的 `c`，而 `moduleName` 就是你给那个样式库组件起的名字。好比我们有一个组件叫 `c/sharedStyles`，那在你的CSS里就这么写：`@import 'c/sharedStyles';` 一下子，那个样式库里的所有样式就都进来了。 这里要注意一个限制：在标准的Lightning平台环境里，你只能在 `c` 和 `lightning` 这两个命名空间里去找样式模块。`c` 是咱们自己开发的命名空间，`lightning` 是系统自带的标准组件命名空间。但是，如果你使用了Lightning Web Security，也就是LWS，那么这个限制就放开了，你可以导入任何命名空间下的CSS模块，更灵活了。 还有一个小细节要记住，这个 `@import` 不支持媒体查询。也就是说你不能写 `@import 'c/sharedStyles' screen and (max-width: 600px);` 这种条件导入，它就是一个简单、直接的样式引入。导入进来的样式，和你在当前组件里亲手写的样式完全一样，会按照同样的优先级去级联、覆盖，就像它们本来就写在那里一样。 这么做的好处就非常明显了。第一，你所有用这个样式库的组件，看上去都是统一的，不会出现东一个按钮圆角、西一个直角的情况。第二，整个团队共享的是同一份样式源，这就是所谓的“单一事实来源”，改一个地方，所有地方都自动更新，省时省力。第三，它还能很好地和SLDS（Salesforce Lightning Design System）的styling hooks搭配使用。你可以利用这些钩子做集中的主题定制，比如把品牌色定义在共享样式模块里，一旦品牌换色，只需要改这个模块，所有组件就跟着焕然一新，相当方便。 好了，利用纯CSS模块组件来共享样式，就是这么简单又强大。大家可以自己动手试一下，建一个只有CSS和配置文件的组件，体验一把“一站式”换肤的乐趣。