文档章节

Css编码规范

阿法
 阿法
发布于 2017/06/28 11:30
字数 716
阅读 1
收藏 0

(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 时 -- 前缀类似于命名空间)。

© 著作权归作者所有

阿法
粉丝 1
博文 17
码字总数 23853
作品 0
海淀
程序员
私信 提问
前端开发规范手册(命名、HTML、CSS、JS、ES6、React)

简介 前端开发规范手册(命名、HTML、CSS、JS、ES6、React)完整链接,欢迎给出您的宝贵意见; GitHub源码地址,要是觉得文档还能凑合着看,欢迎 ~ 不以规矩,不能成方圆。 对于团队而言,统...

baldwin
02/19
0
0
前端开发文档(参考手册,开源书籍)

前端开发文档 前端开发文档包含前端技术(HTML.CSS,JS)的参考手册,前端编码规范,以及整理前端开源的一些书籍。 访问地址:http://f2edocs.com 当前版本 V0.1 持续更新中... 参考、使用的项目...

郭小铭
2015/10/07
290
2
Web前端团队开发规范文档

为新项目写的一份规范文档, 分享给大家. 我想前端开发过程中, 无论是团队开发, 还是单兵做站, 有一份开发文档做规范, 对开发工作都是很有益的. 本文档由本人编写, 部分意见来源于网络, 以此感...

乐派电影
2014/04/11
172
0
twitter bootstrap的css编码规范

这篇twitter bootstrap的css编码规范对于团队开发很有参考意义。 http://codeguide.bootcss.com/#css

foodon
2014/10/29
0
0
小结(工作 + 生活)

今天早上出门去医院挂号,走到地铁忘记带钱,又折返回去拿钱包,挂好号了,走的时候却忘记把市民卡给双凤。一系列的不走心事情搞得我想死的心都有了。 想看些技术博客,看一页就没有耐心往下...

-波仔-
2016/08/02
17
0

没有更多内容

加载失败,请刷新页面

加载更多

Hystrix 资料简单梳理

Hystrix 资料简单梳理 状态 Hystrix不再处于活动开发阶段,目前处于维护模式。 Hystrix(版本1.5.18)足够稳定,可以满足Netflix对现有应用程序的需求。与此同时,我们的重点已转向更具适应性...

晨猫
19分钟前
1
0
黑群晖部署

mark 下有空在玩 U盘安装 将U盘id写入到启动配置文件中(syslinux.cfg) https://www.douban.com/note/518491129/ https://www.nas2x.com/threads/dsm-6-2-1-20190221.29/...

以谁为师
23分钟前
1
0
页面性能优化办法有哪些?

摘要: 性能是最重要的用户体验之一。 作者:浪里行舟 Fundebug经授权转载,版权归原作者所有。 引子 互联网有一项著名的8秒原则。用户在访问Web网页时,如果时间超过8秒就会感到不耐烦,如果...

Fundebug
23分钟前
0
0
arcgis api for js加载天地图

天地图有经纬度和墨卡托两种坐标系的切片 arcgis默认为墨卡托坐标系,可以切换二维/三维,加载经纬度切片时view需要设置wkid:4326

单线程生物
24分钟前
1
0
常用正则(含小程序验证)

小程序常用正则 使用样例 let roomNumber = that.data.roomNumber; if (roomNumber.length == 0) { wx.showToast({ title: '房间号不能为空', icon:......

whatwhowhy
26分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部