More Transparent UI Code with Namespaces

/**
* The top-level ‘Block’ of a component.
*/
.modal {}

/**
* An ‘Element’ that is a part of the larger Block.
*/
.modal__title {}

/**
* A ‘Modifier’ of the Block.
*/
.modal--large {}

<div class="modal  modal--large">
  <h1 class="modal__title">Sign into your account</h1>
  <div class="modal__content">
    <form class="form-login">
    </form>
  </div>
</div>

• 清晰：我们能从最小的可能来源收集多少信息？我们的代码有可读性吗？我们能从一个单一的上下文做安全性假设吗？我们必须依靠多少外部的或者补充的信息来了解一个系统？

• 信心：我们有足够关于系统能够完全接入的知识吗？我们足够了解代码能够自信做出改变吗？我们有办法知道潜在副作用做出改变吗？我们有办法知道我们能够删除什么吗？

命名空间

• o-：表示一个对象（Object），可用于你当前看到的对象里任何数量的不相关的上下文。对这些类型的 class 进行修改可能会引起其它不相关地方的连锁反应。请谨慎对待。

• c-：表示一个组件（Component），指一个具体的、特定实现的 UI。对它样式的所有修改应该在当前上下文中可检测。修改这些样式是安全的，没有副作用。

• u-：表示一个 class 是一个通用工具（Utility） class，它有一个非常特殊的角色（通常只提供一个声明），不应该绑定或改变。可以被重用并且不依赖任何特定的 UI。你也许会从一些库和方法例如 SUIT 中识别这种命名空间。

• t-：表示一个 class 用于给视图添加主题（Theme），它告诉我们当前 UI 组件的表现可能是由于一个主题的存在。

• s-：表示一个 class 创建一个新的样式上下文或作用域（Scope）。和主题（theme）类似，但是，应该保守的使用——他们会被滥用并导致 CSS 丑陋。

• is-，has-：表示当前 UI 块因为一种状态或条件而显示特定的样式。这种来自 SMACSS 的状态化的命名空间是极好的。它表示 DOM 当前临时的、可选的或者暂存的样式取决于一个特定的状态被调用。

• _：表示这个 class 是糟糕的——一个 hack！有时，尽管很少，我们需要在标记中增加一个 class 强制使之产生作用。如果我们这么做了，我们需要让其他人知道这个 class 并不是理想的，希望它是暂时的（也就是不绑定这个）。

• js-：表示这段 DOM 上有一些行为，JavaScript 绑定它提供行为。如果你不是 JavaScript 开发人员，别管它就好。

• qa-：表示 QA 或者测试工程团队运行自动化 UI 测试需要找到或绑定到这些 DOM 上。类似 JavaScript 命名空间，这基本上只是 non-CSS 目的的储备钩子。

对象命名空间：o-

.o-object-name[<element>|<modifier>] {}

.o-layout {}

.o-layout__item {}

.o-layout--fixed {}

<blockquote class="media testimonial"></blockquote>

<blockquote class="o-media  testimonial"></blockquote>

• 对象是抽象的。

• 它们可以在项目中的任何地方使用——甚至你可能没有看到的地方。

• 避免修改它们的样式。

• 小心任何 o- 相关的事物。

组件命名空间：c-

.c-component-name[<element>|<modifier>] {}

.c-modal {}

.c-modal__title {}

.c-modal--gallery {}

<blockquote class="o-media  c-testimonial"></blockquote>

• 组件是特定实现的 UI。

• 修改它们很安全。

• 任何以 c- 开头的都是一个具体的事物。

工具命名空间：u-

.u-utility-name {}

.u-clearfix {}

.footer .text-center {
  font-size: 75%;
}

<div class="font-size-large">
  ...
  <blockquote class="pullquote"></blockquote>
  ...
</div>

<div class="u-font-size-large">
  ...
  <blockquote class="c-pullquote"></blockquote>
  ...
</div>

• Utilities 是重量级的样式。

• 它提醒人们它的存在。

• 不要对任何以 u- 开头的 class 重写。

主题命名空间：t-

.t-theme-name {}

.t-light {}

.c-btn {
  display: inline-block;
  padding: 1em;
  background-color: #333;
  color: #e4e4e4;

  .t-light & {
    background-color: #e4e4e4;
    color: #333;
  }
}

• 主题命名空间有很高级别。

• 它们给很多其他规则提供了一个上下文或作用域。

• 它是当前 UI 状况的有用信号。

作用域命名空间：s-

.s-scope-name {}

.s-cms-content {}

<nav class="c-nav-primary">
  ...
</nav>
<section class="s-cms-content">
  <h1>...</h1>
  <p>...</p>
  <p>...</p>
  <ul>
    ...
  </ul>
  <p>...</p>
</section>

<ul class="c-share-links">
  ...
</ul>

<a href="" class="c-btn  c-btn--primary">Next article...</a>

/**
 * Create a new styling context for any free-text CMS content (blog posts,
 * news pages, etc.).
 *
 * 1\\. Use a larger and more readable typeface for continuous prose.
 * 2\\. Force all headings to have the same appearance, regardless of their
 *    hierarchy.
 * 3\\. Make links inside long text more apparent.
 */
.s-cms-content {
  font: 16px/1.5 serif; /* [1] */

  h1, h2, h3, h4, h5, h6 {
    font: bold 100%/1.5 sans-serif; /* [2] */
  }

  a {
    text-decoration: underline; /* [3] */
  }

}

• 作用域非常少见：请确定你需要使用它们。

• 它们完全依赖于嵌套，确保所有人意识到这一点。

状态化命名空间：is- | has-

.[is|has]-state {}

.is-open {}

.has-dropdown {}

<div class="c-modal  is-open">
  ...
</div>

.c-modal {
  ...

  &.is-open { ... }

}

  .c-modal__content {
    ...

    &.is-loading { ... }

  }

• 状态是临时的。

• 确保 HTML 中的状态很容易被看到和被理解。

• 不要写赤裸的状态 class

Hack 命名空间：_

._<namespace>hack-name {}

._c-footer-mobile {}

@media screen and (max-width: 30em) {

  /**
   * We need to force the footer to be a fixed height on smaller screens.
   */
  ._c-footer-mobile {
    height: 80px;
  }

}

• Hacks 是丑陋的——给它们丑陋的 classes。

• Hacks 应该是临时的，不要重用或绑定到其它 classes

• 留意代码库中的 Hacks classes 数量

JavaScript 命名空间：js-

.js-component-name {}

.js-modal {}

• JavaScript 和 CSS 分离——给他们使用单独的钩子

• 为了更安全的合作，给予不同的团队／角色不同的钩子

QA 命名空间：qa-

.qa-node-name {}

.qa-error-login {}

1. 访问 site.dev/login

2. 输入错误的用户名。

3. 输入错误的密码。

4. 希望在 DOM 中看到错误出现。

<strong class="message  error  qa-error-login">

<strong class="c-message  c-message--error  qa-error-login">

• 将自动化 UI 测试绑定到样式钩子是极其含糊的——不要这么做。

• 将测试绑定到测试专用 classes。

• 确保任何 UI 重构不会影响到 QA 团队的钩子。

方便的附加效果

命名空间检测

• 畸形的 classes

• CSS 中规则的类型

• HTML 中 classes 的类型

查找有（无）效的 classes

^\\.(_)?[a-z]+-[a-z0-9-]+((_{2}|-{2})?[a-z0-9-]+)?(-{2}[a-z0-9-]+)?[a-z0-9]$

.o-layout__item
.c-modal--wide
.u-text-center
.c-nav-primary__link--home
._c-footer-mobile

.foo // No namespace
.c-datePicker // Camel case
.o-media_img // Single underscore
.c-page-head-- // Trailing punctuation

• ^：确定字符串的开头。

• \\.：必须以点开头（即是一个 class）。

• (_)?：可以下划线开头（即是一个 Hack）。

• [a-a]+：小写的一个或多个字母（即命名空间）。

• ：一个连字符。

• [a-z0-9-]+：字母数字、小写、分隔符，一个或多个字符（即 Block 名字）。

• (：打开可选匹配。
• (_{2}|-{2})?：可选的两个下划线或分隔符（即 Element 或 Modifier）。
• [a-z0-9-]+：字母数字、小写、分隔符，一个或多个字符（即 Element 或 Modifier 名字）。

• )?：关闭可选匹配。

• (-{2}[a-z0-9-]+)?：可选的字母数字，小写修饰符。

• [a-z0-9]：确保以字母、数字结尾。

• $：确保结束字符串。

高亮命名空间的类型

[class^="c-"],
[class*=" c-"] {
  outline: 5px solid cyan;
}

• [class^="c-"]：找到所有以 c- 开头的 class 属性，例如：

 <blockquote class="c-testimonial">

• [class*=" c-"]：找到所有包含 c- 的 class 属性，例如：

<blockquote class="o-media  c-testimonial">

[class^="o-"],
[class*=" o-"] {
  outline: 5px solid orange;
}

[class^="c-"],
[class*=" c-"] {
  outline: 5px solid cyan;
}

[class^="u-"],
[class*=" u-"] {
  outline: 5px solid violet;
}

[class^="_"],
[class*=" _"] {
  outline: 5px solid red;
}

查找 CSS 中的类型

$ git grep "\\.t-"

太多的类型?

<blockquote class="media  Testimonial">
</blockquote>

<ul class="list-inline  Nav-Primary">
</ul>

<ul class="box  box--large  Panel  Panel--info">
</ul>

学习命名空间

• 我们没有理由不遵从它。

• 它可以被视为备忘单。

一个例子

1. 这是一个没有上下文的实际的大项目，所以尽管它展示了命名空间是什么，但是作为一个例子还是太小不足以表现命名空间的强大之处。

2. 由于你可能还不熟悉命名空间，所以如果你先温习一下这些东西，也许能更快的阅读那些 HTML。

<body class="t-light">

  <article class="c-modal  c-modal--wide  js-modal  is-open">

    <div class="c-modal__content">

      <div class="s-cms-content">
        ...
      </div>

    </div><!-- /.c-modal__content -->

    <div class="c-modal__foot">

      <p class="o-layout">
        <span class="o-layout__item  u-1/3">
          <a href="c-btn  c-btn--negative  qa-modal-dismiss">Cancel</a>
        </span>

        <span class="u-hidden">or</span>

        <span class="o-layout__item  u-2/3">
          <a href="c-btn  c-btn--positive  qa-modal-accept">Confirm</a>
        </span>
      </p>

    </div><!-- /.c-modal__foot -->

  </article><!-- /.c-modal -->

  <footer class="c-page-foot">
    <small class="c-copyright  _c-copyright">...</small>
  </footer>

</body>
</html>

• 有一个高优先级的主题被使用（.t-light）：UI 因此而显示当前的外观。

• 有一个 modal 组件（.c-modal），它使用了宽型变化（.c-modal--wide）。有一些 JS 绑定在上面（.js-modal），当前是 open 状态（.is-open）。

• modal 由几块组成（.c-modal__content 和 .c-modal__foot）。

• DOM 有一整块区域样式被定义了作用域（.s-cms-content）。我们不能从它的内容中获取 DOM 节点，因此我们在一个新的上下文定义样式。

• 有一个 layout 对象（.o-layout）。

• 一些 layout 条目显示 1/3 和 2/3 宽（.u-1/3，.u-2/3）。

• 这些宽度 classes 就是 Utilities，因此不要只在 layout 对象中使用——它们可以在任何地方使用。

• 有一些 button 组件。

• QA 钩子被绑定到自动 UI 测试（.qa-modal-dismiss，.qa-modal-accept）。

• 我知道这里的一些东西我可以在别的地方重用（对象，组件，工具）。

• 一些东西我可以重用，但是不能绑定或改变（对象和工具）。

• 一些东西我不应该动（JS 和 QA 人员的东西）。

• 一些讨厌的 hacks 需要在某些时机被移除，不要重用、修改、移动。

<body class="light">

  <article class="modal  wide  open">

    <div class="modal__content">
      ...
    </div><!-- /.modal__content -->

    <div class="modal__foot">

      <p class="layout">
        <span class="layout__item  1/3">
          <a href="btn  btn--negative">Cancel</a>
        </span>

        <span class="hidden">or</span>

        <span class="layout__item  2/3">
          <a href="btn  btn--positive">Confirm</a>
        </span>
      </p>

    </div><!-- /.modal__foot -->

  </article><!-- /.modal -->

  <footer class="page-foot">
    <small class="copyright">...</small>
  </footer>

</body>
</html>