唯品秀前端博客
当前位置: 前端开发 > HTML/CSS > 【YQN】CSS \ Less \ Sass 编码规范

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

2017-10-13 分类:HTML/CSS 作者:管理员 阅读(1856)

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 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
    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{ }
    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) 打赏

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

    支付宝
    微信
    5

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

    支付宝
    微信
    标签:

    上一篇:

    下一篇:

    你可能感兴趣

    共有 0 条评论 - 【YQN】CSS \ Less \ Sass 编码规范

    博客简介

    唯品秀博客: weipxiu.com,一个关注Web前端开发技术、关注用户体验、坚持更多原创实战教程的个人网站,愿景:成为宇宙中最具有代表性的前端博客,期待您的参与,主题源码 

    精彩评论

    友情链接

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

    站点统计

    • 文章总数: 235 篇
    • 草稿数目: 0 篇
    • 分类数目: 14 个
    • 独立页面: 6 个
    • 评论总数: 935 条
    • 链接总数: 13 个
    • 标签总数: 424 个
    • 建站时间: 1010 天
    • 注册用户: 2228 人
    • 访问总量: 8925017 次
    • 最近更新: 2019年9月19日
    服务热线:
     173xxxx7240

     QQ在线交流

     旺旺在线