当前位置:Gxlcms > html代码 > Mozilla推荐的CSS属性书写顺序及命名规则_html/css_WEB-ITnose

Mozilla推荐的CSS属性书写顺序及命名规则_html/css_WEB-ITnose

时间:2021-07-01 10:21:17 帮助过:4人阅读

传说中的Mozilla推荐

Java代码

  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代码

  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代码

  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. el {
  10. display: ;
  11. visibility: ;
  12. float: ;
  13. clear: ;
  14. position: ;
  15. top: ;
  16. right: ;
  17. bottom: ;
  18. left: ;
  19. z-index: ;
  20. width: ;
  21. min-width: ;
  22. max-width: ;
  23. height: ;
  24. min-height: ;
  25. max-height: ;
  26. overflow: ;
  27. margin: ;
  28. margin-top: ;
  29. margin-right: ;
  30. margin-bottom: ;
  31. margin-left: ;
  32. padding: ;
  33. padding-top: ;
  34. padding-right: ;
  35. padding-bottom: ;
  36. padding-left: ;
  37. border: ;
  38. border-top: ;
  39. border-right: ;
  40. border-bottom: ;
  41. border-left: ;
  42. border-width: ;
  43. border-top-width: ;
  44. border-right-width: ;
  45. border-bottom-width: ;
  46. border-left-width: ;
  47. border-style: ;
  48. border-top-style: ;
  49. border-right-style: ;
  50. border-bottom-style: ;
  51. border-left-style: ;
  52. border-color: ;
  53. border-top-color: ;
  54. border-right-color: ;
  55. border-bottom-color: ;
  56. border-left-color: ;
  57. outline: ;
  58. list-style: ;
  59. table-layout: ;
  60. caption-side: ;
  61. border-collapse: ;
  62. border-spacing: ;
  63. empty-cells: ;
  64. font: ;
  65. font-family: ;
  66. font-size: ;
  67. line-height: ;
  68. font-weight: ;
  69. text-align: ;
  70. text-indent: ;
  71. text-transform: ;
  72. text-decoration: ;
  73. letter-spacing: ;
  74. word-spacing: ;
  75. white-space: ;
  76. vertical-align: ;
  77. color: ;
  78. background: ;
  79. ;
  80. background-image: ;
  81. background-repeat: ;
  82. background-position: ;
  83. opacity: ;
  84. cursor: ;
  85. content: ;
  86. quotes: ;
  87. }



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代码

  1. 模块前缀:
  2. * 弹出 pop
  3. * 公共 global,gb
  4. * 标题 title,tit
  5. * 提示 hint
  6. * 菜单 menu
  7. * 信息 info
  8. * 预览 pvw
  9. * Tips tips
  10. * 导航 nav
  11. 类型:
  12. * 按钮 bt
  13. * 文本 tx
  14. * 段落 p
  15. * 图标 icon
  16. * input input
  17. * 颜色 color,c
  18. * 背景 bg
  19. * 边框 bor
  20. 作用:
  21. * 设置 set
  22. * 添加 add
  23. * 删除 del
  24. * 操作 op
  25. * 密码 pw
  26. * 导入 inc
  27. 状态:
  28. * 成功 suc
  29. * 失败 lost
  30. * 透明 tran
  31. 位置:
  32. * 公共 gb
  33. * 边框 bor
  34. * 段落 p
  35. * 弹出 pop
  36. * 标题 title,tit
  37. * 菜单 menu
  38. * 内容 cont
  39. * 导航 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”表示提示里文字强调的定义,至于是改变颜色还是加粗,这个就看不同提示模块的需要了。

人气教程排行