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. Python学习之for循环--输出1-100中的偶数和登录身份认证

    输出1-100中的偶数 效果图: 实现代码: for i in range(2,101,2): print(i,end = '\t') if(i == 34): print('\n') if (i = ...

  2. Hadoop 集群网络拓扑

  3. Linux User and Group Management

    linux is a multi-user and multitasking OS. In Linux, you can create any number of user account and g ...

  4. JosnRpcClient

    <?php /** * Simple JSON-RPC interface. */ namespace org; class JosnRpcClient{ protected $host; pr ...

  5. http://codeforces.com/gym/100623/attachments H题

    http://codeforces.com/gym/100623/attachments H题已经给出来的,包括后来添加的,都累加得到ans,那么从1-ans都是可以凑出来的,如果ans<a[n ...

  6. Redis 混合存储最佳实践指南

    Redis 混合存储实例是阿里云自主研发的兼容Redis协议和特性的云数据库产品,混合存储实例突破 Redis 数据必须全部存储到内存的限制,使用磁盘存储全量数据,并将热数据缓存到内存,实现访问性能与 ...

  7. global.fun.php

    <?php /**   所有公共函数文件*/ /**    序列化*/function _serialize($obj){    return base64_encode(gzcompress( ...

  8. Django项目:CRM(客户关系管理系统)--26--18PerfectCRM实现King_admin搜索关键字

    search_fields = ('name','qq',) 登陆密码设置参考 http://www.cnblogs.com/ujq3/p/8553784.html search_fields = ( ...

  9. TZ_12_Spring的RestTemplate

    1.Http客户端工具 HttpClient:HttpClient是Apache公司的产品,是Http Components下的一个组件. 特点: 基于标准.纯净的Java语言.实现了Http1.0和 ...

  10. TZ_05_Spring_Transaction的纯注解开发

    1.数据库配置 jdbcConfiguation.java 1>使用Spring的EL表达式配合@Value()注解 @Value("${jdbc.Driver}") pri ...