2017年7月25日

CSS设计规范（2）Class命名，选择器，代码组织

Class命名

  • class 名称中只能出现小写字符和连字符(-)，例如 .btn 和 .btn-danger。
  • class 名称应当尽可能短，并且意义明确。但避免过度任意的简写，.btn 代表 button，但是 .b 不能表达任何意思，只能代表个B
  • 使用有意义的名称。使用有组织的或目的明确的名称，不要使用表现形式（presentational）的名称。
  • 基于最近的父 class 或基本（base） class 作为新 class 的前缀。
  • 使用 .js-* class 来标识行为（与样式相对），并且不要将这些 class 包含到 CSS 文件中。
  • 使用 .ui-* class 来做通用UI模块样式声明

选择器

  • 对于通用元素使用 class ，这样利于渲染性能的优化。
  • 对于经常出现的组件，避免使用属性选择器（例如，[class^=”…”]）。浏览器的性能会受到这些因素的影响。
  • 选择器要尽可能短，并且尽量限制组成选择器的元素个数，建议不要超过 3 。
  • 不采用 class=”btn btn-disabled”，推荐使用 class=”btn disabled” 写法
  • 只有在必要的时候才将 class 限制在最近的父元素内（也就是后代选择器）（例如，不使用带前缀的 class 时 — 前缀类似于命名空间）。

扩展阅读：

  • Scope CSS classes with prefixes
  • Stop the cascade

代码组织

  • 以组件为单位组织代码段。
  • 制定一致的注释规范。
  • 使用一致的空白符将代码分隔成块，这样利于扫描较大的文档。
  • 如果使用了多个 CSS 文件，将其按照组件而非页面的形式分拆，因为页面会被重组，而组件只会被移动。

注释规范

Author:
Filed Under: Work

2,343 thoughts on “CSS设计规范（2）Class命名，选择器，代码组织”