CSS代码规范

空格

  • 选择器 与 { 之间必须包含空格。
  • 列表型属性值 书写在单行时,, 后必须跟一个空格。
  • 属性名 与之后的 : 之间不允许包含空格, : 与 属性值 之间必须包含空格。

    margin: 0;

  • 、+、~ 选择器的两边各保留一个空格。

选择器

  • 当一个 rule 包含多个 selector 时,每个选择器声明必须独占一行。
  1. /* good */
  2. .post,
  3. .page,
  4. .comment {
  5. line-height: 1.5;
  6. }
  7. /* bad */
  8. .post, .page, .comment {
  9. line-height: 1.5;
  10. }
  • 如无必要,不得为 id、class 选择器添加类型选择器进行限定。
  • 选择器的嵌套层级应不大于 3 级,位置靠后的限定条件应尽可能精确。

属性书写顺序

同一 rule set 下的属性在书写时,应按功能进行分组,并以 Formatting Model(布局方式、位置) > Box Model(尺寸) > Typographic(文本相关) > Visual(视觉效果) 的顺序书写,以提高代码的可读性。

Formatting Model 相关属性包括:position / top / right / bottom / left / float / display / overflow 等

Box Model 相关属性包括:border / margin / padding / width / height 等

Typographic 相关属性包括:font / line-height / text-align / word-wrap 等

Visual 相关属性包括:background / color / transition / list-style 等

清楚浮动

当元素需要撑起高度以包含内部的浮动元素时,通过对伪类设置 clear 或触发 BFC 的方式进行 clearfix。尽量不使用增加空标签的方式。

值与单位

  • url() 函数中的路径不加引号。
  • font-family

    [强制] font-family 按「西文字体在前、中文字体在后」、「效果佳 (质量高/更能满足需求) 的字体在前、效果一般的字体在后」的顺序编写,最后必须指定一个通用字体族( serif / sans-serif )。

  1. h1 {
  2. font-family: "Helvetica Neue", Arial, "Hiragino Sans GB", "WenQuanYi Micro Hei", "Microsoft YaHei", sans-serif;
  3. }
  • font-weight 属性必须使用数值方式描述。

兼容性

  • 尽量使用简单的 属性 hack。
  1. .box {
  2. _display: inline; /* fix double margin */
  3. float: left;
  4. margin-left: 20px;
  5. }
  6. .container {
  7. overflow: hidden;
  8. *zoom: 1; /* triggering hasLayout */
  9. }

来自为知笔记(Wiz)

时间: 2024-10-11 04:31:27

CSS代码规范的相关文章

css代码规范问题重要的有几个

很多人刚开始接触的时候都会遇到很多困难,其中规范的书写格式也较为明显:今天为大家带来一些CSS代码规范的知识. 1.良好的命名规范 ID和class的命名尽可能短,并符合语义.多个单词的拼接用 '-' 符号链接,尽量使用小写字母. 2.代码缩写 CSS代码缩写可以提高你写代码的速度,精简你的代码量. li{font-family:Arial, Helvetica, sans-serif; font-size: 1.2em; line-height: 1.4em; padding-top:5px;

google的html、css代码规范(转)

看了一下google的html.css代码规范,简单的作下记录. 一.省略ur地址中的 http: 或 https: 的部分  , 在引用样式表文件.脚本文件.图片以及其它媒体文件时,都可以这样做,除非使用这两种协议都无法获取到资源,也就是说必须使用其它协议才能获取到资源的,就不能省略啦,只有http:和https:是可以省略的.这样做的好处是能减少文件的体积,而且还能避免一些相对url中混乱问题的产生. <!-- 不推荐 --> <script src="http://www

HTML和CSS代码规范

HTML代码规范 通过学习基本的HTML和CSS就能在浏览器上看到实际的效果,可是要写好的HTML,就不是那么容易了.这里将和大家分享HTML规范,希望大家读完之后都能够有所收获.本文将主要以下面三个部分展开: HTML整体结构 HTML代码格式 HTML内容语义 http://bootstrap.cn/p/codeguide.html  这里的规范也不错,有时间看看. 第一部分:HTML整体结构 1.HTML基础设施 (1)文件应以<!DOCTYPE.....>首行顶格开始,这句话告诉浏览器

【读书笔记】CSS代码规范

声明顺序 Positioning Box model Typographic Visual .declaration-order { /* Positioning */ position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 100; /* Box-model */ display: block; float: right; width: 100px; height: 100px; /* Typography */ f

web前端开发代码规范

1. 引言 对于一个多人团队来说,制定一个统一的规范是必要的,因为个性化的东西无法产生良好的聚合效果,规范化可以提高编码工作效率,使代码保持统一的风格,以便于代码整合和后期维护.本文档主要描述web项目开发中所使用的html.css.JavaScript等规范,请参与开发相关人员遵循,同时也请各位日后进行补充完善. 2. HTML/CSS规范 2.1 浏览器兼容 根据业务要求而定: 主流程测试:Chrome 30+.IE9+: 完整测试: Chrome 21.IE8+.360浏览器.微信webv

个人css编写规范

前言:最近在做微信小程序,因为公司小,就我一个人弄前端的东西,js和页面都是我来弄,结果那天后台的人看到我的js代码,说我的代码写得不规范,函数什么的都很乱,弄得我羞愧难当,幸亏没看我的css,其实我的css命名也很随意==!一直觉得自己css其实还是可以的,但是突然发现自己到现在的css还没有很规范,很多名称什么的还很随意,有的地方用驼峰命名,有的又用横杠,有的还会用下划线,真的太随意了,所以就上网搜了搜命名规范,改了两天终于把样式全改过来了.因此做个小结: 意义:感觉规范css代码是非常有意

编码规范之编写灵活、稳定、高质量的 HTML 和 CSS 代码的规范

不管有多少人共同参与同一项目,一定要确保每一行代码都像是同一个人编写的. 因此,编写灵活.稳定.高质量的 HTML 和 CSS 代码,是每一个技术人员的基本操守. HTML ************************************************************************ 语法 用两个空格来代替制表符(tab) -- 这是唯一能保证在所有环境下获得一致展现的方法. 嵌套元素应当缩进一次(即两个空格). 对于属性的定义,确保全部使用双引号,绝不要使用单

编写灵活、稳定、高质量的 HTML 和 CSS 代码的规范(转)

今天看了Bootstrap中文网关于编码规范的文章,觉得很受用,赶紧记下来. 首先是黄金定律:永远遵循同一套编码规范.不管有多少人共同参与同一项目,一定要确保每一行代码都像是同一个人编写的. HTML部分语法 用两个空格来代替制表符(tab) -- 这是唯一能保证在所有环境下获得一致展现的方法. 嵌套元素应当缩进一次(即两个空格) 对于属性的定义,确保全部使用双引号,绝不要使用单引号 不要在自闭(例如,<meta> 或 <img>)元素的尾部添加斜线 -- HTML5 规范中明确说

css的代码规范

放置的规范: 在标签内容体中书写css样式代码 标签放置在标签之中 格式规范: 选择器名称{属性名: 属性值: 属性名: 属性值:--} 选择器:即指定css样式作用在那些HTML标签上 代码规范: 属性名和属性值之间是键值对关系 属性名和属性值之间用":"连接,最后";"结尾 如果一个属性名有多个值,多个值之间用空格隔开 css注释:/注释内容/ 原文地址:https://www.cnblogs.com/liang-xp/p/12216061.html