相关文章

  简书原文:https://www.jianshu.com/p/e87bfd27ff59

  我的前端规范——开篇:http://www.cnblogs.com/shcrk/p/9271561.html

  我的前端规范——HTML篇:http://www.cnblogs.com/shcrk/p/9271613.html

  我的前端规范——CSS篇:http://www.cnblogs.com/shcrk/p/9271608.html

  我的前端规范——JavaScript篇:http://www.cnblogs.com/shcrk/p/9271620.html

大纲

  前言
  1、css属性书写顺序
  2、css属性写法

前言

  规范对于一个项目来说是很重要的,统一的规范对代码的一致性、项目的质量、工作的协调都有很大的帮助,而且有时候可以规避很多意料不到的错误。
  当然,规范是死的,人是活的。我总结的前端规范是我认为对我来说比较适合的,我又认可的,所以我能比较好的接受和使用。但是,不同的团队,不同的项目需要遵守的规范也许就是不一样的。规范的作用是让项目的代码看起来更有统一性,让团队的协作更方便,因此,根据具体的情况制定统一的规范才是最合理的,而这里我给出的也只是我认为比较符合我风格和习惯的,至于具体的规范还是要依据具体的情况来总结制定。
  单独写成一篇的话篇幅很大,因此我会将我的总结写成:开篇、css、html、js四篇,让有需要的读者能够更方便的查找到想要的知识。

1、css属性书写顺序

  1、显示属性
  2、元素位置
  3、元素属性
  4、元素内容属性

  1. .header {
  2. /* 显示属性 */
  3. display || visibility
  4. list-style
  5. position
  6. top || right || bottom || left
  7. z-index
  8. clear
  9. float
  10.  
  11. /* 自身属性 */
  12. width
  13. max-width || min-width
  14. height
  15. max-height || min-height
  16. overflow || clip
  17. margin
  18. padding
  19. outline
  20. border
  21. background
  22.  
  23. /* 文本属性 */
  24. color
  25. font
  26. text-overflow
  27. text-align
  28. text-indent
  29. line-height
  30. white-space
  31. vertical-align
  32. cursor
  33. content
  34. }

2、css属性写法

  1、小图片(必须)sprite 合并(将需要用到的小图片全部放到一个大的图片上,通过定位来展示大图片上不同地方的小图片,从而减少图片占用的资源,加快网页加载的速度。)

  2、每个样式属性后加 ";",方便压缩工具“断句”。

  3、禁止将样式写为单行(单行显示不好注释,不好备注,这最后可以交给压缩工具处理)。

  4、禁止使用行内(inline)样式。

  5、禁止使用"*"来选择元素
    (别这样写,这样写是没有必要的,一些元素在浏览器中默认有margin或padding值,但是只是部分元素,没有必要将所有元素的margin、padding值都置为0。)

  1. * {
  2. margin: 0;
  3. padding: 0;
  4. }

  

  6、带前缀的属性
    当使用特定浏览器带有前缀的属性时,通过缩进的方式,让每个属性的值在垂直方向对齐,这样便于多行编辑。

  1. .selector {
  2. -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15);
  3. box-shadow: 0 1px 2px rgba(0,0,0,.15);
  4. }

  

  7、优化css选择器
    css选择器是从右边到左边进行匹配的。如:

  1. #header a {
  2. color: #444;
  3. }
  4. /*
  5. 浏览器会检查整个文档中的所有链接,然后浏览器并不仅仅检查每个链接的父元素,还要遍历
  6. 文档树去查找 id 为 header 的祖先元素,如果被评估的链接不是 header 的后代,那么浏览
  7. 器就要向上一级遍历知道文档的根节点。针对此问题,有以下几个解决方法:
  8. 7.1、避免使用通配规则
  9. 除了传统意义的通配选择符之外还包括相邻兄弟选择符, 子选择符, 后代选择符和属
  10. 性选择符。推荐id、class和标签选择符。
  11. 7.2、不要限定id选择符
  12. 页面中指定一个id只能对应一个元素,所以没有必要添加额外添加限定符,
  13. 如: div#header ,应该简化为: #header(提权的除外)。
  14. 7.3、不要限定类选择器
  15. 不要用具体的标签限定类选择符,而是根据实际情况对类名进行扩展。例如:
  16. ul.recommend ,改成 .recommend-list 或者 .list-recommend。
  17. 7.4、让规则越具体越好
  18. 尽量不要使用 ul li a 这样长的选择符,最好使用 .list-anchor 之类的选择符。
  19. 7.5、避免使用后代选择符
  20. 通常处理后代选择符开销最高,使用字选择符更高效,最好使用下一条代替。
  21. 7.6、避免使用标签子选择符
  22. 如果有如: #header > li > a,这样基于子标签的自选择符,那么应该使用一个
  23. class来关联每个元素如: .header-anchor。尽量使用具体的类代替子选择符。
  24. 7.7、命名比较短的词,或者缩写的不允许直接定义样式,如:.title,.hd,.bd,.body.
  25. 必须用上级节点进行限定,如:.recommend-mod .title
  26. */

  

  8、空格的使用,有些规则一定要执行,不仅是为了美观,同时是为了避免低版本的浏览器的bug
    选择器与( 之前必须要有空格
    属性名的 : 后必须要有空格
    属性名的 : 前禁止加空格

  1. .hotel-content {
  2. font-weight: bold;
  3. }

  

  9、多选择器规则之间必须换行
    当样式针对多个选择器时每个选择器占一行

  1. /* 推荐的写法 */
  2. a.btn,
  3. input.btn,
  4. input[type="button"] {
  5. ......
  6. }

  

  10、禁止向0后添加单位(只是为了统一)

  1. .obj {
  2. left: 0;
  3. }

  

我的前端规范——CSS篇的更多相关文章

  1. 我的前端规范——JavaScript篇

    相关文章 简书原文:https://www.jianshu.com/p/5918c283cdc3 我的前端规范——开篇:http://www.cnblogs.com/shcrk/p/9271561.h ...

  2. 我的前端规范——HTML篇

    相关文章 简书原文:https://www.jianshu.com/p/a46ff0504982 我的前端规范——开篇:http://www.cnblogs.com/shcrk/p/9271561.h ...

  3. 前端编码规范 -- css篇

    合理的避免使用ID 一般情况下ID不应该被应用于样式. ID的样式不能被复用并且每个页面中你只能使用一次ID. 使用ID唯一有效的是确定网页或整个站点中的位置. 尽管如此,你应该始终考虑使用class ...

  4. grunt前端打包——css篇

    [导读] 前端打包的工具有很多,我用的习惯的就是这个grunt,无论是你要在github上做开源,还是让自己的项目变得更易于维护,grunt都是首选. 前端打包的工具有很多,我用的习惯的就是这个gru ...

  5. 前端面试——css篇

    css盒子模型 在W3C模型中: 总宽度 = margin-left + border-left + padding-left + width + padding-right + border-rig ...

  6. 后端码农谈前端(CSS篇)第二课:CSS的5个来源

    0.浏览器默认样式 当你不为html元素设置任何样式时,显示在浏览器上的(比如:<b>元素会显示粗体.<p>元素有纵向margin.<h1>元素字号比<p&g ...

  7. 网站前端开发--css篇

    Ⅰ 全局:global.css 全局样式为全站公用,为页面样式基础,页面中必须包含. 结构:layout.css 页面结构类型复杂,并且公用类型较多时使用.多用在首页级页面和产品类页面中. 私有:st ...

  8. 后端码农谈前端(CSS篇)第八课:继承与层叠

    一.继承 继承:所谓CSS样式继承,就是子元素应用父元素的规则声明.(由这一特性,可将CSS属性分为可继承属性和非可继承属性.)可继承属性:属性值可由父元素继承给子元素的属性称之为可继承属性. 哪些属 ...

  9. 后端码农谈前端(CSS篇)第七课:定位与浮动

    一.定位: 1.定位的理解 (1)相对定位 相对定位是一个非常容易掌握的概念.如果对一个元素进行相对定位,它将出现在它所在的位置上.然后,可以通过设置垂直或水平位置,让这个元素"相对于&qu ...

随机推荐

  1. 【习题 8-14 UVA - 1616】Caravan Robbers

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 二分长度. 显然长度越长.就越不可能. 二分的时候.可以不用管精度. 直接指定一个二分次数的上限就好. 判断长度是否可行.直接用贪心 ...

  2. 【Uva 10163】Storage Keepers

    [Link]: [Description] 你有n(n≤100)个相同的仓库.有m(m≤30)个人应聘守卫,第i个应聘者的能力值 为Pi(1≤Pi≤1000).每个仓库只能有一个守卫,但一个守卫可以看 ...

  3. cocos2d-x cocoStudioUI编辑器导出文件的使用

    代码演示样例: UILayer* layer = UILayer::create(); layer ->addWidget(CCUIHELPER->createWidgetFromJson ...

  4. OpenStack_Swift源代码分析——ObjectReplicator源代码分析(1)

    1.ObjectorReplicator的启动 首先执行启动脚本 swift-init object-replicator start 此执行脚本的执行过程和ring执行脚本执行过程差点儿相同.找到s ...

  5. ajax嵌套ajax 可能出现问题 的解决办法

    ajax由于他的异步特性 在第一次请求中的循环中嵌套第二个ajax会数据会读不出来 第一种 描述:如果条件许可,把两次请求都放在服务端处理掉一起发回来,这些就在客户端只有一次ajax了 优点:代码放在 ...

  6. Flume的data flow(数据流)

    data flow描述了数据从产生,传输.处理并最终写入目标的一条路径. 数据的采集的流向!如下图所示.  

  7. (转)Tomcat目录结构

    首先来了解一下Tomcat5.5的目录结构: /bin:存放windows或Linux平台上启动和关闭Tomcat的脚本文件 /conf:存放Tomcat服务器的各种全局配置文件,其中包括server ...

  8. ToggleButton控件

    ToggleButton 两种状态 ·状态button     -继承自CompoundButton ·主要属性:-Android:textOn    -Android:textOff ·主要方法: ...

  9. animation-list -帧动画

    帧动画实现起来比较简单,今天接触到使用xml来创建帧动画,记录下来. 它说白了,其实就是动态的展示图片而已 1.在xml中定义帧动画,如下 <?xml version="1.0&quo ...

  10. Android .getRGB得到是负数,解决方案

    情景:ava.awt.color 下面的getRGB怎么得出的是负数???本来想通过getRGB得到一个整数,在另外的一个部分在根据这个整数构件一个color,因为参数规定只能能传整数!!!color ...