CSS 类名规范

一、为什么要规范命名

CSS 类名规范的重要性在于:

便于重构

便于开发者理解阅读

便于组织 CSS 模块目录,组件化样式

所以,在你初次写完一个项目的样式后,或许还没能感受到命名规范的重要性,当你在修改别人的代码或者重构项目的时,就能明白,一个条理清晰,定义规范的类名有多么的可爱。这也是命名不规范后,重构时经常吐槽的:重新写一遍样式都比改样式快~

接下来总结常见的命名规范:

二、 BEM

BEM (Block Element Modifier)就是 块,元素,修饰符的缩写。

Block: 独立的实体,它本身是有意义的header, footer, menu, input, container

Element:块的一部分,没有独立的含义,并且在语义上与其块相关联。menu item, list item, checkbox caption, header title

Modifier: 块或元素上的修饰标志。使用它们表示块或元素的状态disabled, highlighted, checked, fixed, size big, color yellow

举个列子,

BEM 官方的命名规则是:将双下划线 double underscore连接块和元素用双短横线 two dashes连接元素和修饰符用短横线作为修饰符多个单词间的连接,用布尔类型的值命名修饰符,形如:active, disable, invisible, collapsed

比如:

可以看出,通过类名我们就清晰地知道这个类名是干什么用的。CSS 是一种把设计规范转化成实际看到样式的一种手段,BEM 能够十分优雅的讲设计规范转行成实际的效果。BEM 核心思想是组件化。一个组件必定是要能从上下文独立出来的。

BEM 的缺点:

类名过长,尤其是初始块的名字就挺长的时候,最终导致样式文件过大

双下划线和双横线不好看~

三、rscss

rscss 是以组件化的方式命名 css 类。命名由(Components, Elements, Variants) 组件、元素、变量组成。同时,尽可能的将嵌套元素有 子代选择器来匹配。以避免后代原则器在重构等场景发生不可控意外。

Components:将系统分割成多个独立的小组件,组件由至少两个单词组成,并有短横线(dash: -)连接,,,

Elements: 每个组件都是由多个元素构成,每个元素应该由一个单词(word)来表达,如果实在需要多个单词,单词之间不加任何连接符,

Variants: 变量有短横线(dash: -)为前缀:因为短横线对打字更友好, 变量单独写 class,,

.like-button {

&.-wide { /* ... */ }

&.-short { /* ... */ }

&.-disabled { /* ... */ }

}

.shopping-card {

> .title { /* ... */ }

> .title.-small { /* ... */ }

}

组件嵌套rscss 建议使用 SASS 风格的 class 写法,将嵌套组件抽离出来,通过和 @extend 的方式复用样式。嵌套应该少于 3 层,避免过度嵌套

换成下面的写法

.search-form {

> .submit {

@extend .search-button;

@extend .search-button.-red;

@extend .search-button.-large;

}

}

组件复用力求把组件复用性提高到最大,为组件编写样式的时候应避免使用位置属性:

Positioning (position, top, left, right, bottom)

Floats (float, clear)

Margins (margin)

Dimensions (width, height) *

某些的确需要固定尺寸的组件可以是例外:头像,徽标,logo某些的确需要定位属性的组件,应该尽量将定位样式赋予父组件

样式文件结构一个组件一个样式文件

# css/components/search-form.scss

.search-form {

> .button { /* ... */ }

> .field { /* ... */ }

> .label { /* ... */ }

// variants

&.-small { /* ... */ }

&.-wide { /* ... */ }

}

通过 glob 匹配全部样式

@import 'components/*';

四、总结

对比 BEM 和 rscss 的规范区别

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180919G24NKB00?refer=cp_1026
  • 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 cloudcommunity@tencent.com 删除。

扫码关注腾讯云开发者

领取腾讯云代金券