CSS规范
缩进
使用Tab缩进(相当于四个空格)
选择器与{之间必须包含空格,参1
属性名和之后的:不允许包含空格,:与属性值之间必须包含空格。
     例

列表性属性值在单行时,后必须跟一个空格。
     例:
          
对于超长的样式,在样式值得空格处或,后换行,建议按逻辑分组。
     例:
选择器
当用集合方式选择且有多个选择器时,建议声明单独写在一行(利于维护)
     例
>、+、-选择器的两边各留一个空格
  例
属性选择器中的值必须用双引号包围
     例
       
属性定义是同一类的写在同一行(参-1
     例
属性定义后必须以分号结尾(特别是最后一个)
如无必要,不得为 id、class 选择器添加类型选择器进行限定。
    说明:在性能和维护上,都有一定的影响
    例
         
1.使用 classes 而不是通用元素标签来优化渲染性能。(下图第891行和895行比较)
2.建议选择器的嵌套层级应不大于 3 级,位置靠后的限定条件应尽可能精确。(参1
3.避免在经常出现的组件中使用一些属性选择器 (例如,[class^="..."])。浏览器性能会受到这些情况的影响。
4.只在必要的情况下使用后代选择器 
     以上1和2的例子
          
属性简写
     在能够缩写的情况下,尽量使用缩写。
     如果需要重写属性时,尽量避免不必要的属性简写。
     例应该避免以下情况:
          margin:3px 5px;
          margin-left:8px;
属性书写顺序(参1参2ctrl+F:声明顺序)
  • 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 等
清除浮动
!important
     尽量不要使用!important
     在第三方环境(理如定义一个模块,模块中使用在线的文本编辑器,可以尝试使用改属性定义)
z-index
     暂时没有用到太复杂的,在使用该属性的时候标注即可
值与单位
数值(参1
     当为0到1之间的小数时,是否省略整数部分的0?
          例:opacity: .8;
     但是没有查到省略小数点前零的原因,所以这里就暂时还是写上零
url()
     url()中的路径不加引号
          例:background: url(bg.png);
    不使用绝对路径可省去的协议名
          例:background: url(//baidu.com/img/bg.png);
                 //意思为http://协议,有的资料说在IE中会请求两次
长度
     省略零的单位
          padding: 0 8px;
颜色
     RGB颜色值必须使用16进制的标记符号#RRGGBB。
     带有alpha(透明)的颜色信息值使用rgba()。
     能使用缩写的时候使用缩写形式
     不允许使用颜色名,rgb()
     保证16进制的标记符号大小写统一。(建议大写)
2D位置(background-position)
     必须给出background-position的两个方向的值。
          因为默认为0% 0%,但是只给一个方向的值,另一方向会默认为center属性值。
文字
     font-family属性应该使用英文
          例:font-family:"Microfoft YaHei";
     font-size属性
          不得小于12px
          原因:windows文字显示效果差,不易辨认
     font-weight
          属性值用数字表示。(100~900)
          实际只有400和700两个档分别等于normal和bold。
          已有浏览器支持600属性值。(参1:字体漫谈
     line-height应该使用相对值,因为会根据font-size值进行计算。
其它
属性前缀
     兼容性写法属性由长到短冒号对其。
          例子
            
    

前端规范2-CSS规范的更多相关文章

  1. 前端规范之CSS规范(Stylelint)

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

  2. 前端开发规范:命名规范、html 规范、css 规范、js 规范

    上周小组的培训内容是代码可读性艺术,主要分享如何命名.如何优化代码排版,如何写好的注释.我们都知道写出优雅的代码是成为大牛的必经之路. 下面感谢一位前端开发小伙伴总结的前端开发规范,通过学习相关开发规 ...

  3. 前端开发规范:命名规范、HTML 规范、CSS 规范、JavaScript 规范

    一个好的程序员肯定是要能书写可维护的代码,而不是一次性的代码,怎么能让团队当中其他人甚至一段时间时候你再看你某个时候写的代码也能看懂呢,这就需要规范你的代码了.我是有一点强迫症的人,上周我们后端给我了 ...

  4. 前端开发规范之命名规范、html规范、css规范、js规范

    在学习编程的时候,每次看到那些整齐规范的代码,心里顿时对这个程序员表示点点好感,有时,比如看到自己和朋友写的代码时,那阅读起来就是苦不堪言,所以,一些基本的开发规范是必须的,是为了自己方便阅读代码,也 ...

  5. 前端基础系列——CSS规范(文章内容为转载)

    原作者信息 作者:词晖 链接:http://www.zhihu.com/question/19586885/answer/48933504 来源:知乎 著作权归原作者所有,转载请联系原作者获得授权. ...

  6. CSS书写规范、命名规范、网易CSS框架NEC

    网易CSS框架NEC:http://nec.netease.com/ NEC框架的CSS规范:  CSS规范 - 分类方法 CSS规范 - 命名规则 CSS规范 - 代码格式 CSS规范 - 优化方案 ...

  7. 前端编码规范之CSS

    "字是门面书是屋",我们不会去手写代码,但是敲出来的代码要好看.有条理,这还必须得有一点约束~ 团队开发中,每个人的编码风格都不尽相同,有时候可能存在很大的差异,为了便于压缩组件对 ...

  8. 前端css规范

    文章整理了Web前端开发中的各种CSS规范,包括文件规范.注释规范.命名规范.书写规范.测试规范等. 一.文件规范 1.文件均归档至约定的目录中(具体要求以豆瓣的CSS规范为例进行讲解): 所有的CS ...

  9. 前端开发人员要注意的css规范,css命名。

    刚工作的时候也没注意关于css的规则,根据自己的心情想怎么用就怎么用,完成工作就好不会考虑代码的可读性,加载的性能,现在身为前端的一员就要有程序员的自我修养(嘿嘿,是不是很有责任感啊). 废话不多说, ...

  10. Web前端开发CSS规范总结

    作为Web前端开发必备语言,CSS为大家广为熟知,今天就跟大家分享下CSS规范总结,Web前端的小伙伴们看过来吧! CSS样式的权值(权重) 权值等级的定义 第一等:代表内联样式,如: style=” ...

随机推荐

  1. int 13h,磁盘中断

    直接磁盘服务(Direct Disk Service——INT 13H)  00H —磁盘系统复位 01H —读取磁盘系统状态 02H —读扇区 03H —写扇区 04H —检验扇区 05H —格式化 ...

  2. 原生js 判断变量是一个数组

    const arr = [] // 1. 最简单 ES5+ Array.isArray(arr) // 2. 兼容性好的方法,也很准确 Object.prototype.toString.call(a ...

  3. js 之观察者模式

    观察者模式又叫发布订阅模式(Publish/Subscribe),它定义了一种一对多的关系,让多个观察者对象同时监听某一个主题对象,这个主题对象的状态发生变化时就会通知所有的观察者对象,使得它们能够自 ...

  4. StopWatch 监控Java代码运行时间和分析性能

    背景 有时我们在做开发的时候需要记录每个任务执行时间,或者记录一段代码执行时间,最简单的方法就是打印当前时间与执行完时间的差值,然后这样如果执行大量测试的话就很麻烦,并且不直观,如果想对执行的时间做进 ...

  5. react-native warn Failed to connect to development server using "adb reverse":

    react-native环境搭建中的问题 本文环境说明:开发环境:window10专业版,目标平台:Android react: , react-native: java: 1.8.0_221 pyt ...

  6. 用惯了jquery, 想用angularjs 还真不好理解

    jquery 比较直白,什么都是操作dom 节点. angularjs 就好比 thinkphp, ci 等框架,有自己约定的格式和方式.需要遵循它的规则,研究中... 比如说我,用了很长事件的jqu ...

  7. c++设计模式:策略模式

    1.主要思想:例如针对不同的算法,创建不同的类. #include <iostream> using namespace std; // The abstract strategy cla ...

  8. 深入了解MVC(转)

    MVC无人不知,可很多程序员对MVC的概念的理解似乎有误,换言之他们一直在错用MVC,尽管即使如此软件也能被写出来,然而软件内部代码的组织方式却是不科学的,这会影响到软件的可维护性.可移植性,代码的可 ...

  9. 前端js框架引入管理bundle.js

    最先在ionic中看到bundle.js,,,然而它不是一个框架

  10. navicat修改mysql用户密码,前提是能登陆

    幸亏之前已经连上了数据库后边才忘记密码