前端开发规范CSS

代码组织

以组件为单位组织代码段;

  • 如果使用了多个 CSS 文件,将其按照组件而非页面的形式分拆,因为页面会被重组,而组件只会被移动;

Class 和 ID

使用语义化、通用的命名方式;

使用连字符 - 作为 ID、Class 名称界定符,不要驼峰命名法和下划线;

避免选择器嵌套层级过多,尽量少于 3 级;

避免选择器和 Class、ID 叠加使用;

/* Not recommended */
.red {}
.box_green {}
.page .header .login #username input {}
ul#example {}
/* Recommended */
#nav {}
.box-video {}
#username input {}
#example {}
声明顺序相关属性应为一组,推荐的样式编写顺序
  • Positioning
  • Box model
  • Typographic
  • Visual

由于定位(positioning)可以从正常的文档流中移除元素,并且还能覆盖盒模型(box model)相关的样式,因此排在首位。盒模型决定了组件的尺寸和位置,因此排在第二位。

.declaration-order {
  /* Positioning */
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100;

  /* Box model */
  display: block;
  box-sizing: border-box;
  width: 100px;
  height: 100px;
  padding: 10px;
  border: 1px solid #e5e5e5;
  border-radius: 3px;
  margin: 10px;
  float: right;
  overflow: hidden;

  /* Typographic */
  font: normal 13px "Helvetica Neue", sans-serif;
  line-height: 1.5;
  text-align: center;

  /* Visual */
  background-color: #f5f5f5;
  color: #fff;
  opacity: .8;
  /* Other */
  cursor: pointer;

}

任何超过 1000 行的 CSS 代码,你都曾经历过这样的体验:

这个 class 到底是什么意思呢?

这个 class 在哪里被使用呢?

如果我创建一个 xxoo class,会造成冲突吗?

Dash prefixes (中划线前缀)

为什么使用中划线作为变体的前缀?

  • 它可以避免歧义与 Elements
  • CSS class 仅能以单词和 _- 开头
  • 中划线比下划线更容易输出

Avoid positioning properties (避免定位属性)

Components 应该在不同的上下文中都可以复用,所以应避免设置以下属性:

  • Positioning (position, top, left, right, bottom)
  • Floats (float, clear)
  • Margins (margin)
  • Dimensions (width, height) *

Fixed dimensions (固定尺寸)

头像和 logos 这些元素应该设置固定尺寸(宽度,高度...)。

Define positioning in parents (在父元素中设置定位)

倘若你需要为组件设置定位,应将在组件的上下文(父元素)中进行处理,比如以下例子中,将 widthsfloats 应用在 list component(.article-list) 当中,而不是 component(.article-card) 自身。

.article-list {
    & {
      @include clearfix;
    }

    > .article-card {
      width: 33.3%;
      float: left;
    }
  }

  .article-card {
    & { /* ... */ }
    > .image { /* ... */ }
    > .title { /* ... */ }
    > .category { /* ... */ }
  }

Summary (总结)

  • Components 的角度思考,以两个单词命名(.screenshot-image
  • Components 中的 Elements,以一个单词命名(.blog-post .title
  • Variants,以中划线-作为前缀(.shop-banner.-with-icon
  • Components 可以互相嵌套
  • 记住,你可以通过继承让事情变得更简单

本文分享自微信公众号 - Tech爬虫(php_pachong)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-04-06

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏编程创造城市

html网页开发基础

1.可以写网页名称(显示在浏览器的左上方),网页名称用标记<title></title>

12610
来自专栏萌兔it

给CSS加点料——Less(四)

Hello小伙伴们,今天还是要接着分享less呢!其实less也没剩很多啦,今天就要结束了呢~今天要主要从Extend、Loops和Merge来为大家介绍~

6810
来自专栏李才哥

前端面试系列(7)

css的盒模型本质是一个盒子,封装周围的HTML元素,包括:外边距、边框、内边距和实际内容。

6220
来自专栏前端迷

浅谈面试中常问的BFC

当浏览器对一个 render tree 进行渲染时,浏览器的渲染引擎就会根据 基础盒模型(CSS basic box model) ,将所有元素划分为一个个矩形...

10630
来自专栏日拱一卒

如何快速识别出网页上的字体 | 利器

又赶上这个活动图、单页乱飞的季节,对于一个好的页面除了内容、图片重要外,字体也是不容忽视的。这个看看Apple家常用的冬青黑、PingHei就全明白了。还有就是...

27320
来自专栏程序员成长指北

web前端面试中10个关于css高频面试题,你都会吗?

BFC(Block Formatting Context),块级格式化上下文,是一个独立的渲染区域,让处于 BFC 内部的元素与外部的元素相互隔离,使内外元素的...

32220
来自专栏Python | Blog

echarts图 示例

版权声明:Copyright © ...

10920
来自专栏web前端教室

如何破解前端工程师的局限性

2、全栈开发,就是会前端的,也会后端的技术。要求是全能,就是从前到后一把梭了。但是实践证明,这种全栈开发,一般到后来就是全都会,但全都不精通。

9320
来自专栏博客同步

圆角与文本

text-stroke:宽度 颜色; 描边,加上兼容性前缀 text-stroke-width: 宽度 text-stroke-color: 颜色

8120
来自专栏萌兔it

给CSS加点料——Less(s)

Hello 小伙伴们大家好,今天我们继续less的分享,上次说啥来着?大声说出来!变量!嵌套!今天说点啥?今天说运算、函数和混合。虽然上次我们已经用到了运算,这...

6620

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励