约定

MaintainableCSS 有如下约定:

.<模块>[-<组件>][-<状态>] {}

方括号是可选的,取决于模块。下面是一些例子:

/* 模块容器 */
.searchResults {}

/* 组件 */
.searchResults-heading {}

/* 状态 */
.searchResults-isLoading {}

注意:

必须给每个元素一个 class 名称吗?

不是的。你可以写成 .searchResults p 。而且有时候你不得不这样做,例如你在使用 markdown。 不过注意如果你嵌套了一个模块也包含了p,他会继承样式,可能需要覆盖样式。

为为什么必须给模块名称加前缀?

好问题。下面是一个没有前缀的例子:

<div class="basket">
  <div class="heading">

CSS 代码:

/* module */
.basket {}

/* heading component of basket module */
.basket .heading {}

存在两个问题:

  1. 看 HTML, 很难区分谁是模块谁是组件
  2. .basket .heading 组件会继承 .heading 模块的样式,这个模块可能会有意想不到的副作用。

章节

  1. 介绍
  2. 语义化
  3. 复用
  4. ID
  5. 约定
  6. 模块
  7. 状态
  8. 修饰器
  9. 版本
  10. Javascript
  11. 组织
  12. 问与答