blog

命名规则

常见难点与痛处

难以理解

每个人起名字的风格不同，可能有人习惯将样式写在同一类名下，有人又习惯将不同的样式区分类名（但是名字又只有作者自己才能意会，也许过一阵子也意会不了了）。

难以复用

通常来说，当我们复用 CSS 代码时，总是会发现有那么一个或两个样式跟现在需要的样式不同，因为这个样式很可能是当时作者认为是为特定元素而写的，或者它是从其他地方继承而来了一些属性，这时我们无法修改，只能再复制出一份代码。

于是新的问题又来了，代码不仅没复用成功，还增加了一倍的代码维护负担。

难以维护

不仅是上述的原因导致了维护困难。当我们更新一个页面的样式的时候，却破坏了另一个页面的样式，当我们决定覆盖它时，却又陷于优先度的问题。

模块化思想

在命名和组织 html 标签和 CSS 样式时，我们不应当从页面级的角度去思考，而应当将页面视为由无数个模块组成的，每个模块互不干扰，像乐高积木一样组织页面。

推崇模块化方法的三大模式如下

OOCSS

面向对象的 CSS，OOCSS 核心思想是：对象是可重用的模式（pattern），其视觉外观不由上下文决定

核心思想

上下文无关

无论对象的位置在哪里，一个对象都应该看起来无差别，不应根据对象的上下文设置对象的样式。

例如，不是将侧边栏中的所有按钮都设置为橙色，将主区域中的所有按钮设置为蓝色，而是应该创建一个蓝色的按钮类，以及一个橙色的 modifier。这样做橙色按钮可以在任何地方使用，它们没有被绑定在侧边栏上，它们只是你的按钮样式之一。

皮肤（主题）

为常见的视觉模式创建可复用的类。

一个网页中结构是不可变，也可能是独立的，但是诸如背景颜色，边框等样式时可以抽离并复用的，应当将其分离出来单独创建。

使用 Class

CSS 不应当由 HTML 标签决定， .site-nav 而不是 #header ul。

不使用 ID

尽量使用 class，id 选择器会扰乱优先级。

BEM

三个字母分别代表 Block（块）、Element（元素）、Modifier（修饰符）。

Block（块）

块是网页逻辑和功能的独立组件。

首先，块是可嵌套的。它们应该能被包含在另一个块中，而不会破坏任何样式。例如，可能在侧栏中有一个标签界面小部件的块，该块可能包含按钮，这些按钮也是一种单独的块。按钮的样式和选项卡式元素的样式不会相互影响，一个嵌套在另一个中，仅此而已。

其次，块是可重复的。界面应该能够包含同一块的多个实例。

Element（元素）

元素是块的组成部分，它不能在块之外使用。一个不错的例子：一个导航菜单，它包含的项目在菜单的上下文之外没有意义。你不会为菜单项定义块，菜单本身应定义为块，而菜单项是其子元素。

Modifier（修饰符）

修饰符定义块的外观和行为。例如，菜单块的外观的垂直或水平，取决于所使用的修饰符。

命名约定

BEM 所做的另一件事是定义了非常严格的命名约定：

.block-name__element--modifier

这看起来有点复杂，我来分解一下：

  • 名称以小写字母书写
  • 名称中的单词用连字符（-）分隔
  • 元素由双下划线（__）分隔
  • 修饰符由双连字符（--）分隔

不嵌套 CSS

使用 .btn__price 而不是 .btn .btn__price 。

即使是在 Sass 或 Less 也不该使用层级嵌套，但是可以使用 .btn__text 然后用 .btn--orange .btn__text 来覆盖应用了修饰符按钮的文本颜色

SMACSS

SMACSS 的含义是 CSS 的可扩展性和模块化架构（Scalable & Modular Architecture）

SMACSS 更像是对 OOCSS 和 BEM 的扩展，即通过命名规则以更好的识别区分 CSS 类名的作用。

类别

CSS 系统可能包含的规则定义的类别：

  • 基础（base） 规则是HTML元素的默认样式，如链接，段落和标题。
  • 布局（grid） 规则将页面分成几个部分，并将一个或多个模块组合在一起。它们只定义布局，而不管颜色或排版。
  • 模块（module）（又名“对象”或“块”）是可重用的，设计中的一个模块。例如，按钮，媒体对象，产品列表等。
  • 状态（state） 规则描述了模块或布局在特定状态下的外观。通常使用 JavaScript 应用或删除。例如，隐藏，扩展，激活等。
  • 主题（theme） 规则描述了模块或布局在主题应用时的外观，例如，在 Yahoo Mail 中，可以使用用户主题，这会影响页面上的每个模块。

命名约定前缀

  • 布局（grid）（.g-）：将页面分割为几个大块，通常有头部、主体、主栏、侧栏、尾部等！
  • 模块（module）（.m-）：通常是一个语义化的可以重复使用的较大的整体！比如导航、登录、注册、各种列表、评论、搜索等！
  • 元件（unit）（.u-）：通常是一个不可再分的较为小巧的个体，通常被重复用于各种模块中！比如按钮、输入框、loading、图标等！
  • 功能（function）（.f-）：为方便一些常用样式的使用，我们将这些使用率较高的样式剥离出来，按需使用，通常这些选择器具有固定样式表现，比如清除浮动等！不可滥用！
  • 皮肤（skin）（.s-）：如果你需要把皮肤型的样式抽离出来，通常为文字色、背景色（图）、边框色等，非换肤型网站通常只提取文字色！非换肤型网站不可滥用此类！
  • 状态（.z-）：为状态类样式加入前缀，统一标识，方便识别，她只能组合使用或作为后代出现（.u-ipt.z-dis{}，.m-list li.z-sel{}），具体详见命名规则的扩展相关项。

命名约定前缀参考自网易NEC

总结

以上皆为各框架的罗列，具体实践个人认为应当综合使用，命名规则应当更加详细，诸如代码规范应当更加详尽规定（待补充）

← 伪类和伪元素→