1 引言
1.1 说明
本文档以 Airbnb CSS Style Guide 为基础,编写符合自己团队的编码规范;统一了命名和注释两大痛点,就统一了80%的风格,所以我们重点拓展这两部分内容,主体部分请参考基础。
1.2 基础
-
CSS 中文版 | English
2 风格规范
2.1 命名
2.1.1 类选择器
出于以下原因,我们鼓励使用 OOCSS 和 BEM 的某种组合:
-
可以帮助我们理清 CSS 和 HTML 之间清晰且严谨的关系。
-
可以帮助我们创建出可重用、易装配的组件。
-
可以减少嵌套,降低特定性。
-
可以帮助我们创建出可扩展的样式表。
OOCSS(http://oocss.org/),也就是 “Object Oriented CSS(面向对象的CSS)”,是一种写 CSS 的方法,其思想就是鼓励你把样式表看作“对象”的集合:创建可重用性、可重复性的代码段让你可以在整个网站中多次使用。
参考资料:
-
Nicole Sullivan 的 OOCSS wiki
-
Smashing Magazine 的 Introduction to OOCSS
BEM,也就是 “Block-Element-Modifier”,是一种用于 HTML 和 CSS 类名的命名约定。BEM 最初是由 Yandex 提出的,要知道他们拥有巨大的代码库和可伸缩性,BEM 就是为此而生的,并且可以作为一套遵循 OOCSS 的参考指导规范。
-
CSS Trick 的 BEM 101
-
Harry Roberts 的 introduction to BEM
以下两种方式都可以,项目内保持统一。
命名方式1:
1 2 3 4 5 6 7 8 9
| <article class="listing-card listing-card-active">
<h1 class="listing-card-title">标题</h1>
<div class="listing-card-content">
<p>内容</p>
</div>
</article> |
1 2 3 4 5
| .listing-card{ }
.listing-card-active{ }
.listing-card-title{ }
.listing-card-content{ }
.listing-card-footer{ } |
- .listing-card 是一个块(block),表示高层次的组件。
- .listing-card-title 是一个元素(element),它属于.listing-card 的一部分,因此块是由元素组成的。
- .listing-card-featured 是一个修饰符(modifier),表示这个块与.listing-card有着不同的状态或者变化。
2.1.2 ID 选择器
在 CSS 中,虽然可以通过 ID 选择元素,但大家通常都会把这种方式列为反面教材。ID 选择器给你的规则声明带来了不必要的高优先级,而且 ID 选择器是不可重用的。
想要了解关于这个主题的更多内容,参见 CSS Wizardry 的文章,文章中有关于如何处理优先级的内容。
2.1.3 JavaScript 钩子
避免在 CSS 和 JavaScript 中绑定相同的类。否则开发者在重构时通常会出现以下情况:轻则浪费时间在对照查找每个要改变的类,重则因为害怕破坏功能而不敢作出更改。
我们推荐在创建用于特定 JavaScript 的类名时,添加
前缀:
1
| <button class="btn btn-primary js-request-to-book">Request to Book</button> |
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 参考资料
-
https://github.com/airbnb/css
-
https://github.com/ecomfe/spec/blob/master/css-style-guide.md
-
https://github.com/ecomfe/spec/blob/master/less-code-style.md
-
https://github.com/ElemeFE/style-guide/blob/master/css-modulize.md
-
https://github.com/airbnb/javascript/tree/master/css-in-javascript
-
https://github.com/Zhangjd/css-style-guide
「两年博客,如果觉得我的文章对您有用,请帮助本站成长」
共有 0 条评论