空格

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

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

选择器

  • 当一个 rule 包含多个 selector 时,每个选择器声明必须独占一行。
/* good */

.post,

.page,

.comment {

line-height:1.5;

}

/* bad */

.post,.page,.comment {

line-height:1.5;

}

  • 如无必要,不得为 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 )。

h1 {

font-family:"Helvetica Neue",Arial,"Hiragino Sans GB","WenQuanYi Micro Hei","Microsoft YaHei", sans-serif;

}
  • font-weight 属性必须使用数值方式描述。

兼容性

  • 尽量使用简单的 属性 hack。
.box {

_display:inline;/* fix double margin */

float: left;

margin-left:20px;

}

.container {

overflow: hidden;

*zoom:1;/* triggering hasLayout */

}

bhaltair

CSS代码规范的更多相关文章

  1. web前端代码规范——css代码规范

    Bootstrap CSS编码规范 语法 用两个空格来代替制表符(tab) -- 这是唯一能保证在所有环境下获得一致展现的方法. 为选择器分组时,将单独的选择器单独放在一行. 为了代码的易读性,在每个 ...

  2. 个人css编写规范

    前言:最近在做微信小程序,因为公司小,就我一个人弄前端的东西,js和页面都是我来弄,结果那天后台的人看到我的js代码,说我的代码写得不规范,函数什么的都很乱,弄得我羞愧难当,幸亏没看我的css,其实我 ...

  3. 项目Alpha冲刺——代码规范、冲刺任务与计划

    作业要求 这个作业属于哪个课程 软件工程1916-W(福州大学) 这个作业要求在哪里 项目Alpha冲刺 团队名称 基于云的胜利冲锋队 项目名称 云评:高校学生成绩综合评估及可视化分析平台 这个作业的 ...

  4. dataway_代码规范

    无论何时无论何地,只要写代码,请遵从这样的规范. ----------------------------------------------------------------- css代码规范. ...

  5. Web 前端开发代码规范(基础)

    一. 引言 对于一个多人团队来说,制定一个统一的规范是必要的,因为个性化的东西无法产生良好的聚合效果,规范化可以提高编码工作效率,使代码保持统一的风格,以便于代码整合和后期维护. 二. HTML/CS ...

  6. 前端规范之JS代码规范(ESLint + Prettier)

    代码规范是软件开发领域经久不衰的话题,几乎所有工程师在开发过程中都会遇到或思考过这一问题.而随着前端应用的大型化和复杂化,越来越多的前端团队也开始重视代码规范.同样,前段时间,笔者所在的团队也开展了一 ...

  7. 使用BEM命名规范来组织CSS代码

    BEM 是 Block(块) Element(元素) Modifier(修饰器)的简称 使用BEM规范来命名CSS,组织HTML中选择器的结构,利于CSS代码的维护,使得代码结构更清晰(弊端主要是名字 ...

  8. css书写规范以及如何写出赏心悦目的代码

    css书写规范: 1. 编码统一为utf-8;2. 协作开发及分工: i根据各个模块, 同时根据页面相似程序, 事先写好大体框架文件,同时根据页面相似程序,事先写好大体框架文件.共用css文件base ...

  9. CSS-01 CSS代码标准和规范

    一:代码规范 1.所有的书写都是在英文半角下进行 2.统一用table键进行缩进 3.属性值必须带引号(单引和双引都可以) 4.p,dt,h标签里不能嵌套块属性标签 5.a标签不能嵌套a 二:文件命名 ...

随机推荐

  1. SQL Server 2014聚集列存储索引

    转发请注明引用和原文博客(http://www.cnblogs.com/wenBlog) 简介 之前已经写过两篇介绍列存储索引的文章,但是只有非聚集列存储索引,今天再来简单介绍一下聚集的列存储索引,也 ...

  2. Oracle常用SQL函数整理

    --返回ASCII码select  ASCII('A') "A的ASCII码" ,ASCII('a') "a的ASSCII码" from dual ; --反向 ...

  3. Linux根文件系统分析之init和busybox

    Hi,大家好!我是CrazyCatJack.今天给大家讲解Linux根文件系统的init进程和busybox的配置及编译. 先简单介绍一下,作为一个嵌入式系统,要想在硬件上正常使用的话.它的软件组成大 ...

  4. weinre- 调试移动端页面

    相信很多前端的小伙伴一定会遇到一个问题, 比如我编写完一个页面,某个地方需要进行调整细节或者是哪个地方怎么调整都不对,在pc端还好,有google,firefox之类可以调节页面的工具,虽说这些工具有 ...

  5. 写个Fragment方便的抽象基类 BaseFragment

    package com.zb.zhihuianyang.base; import android.app.Activity; import android.os.Bundle; import andr ...

  6. 2DToolkit官方文档中文版打地鼠教程(三):Sprite Collections 精灵集合

    这是2DToolkit官方文档中 Whack a Mole 打地鼠教程的译文,为了减少文中过多重复操作的翻译,以及一些无必要的句子,这里我假设你有Unity的基础知识(例如了解如何新建Sprite等) ...

  7. 如何快速开发SPA应用

    前言 web早已经进入了2.0时代了,如今的网页大有往系统应用级别的方向发展的趋势,再也不是以前的简单展示信息的界面了.如今很多webapp已经做到了原生应用的功能,并且运用自身的优势逐步取代之.HT ...

  8. 使用 SecurityManager 和 Policy File 管理 Java 程序的权限

    参考资料 该文中的内容来源于 Oracle 的官方文档.Oracle 在 Java 方面的文档是非常完善的.对 Java 8 感兴趣的朋友,可以从这个总入口 Java SE 8 Documentati ...

  9. 写自己的socket框架(二)

    1.开始正常监听以后,就要开始接受数据了,整体流程图如下: 2.上一节看到我们在程序初始化的时候,初始化了很多个SocketConnection,用于管理客户端的链接,那应用层如何来操作,又什么时候来 ...

  10. 如何用 MEF 扩展应用程序

    最近在写一篇关于如何扩展 Visual Studio 编辑器的文章时,用到了 MEF,因此打算写一篇文章提一下这个技术点.本篇文章并不打算详细介绍 MEF,只是一个最简单的入门,相信您在阅读本篇文章后 ...