码迷,mamicode.com
首页 > Web开发 > 详细

Mozilla推荐的CSS属性书写顺序及命名规则

时间:2014-07-24 17:07:25      阅读:337      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   java   color   使用   os   文件   

传说中的Mozilla推荐 

Java代码  bubuko.com,布布扣
  1. /* mozilla.org Base Styles 
  2.  * maintained by fantasai 
  3.  */  
  4. /* Suggested order: 
  5.  * display 
  6.  * list-style 
  7.  * position 
  8.  * float 
  9.  * clear 
  10.  * width 
  11.  * height 
  12.  * margin 
  13.  * padding 
  14.  * border 
  15.  * background 
  16.  * color 
  17.  * font 
  18.  * text-decoration 
  19.  * text-align 
  20.  * vertical-align 
  21.  * white-space 
  22.  * other text 
  23.  * content 
  24.  * 
  25.  */  
  26. ...  



来源:

Java代码  bubuko.com,布布扣
  1. http://www.mozilla.org/css/base/content.css  



在怿飞’s Blog的这篇文章里,又将上面的属性分成了三组:显示属性、自身属性和文本属性。在回复里,inG补充这还和浏览器的解析过程有关:浏览器先对DOM定位,然后解析自身属性,接着再解析内部对象。(没找到相关的英文资料,有知情者还望告知) 

在Mozilla官方,其实并没有推荐任何CSS书写顺序。很可能是某个开发者在阅读fantasai的这篇文章 mozilla.org Markup Reference 时,顺便对fantasai的CSS源文件产生了兴趣,因此才有了上面的发现。 
字母排序 

NETTUTS上时不时有些好文章,这不,前不久,Trevor Davis就分享了一篇:5 Ways to Instantly Write Better CSS. 这篇文章中,推荐CSS的属性按字母排序。 

优点是:简单,任何人只要遵守,一看就明白。 

缺点是:太简单,缺乏逻辑性。比如position, left, top等,这种紧关联的属性,如果都按字母排序,书写和维护起来都不方便。Andy Ford推荐的排序 

Andy Ford是HTML和CSS方面的专家,最近写了一篇文章:Order of the Day: CSS Properties. 文章推荐的CSS书写顺序为: 

Java代码  bubuko.com,布布扣
  1.  1. Display & Flow  
  2.  2. Positioning  
  3.  3. Dimensions  
  4.  4. Margins, Padding, Borders, Outline  
  5.  5. Typographic Styles  
  6.  6. Backgrounds  
  7.  7. Opacity, Cursors, Generated Content  
  8.   
  9. 例子:  
  10.   
  11. el {  
  12.     display: ;  
  13.     visibility: ;  
  14.     float: ;  
  15.     clear: ;  
  16.   
  17.     position: ;  
  18.     top: ;  
  19.     right: ;  
  20.     bottom: ;  
  21.     left: ;  
  22.     z-index: ;  
  23.   
  24.     width: ;  
  25.     min-width: ;  
  26.     max-width: ;  
  27.     height: ;  
  28.     min-height: ;  
  29.     max-height: ;  
  30.     overflow: ;  
  31.   
  32.     margin: ;  
  33.     margin-top: ;  
  34.     margin-right: ;  
  35.     margin-bottom: ;  
  36.     margin-left: ;  
  37.   
  38.     padding: ;  
  39.     padding-top: ;  
  40.     padding-right: ;  
  41.     padding-bottom: ;  
  42.     padding-left: ;  
  43.   
  44.     border: ;  
  45.     border-top: ;  
  46.     border-right: ;  
  47.     border-bottom: ;  
  48.     border-left: ;  
  49.   
  50.     border-width: ;  
  51.     border-top-width: ;  
  52.     border-right-width: ;  
  53.     border-bottom-width: ;  
  54.     border-left-width: ;  
  55.   
  56.     border-style: ;  
  57.     border-top-style: ;  
  58.     border-right-style: ;  
  59.     border-bottom-style: ;  
  60.     border-left-style: ;  
  61.   
  62.     border-color: ;  
  63.     border-top-color: ;  
  64.     border-right-color: ;  
  65.     border-bottom-color: ;  
  66.     border-left-color: ;  
  67.   
  68.     outline: ;  
  69.     list-style: ;  
  70.   
  71.     table-layout: ;  
  72.     caption-side: ;  
  73.     border-collapse: ;  
  74.     border-spacing: ;  
  75.     empty-cells: ;  
  76.   
  77.     font: ;  
  78.     font-family: ;  
  79.     font-size: ;  
  80.     line-height: ;  
  81.     font-weight: ;  
  82.     text-align: ;  
  83.     text-indent: ;  
  84.     text-transform: ;  
  85.     text-decoration: ;  
  86.     letter-spacing: ;  
  87.     word-spacing: ;  
  88.     white-space: ;  
  89.     vertical-align: ;  
  90.     color: ;  
  91.   
  92.     background: ;  
  93.     ;  
  94.     background-image: ;  
  95.     background-repeat: ;  
  96.     background-position: ;  
  97.   
  98.     opacity: ;  
  99.     cursor: ;  
  100.     content: ;  
  101.     quotes: ;  
  102.     }  



Andy的顺序大体上和fantasai推荐的顺序保持了一致,但细节上更具可操作性。 
SitePoint上还有个很热烈的讨论贴:How do you order your properties within a declaration block? 

我喜欢fantasai和Andy的书写顺序,但fantasai的顺序中,“自身”属性有点含混不清,Andy的则太细,难以记住。我觉得可以借鉴CSS 2.1 Specification中对CSS属性的分类,将Andy的顺序稍微调整下: 

   1. 影响文档流的属性(比如:display, position, float, clear, visibility, table-layout等) 
   2. 自身盒模型的属性(比如:width, height, margin, padding, border等) 
   3. 排版相关属性(比如:font, line-height, text-align, text-indent, vertical-align等等) 
   4. 装饰性属性(比如:color, background, opacity, cursor等) 
   5. 生成内容的属性(比如:content, list-style, quotes等) 

事情永远没那么简单,比如下面这些困扰: 

   1. 对于shorthand怎么处理?比如 border: 1px solid red; 其中border-width是和盒模型相关的,但border-color是装饰性的。如何组织呢? 
   2. 考虑到换肤功能,是否应该将color, background, border-color等和颜色相关的都放一块?以方便以后修改。 
   3. 对于hacks如何处理?单独放到css文件最后面,还是和hack的属性紧挨着好? 
   4. 维护同事的css文件时,对于新增加或有修改的属性,如何注释?如何书写? 
   5. 还有,考虑到CSS Sprite, 所有背景图的选择器都放在一起?不过这已经超出本文的话题了:CSS选择器内属性的顺序和组织。 
   6. 更进一步的讨论是:CSS文件内的结构组织,以及多个CSS文件的组织。 


CSS命名规则: 

  Css和其他程序一样,都是有作用域这个概念,有全局、类局部作用这些方式。 

  举个例子: 

  p{background:#f00;}/* 作用域 :全局 */ 

  .div p{color:#000;}/* 作用域:div类中*/ 

  介绍下Css几种编写方式和权重对比 

  1)标签:权值为0,0,0,1 

  2)类:权值为0,0,1,0 

  3)属性选择:权值为0,0,1,1 

  4)ID:权值为0,1,0,0 

  5)important的权值为最高1,0,0,0 

  相信大家在编写Css的时候,当项目比较大,内容比较多的时候,命名就是一件很头痛的事情,而且一个块里面要表现不同状态的样式 ,这是有掌握命名规则是一把利器,能让你工作起来事半功倍。大致如下:(转载自:http://www.cssforest.org/blog /index.php?id=143,大家可以去这里看,比较多的技术文章) 

  要避免当状态改变时名称失去意义,最常见的就是用于布局的类名,如“left”、“right”,当左边栏不再是左边栏的时候,“left”这个名就没有实际意义了。这与我们所推荐的 “命名要有意义”就相违背了,使用序号就更加有问题了。好像没错,不过有好长一段 时间都有个问题让我很烦恼,如果一个页面中同个模块出现一次以上,而且细节还不一样,那后面出现的名称应该叫什么呢?难道“one”、“two”就不是序 号?其实我们要避免遇到的情况就是当状态(表现)改变时,对应定义的类名不会失去意义。 

  所谓的状态(表现)改变,有几种情况: 

   1. HTML不变,样式定义改变。如果命名使用了表示某一状态的名称,如“red“、“font14“等,必定会引起定义与命名不符的情况,对后继的影响会造成比较大的影响。 
   2. 样式定义不变,HTML改变。HTML改变意味着类名可更换,也就是如果类名使用了表示某一状态的名称,反而更有利于修改。 
   3. 样式定义与HTML都改变。只需要考虑不要出现第一种情况的结果就可以了。 

  而实际情况并不是单纯的某一种情况,更多的时候是混杂着出现的。 
  规则 

  [ 模块前缀 ] _ 类型 _ ( 作用 | 状态 ) n _ [ 位置 n ] 

  图例说明: 

    * ( 必选 ):必需存在。 
    * [ 可选 ]:可根据需要选择。 
    * |:多选一。 
    * n:可有多个。 

  名词说明: 

  模块前缀 
    模块定义时使用的前缀。 
  类型 
    定义类的内容类型。如输入框、文本、段落等等。 
  作用 
    定义类的作用,用于对类型的补充。 
  状态 
    定义类的状态,用于对类型的补充。 
  位置 
    定义类所使用的位置,如首页、导航等等,不排除使用左、右这样的词,但应尽量避免。 
    * 每项都可有自己的一个缩写表,同一名称的缩写尽量统一。 
    * 所选用的单词应选择不过于具体表示某一状态(如颜色、大小等)的单词,以避免当状态改变时名称失去意义。 
    * 由不以数字开头的小写字母(a-z)、数字(0-9)组成。 
    * 确保类(.class)的重用性与对象(#id)的唯一性,id避免使用保留字。 

  例: 

Java代码  bubuko.com,布布扣
  1. 模块前缀:  
  2.   
  3.   * 弹出 pop  
  4.   * 公共 global,gb  
  5.   * 标题 title,tit  
  6.   * 提示 hint  
  7.   * 菜单 menu  
  8.   * 信息 info  
  9.   * 预览 pvw  
  10.   * Tips tips  
  11.   * 导航 nav  
  12.   
  13. 类型:  
  14.   
  15.   * 按钮 bt  
  16.   * 文本 tx  
  17.   * 段落 p  
  18.   * 图标 icon  
  19.   * input input  
  20.   * 颜色 color,c  
  21.   * 背景 bg  
  22.   * 边框 bor  
  23.   
  24. 作用:  
  25.   
  26.   * 设置 set  
  27.   * 添加 add  
  28.   * 删除 del  
  29.   * 操作 op  
  30.   * 密码 pw  
  31.   * 导入 inc  
  32.   
  33. 状态:  
  34.   
  35.   * 成功 suc  
  36.   * 失败 lost  
  37.   * 透明 tran  
  38.   
  39. 位置:  
  40.   
  41.   * 公共 gb  
  42.   * 边框 bor  
  43.   * 段落 p  
  44.   * 弹出 pop  
  45.   * 标题 title,tit  
  46.   * 菜单 menu  
  47.   * 内容 cont  
  48.   * 导航 nav  



中文解释 命名        中文解释         命名 
文本输入框 .input_tx 段落文本颜色        .c_tx_p 
密码输入框 .input_pw 相册弹出的设置层 .pop_set_photo 
登录密码输入框 .input_pw_login 日志设置成功提示 .hint_suc_blogset 
文本颜色 .c_tx 公共提示 .hint_gb 

问几个简单的问题,可以帮助我们完成命名: 

   1. “什么类型的定义?”——是个输入框,input。 
   2. “类型补充说明”——如果一个词说明不清楚,那么补充说明类型,文本输入框,input_tx。 
   3. “在哪使用?”——定义要使用的位置在哪?首页的搜索文本输入框,input_search_index。 

  结合“模块化”相关的方法去定义,其实所需要定义的名称并不需要很多。 如:“hint_tx”表示提示模块的文字定义,“hit_tx_hint”表示提示里文字强调的定义,至于是改变颜色还是加粗,这个就看不同提示模块的需要了。

Mozilla推荐的CSS属性书写顺序及命名规则,布布扣,bubuko.com

Mozilla推荐的CSS属性书写顺序及命名规则

标签:style   blog   http   java   color   使用   os   文件   

原文地址:http://www.cnblogs.com/ranran/p/3865472.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!