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 文件,将其按照组件而非页面的形式分拆,因为页面会被重组,而组件只会被移动。

注释规范



23 thoughts on “CSS设计规范(2)Class命名,选择器,代码组织”

发表评论

电子邮件地址不会被公开。