Css编码规范

原创
2017/06/28 11:30
阅读数 6

(1)为选择器分组时,将单独的选择器放在一行。

         对于只包含一条声明的样式,为了易读性和便于快速编辑,建议将语句放在同一行

(2)在每个声明块的左括号前面添加空格,右括号应单独成行,最后应该插入一个空格

(3)用两个空格来代替制表符(tab),能在所有环境下获得一致展现。

(4)所有声明语句都应当以分号结尾。最后一条声明语句后面的分号是可选的,但是,如果省略这个分号,你的代码可能更易出错。

(5)对于以逗号分隔的属性值,每个逗号后面都应该插入一个空格

(6)不要在 rgb()、rgba()、hsl()、hsla() 或 rect() 值的内部的逗号后面插入空格。这样利于从多个属性值(既加逗号也加空格)中区分多个颜色值(只加逗号,不加空格)

(7)尽量使用简写形式的十六进制值,并且十六进制值应该小写。在扫描文档时,小写字符易于分辨,因为他们的形式更易于区分。

(8)尽量不给 0 值指定单位,例如,用 padding: 0; 代替 padding: 0px;。

(9)声明顺序

  • 1.位置属性(position, top, right, z-index, display, float等)
  • 2.大小(width, height, padding, margin)
  • 3.文字系列(font, line-height, letter-spacing, color- text-align等)
  • 4.背景(background, border等)
  • 5.其他(animation, transition等)

(10) 与<link>标签相比,@import执行比较慢,尽量不要使用import标签。可以使用多个<link>标签

<link rel="stylesheet" href="core.css">

<style> @import url("more.css"); </style>

(11)class命名

  • class 名称中只能出现小写字符和破折号(-,破折号应当用于相关 class 的命名)。(例如,.btn 和 .btn-danger)。
  • class 名称应当尽可能短,并且意义明确,但不要过度任意的简写。.btn 代表 button,但是 .s 不能表达任何意思。
  • 使用有意义的名称。使用有组织的或目的明确的名称,不要使用表现形式(presentational)的名称。
  • 基于最近的父 class 或基本(base) class 作为新 class 的前缀。
  • 使用 .js-* class 来标识行为(与样式相对),并且不要将这些 class 包含到 CSS 文件中。

(12)选择器

  • 对于通用元素使用 class ,这样利于渲染性能的优化。
  • 对于经常出现的组件,避免使用属性选择器(例如,[class^="..."])。浏览器的性能会受到这些因素的影响。
  • 选择器要尽可能短,并且尽量限制组成选择器的元素个数,建议不要超过 3 。
  • 只有在必要的时候才将 class 限制在最近的父元素内(也就是后代选择器)(例如,不使用带前缀的 class 时 -- 前缀类似于命名空间)。
展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部