唯品秀前端博客
当前位置: 前端开发 > HTML/CSS > 【YQN】CSS \ Less \ Sass 编码规范-企业开发项目流程

1 引言

1.1 说明

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

1.2 基础

  1. CSS 中文版 | English

2 风格规范

2.1 命名

2.1.1 类选择器

出于以下原因,我们鼓励使用 OOCSS 和 BEM 的某种组合:

  1. 可以帮助我们理清 CSS 和 HTML 之间清晰且严谨的关系。
  2. 可以帮助我们创建出可重用、易装配的组件。
  3. 可以减少嵌套,降低特定性。
  4. 可以帮助我们创建出可扩展的样式表。

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

参考资料:

  1. Nicole Sullivan 的 OOCSS wikicss规范

  2. Smashing Magazine 的 Introduction to OOCSS

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

命名方式1:

以下两种方式都可以,项目内保持统一。

1
2
3
4
5
6
7
<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{ }
  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 的类名时,添加

1
.js-

前缀:

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 文件注释

1
2
3
/**
 * 文件描述
 */

2.2.1 细节注释

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

1
/* CSS注释内容 */
1
// Less注释内容
1
// Sass注释内容

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) 打赏
谢谢你请我吃鸡腿*^_^*

支付宝扫一扫打赏

微信扫一扫打赏

标签:

上一篇:

下一篇:

相关推荐

0 条评论关于"【YQN】CSS \ Less \ Sass 编码规范-企业开发项目流程"

最新评论

    暂无留言哦~~

博客简介

一个关注Web前端开发技术、关注用户体验、坚持更多原创实战教程的个人网站,梦想一旦被付诸行动,就会变得神圣,愿景:成为宇宙中最具有代表性的前端技术类博客。主题源码 

精彩评论

友情链接

他们同样是一群网虫,却不是每天泡在网上游走在淘宝和网游之间、刷着本来就快要透支的信用卡。他们或许没有踏出国门一步,但同学却不局限在一国一校,而是遍及全球!申请交换友链

站点统计

  • 文章总数: 289 篇
  • 草稿数目: 0 篇
  • 分类数目: 15 个
  • 独立页面: 7 个
  • 评论总数: 979 条
  • 链接总数: 12 个
  • 标签总数: 481 个
  • 注册用户: 2 人
  • 访问总量: 8,806,171 次
  • 最近更新: 2021年1月18日
服务热线:
 173xxxx7240

 QQ在线交流

 旺旺在线