【YQN】CSS \ Less \ Sass 编码规范

1 引言

1.1 说明

本文档以 Airbnb CSS Style Guide 为基础，编写符合自己团队的编码规范；统一了命名和注释两大痛点，就统一了80%的风格，所以我们重点拓展这两部分内容，主体部分请参考基础。

1.2 基础

1. CSS 中文版 | English

2 风格规范

2.1 命名

2.1.1 类选择器

1. 可以帮助我们理清 CSS 和 HTML 之间清晰且严谨的关系。

2. 可以帮助我们创建出可重用、易装配的组件。

3. 可以减少嵌套，降低特定性。

4. 可以帮助我们创建出可扩展的样式表。

OOCSS(http://oocss.org/)，也就是 “Object Oriented CSS（面向对象的CSS）”，是一种写 CSS 的方法，其思想就是鼓励你把样式表看作“对象”的集合：创建可重用性、可重复性的代码段让你可以在整个网站中多次使用。

参考资料：

1. Nicole Sullivan 的 OOCSS wiki

2. Smashing Magazine 的 Introduction to OOCSS

BEM，也就是 “Block-Element-Modifier”，是一种用于 HTML 和 CSS 类名的命名约定。BEM 最初是由 Yandex 提出的，要知道他们拥有巨大的代码库和可伸缩性，BEM 就是为此而生的，并且可以作为一套遵循 OOCSS 的参考指导规范。

1. CSS Trick 的 BEM 101

2. Harry Roberts 的 introduction to BEM

命名方式1：

1. .listing-card 是一个块（block），表示高层次的组件。
2. .listing-card-title 是一个元素（element），它属于.listing-card 的一部分，因此块是由元素组成的。
3. .listing-card-featured 是一个修饰符（modifier），表示这个块与.listing-card有着不同的状态或者变化。

2.1.2 ID 选择器

在 CSS 中，虽然可以通过 ID 选择元素，但大家通常都会把这种方式列为反面教材。ID 选择器给你的规则声明带来了不必要的高优先级，而且 ID 选择器是不可重用的。

想要了解关于这个主题的更多内容，参见 CSS Wizardry 的文章，文章中有关于如何处理优先级的内容。

2.1.3 JavaScript 钩子

避免在 CSS 和 JavaScript 中绑定相同的类。否则开发者在重构时通常会出现以下情况：轻则浪费时间在对照查找每个要改变的类，重则因为害怕破坏功能而不敢作出更改。

我们推荐在创建用于特定 JavaScript 的类名时，添加

前缀：

2.1.4 命名空间

项目名-文件路径-文件名

2.1.5 常用命名

待完善

2.2 注释

2.2.1 文件注释

2.2.1 细节注释

建议注释独占一行，有多行注释内容时，使用多个单行注释。避免行末注释。

2.3 格式

CSS, Scss, Less 格式配置应用标准配置。

3 语言规范

遵循主流风格指南。

4 代码检查

StyleLint 详细规则请参考 https://stylelint.io/user-guide/rules/

5 参考资料

1. https://github.com/airbnb/css

2. https://github.com/ecomfe/spec/blob/master/css-style-guide.md

3. https://github.com/ecomfe/spec/blob/master/less-code-style.md

4. https://github.com/ElemeFE/style-guide/blob/master/css-modulize.md

5. https://github.com/airbnb/javascript/tree/master/css-in-javascript

6. https://github.com/Zhangjd/css-style-guide

「两年博客，如果觉得我的文章对您有用，请帮助本站成长」

赞(5) 打赏

谢谢你请我吃鸡腿*^_^*

支付宝

微信

赏 5

谢谢你请我吃鸡腿*^_^*

支付宝

微信