我是尚丹丹,我的博客建好啦!欢迎大家光临!

前端编码规范(3)—— CSS 和 Sass (SCSS) 规范

css sdd 720℃ 0评论

ID and class naming

ID和class(类)名总是使用可以反应元素目的和用途的名称,或其他通用名称

应该首选具体和反映元素目的的名称

通用名称只是多个元素的备用名,他们兄弟元素之间是一样的

合理的避免使用ID

一般情况下ID不应该被应用于样式。
ID的样式不能被复用并且每个页面中你只能使用一次ID。
使用ID唯一有效的是确定网页或整个站点中的位置。
尽管如此,你应该始终考虑使用class,而不是id,除非只使用一次。

另一个反对使用ID的观点是含有ID选择器权重很高。

CSS选择器中避免标签名

当构建选择器时应该使用清晰, 准确和有语义的class(类)名。不要使用标签选择器。

从分离的角度考虑,在表现层中不应该分配html标记/语义。

 

尽可能的精确

很多前端开发人员写选择器链的时候不使用 直接子选择器(注:直接子选择器和后代选择器的区别)。
有时,这可能会导致疼痛的设计问题并且有时候可能会很耗性能。
然而,在任何情况下,这是一个非常不好的做法。
如果你不写很通用的,需要匹配到DOM末端的选择器, 你应该总是考虑直接子选择器。

缩写属性

CSS提供了各种缩写属性(如 font 字体)应该尽可能使用,即使在只设置一个值的情况下。

使用缩写属性对于代码效率和可读性是有很有用的。

0 和 单位

省略“0”值后面的单位。不要在0值后面使用单位,除非有值。推荐:margin: 0

 

十六进制表示法

在可能的情况下,使用3个字符的十六进制表示法。
颜色值允许这样表示,
3个字符的十六进制表示法更简短。

始终使用小写的十六进制数字。

推荐:color: #f3a;

 

ID 和 Class(类) 名的分隔符

使用连字符(中划线)分隔ID和Class(类)名中的单词。为了增强可理解性,在选择器中不要使用除了连字符(中划线)以外的任何字符(包括没有)来连接单词和缩写。

另外,作为该标准,预设属性选择器 能识别连字符(中划线)作为单词[attribute|=value]的分隔符,
所以最好的坚持使用连字符作为分隔符。

推荐:.adssample {}

 

Hacks

避免用户代理检测以及CSS“hacks” – 首先尝试不同的方法

例如_height:10px,或选择器前缀等,尽量不用。

CSS滤镜也尽量少用

声明顺序

这是一个选择器内书写CSS属性顺序的大致轮廓。这是为了保证更好的可读性和可扫描重要。

作为最佳实践,我们应该遵循以下顺序(应该按照下表的顺序):

  1. 结构性属性:
    1. display
    2. position, left, top, right etc.
    3. overflow, float, clear etc.
    4. margin, padding
  2. 表现性属性:
    1. background, border etc.
    2. font, text

声明结束

为了保证一致性和可扩展性,每个声明应该用分号结束,每个声明换行。

属性名结束

属性名的冒号后使用一个空格。推荐:fontweight: bold;

规则分隔

规则之间始终有一个空行(双换行符)分隔。

CSS引号

属性选择器或属性值用双引号(””),而不是单引号(”)括起来。
URI值(url())不要使用引号

选择器嵌套 (SCSS)

嵌套所有的选择器,但尽量避免嵌套没有任何内容的选择器。

嵌套中引入 空行 (SCSS)

嵌套选择器和CSS属性之间空一行。

上下文媒体查询(SCSS)

在Sass中,当你嵌套你的选择器时也可以使用上下文媒体查询。
在Sass中,你可以在任何给定的嵌套层次中使用媒体查询。
由此生成的CSS将被转换,这样的媒体查询将包裹选择器的形式呈现。

这技术非常方便,
有助于保持媒体查询属于的上下文。

嵌套顺序和父级选择器(SCSS)

当使用Sass的嵌套功能的时候,
重要的是有一个明确的嵌套顺序,
以下内容是一个SCSS块应具有的顺序。

  1. 当前选择器的样式属性
  2. 父级选择器的伪类选择器 (:first-letter, :hover, :active etc)
  3. 伪类元素 (:before and :after)
  4. 父级选择器的声明样式 (.selected, .active, .enlarged etc.)
  5. 用Sass的上下文媒体查询
  6. 子选择器作为最后的部分

 

 

这里很多实例没有列出来,建议看不太懂的,去原文看看。

 

前端编码规范(4)—— CSS 和 Sass (SCSS) 规范

转载请注明:尚丹丹的博客 » 前端编码规范(3)—— CSS 和 Sass (SCSS) 规范

喜欢 (2)
发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址