CSS 模块

  • A+
所属分类:web前端

第二步:组件就是一切

上文中我提到了每一个类必须包含按钮不同状态下的所有的样式,与 BEM 命名方式上相比,代码上可能区别如下:

/* BEM Style */
innerHTML = `<button class="Button Button--in-progress">`
 
/* CSS Modules */
innerHTML = `<button class="${styles.inProgress}">`

那么问题来了,你怎么在所有的状态样式中共享你的样式呢?这个答案就是 CSS 模块的强力武器 – 组件

.common {
  /* all the common styles you want */
}
.normal {
  composes: common;
  /* anything that only applies to Normal */
}
.disabled {
  composes: common;
  /* anything that only applies to Disabled */
}
.error {
  composes: common;
  /* anything that only applies to Error */
}
.inProgress {
  composes: common;
  /* anything that only applies to In Progress */
}

composes这个关键词将会使.normal类将.common内的所有样式包含进来,这个有点像 Sass 的 @extends 语法。但是 Sass 依赖重写你的 CSS 文件达到效果,而 CSS 模块最后会通过 JS 编译导出,不需要修改文件(译者注:下面会有例子详细说明)。

Sass

按照 BEM 的命名规范,我用 Sass 的 @extends 写的话可能会像如下的代码:

.Button--common { /* font-sizes, padding, border-radius */ }
.Button--normal {
  @extends .Button--common;
  /* blue color, light blue background */
}
.Button--error {
  @extends .Button--common;
  /* red color, light red background */
}

编译后的 CSS 文件如下:

.Button--common, .Button--normal, .Button--error {
  /* font-sizes, padding, border-radius */
}
.Button--normal {
  /* blue color, light blue background */
}
.Button--error {
  /* red color, light red background */
}

你可以只需要个类来标记你的元素<button class="Button--error">,但是你能得到包括共有的和特例的所有样式。这看起来真的非常厉害,但是你需要注意这种语法在一些特别的情况下存在问题和陷阱。Hugo Giraudel 在他的文章中做了很好的总结,感谢他!

CSS 模块

composes 语法看起来很像 @extends 但是他们的工作方式是不同的。为了演示一下,让我们来看一个例子:

.common { /* font-sizes, padding, border-radius */ }
.normal { composes: common; /* blue color, light blue background */ }
.error { composes: common; /* red color, light red background */ }

编译后的文件可能是像如下一样:

.components_submit_button__common__abc5436 { /* font-sizes, padding, border-radius */ }
.components_submit_button__normal__def6547 { /* blue color, light blue background */ }
.components_submit_button__error__1638bcd { /* red color, light red background */ }

JS 代码中通过 import styles from "./submit-button.css" 最终会返回:

styles: {
  common: "components_submit_button__common__abc5436",
  normal: "components_submit_button__common__abc5436 components_submit_button__normal__def6547",
  error: "components_submit_button__common__abc5436 components_submit_button__error__1638bcd"

所以我们依然可以使用 style.normal 或者 style.error 在我们的代码中,仍旧会有多个类样式渲染在我们的 DOM 上

<button class="components_submit_button__common__abc5436 
               components_submit_button__normal__def6547">
  Submit
</button>

这就是 composes 语法的厉害之处,你可以在不重写你的 CSS 的情况下对你的元素混合使用不同类的样式。

weinxin
我的微信公众号
我的微信公众号扫一扫

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:2   其中:访客  2   博主  0

    • avatar 独居e阁 1

      内容很详细精彩!

      • avatar 飞蚂蚁模板网 0

        网站做得不错喔!