[译]Efficient, maintainable CSS
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

[译]Efficient, maintainable CSS

on

  • 37,741 views

关于如何书写高效、可维护、组件化的CSS,翻译自Russ Weakley的《Efficient, maintainable CSS》 http://www.slideshare.net/maxdesign/efficient-maintainable-css-presentation

关于如何书写高效、可维护、组件化的CSS,翻译自Russ Weakley的《Efficient, maintainable CSS》 http://www.slideshare.net/maxdesign/efficient-maintainable-css-presentation

Statistics

Views

Total Views
37,741
Views on SlideShare
11,723
Embed Views
26,018

Actions

Likes
74
Downloads
736
Comments
18

202 Embeds 26,018

http://isd.tencent.com 8158
http://csshouse.net 5284
http://webteam.tencent.com 3408
http://www.webdesignba.com 1689
http://www.woaicss.com 1091
http://www.xyopen.com 758
http://www.soberma.com 479
http://css9.net 420
http://www.20ju.com 359
http://www.chujun.cn 345
http://www.kekaku.com 290
http://www.webjx.com 275
http://www.abseo.cn 214
http://www.bobd.cn 204
http://www.solagirl.net 180
http://www.poluoluo.com 180
http://www.iamwawa.cn 151
http://55u.me 148
http://www.zmool.com 124
http://koyoz.com 122
http://www.websbook.com 116
http://www.sangcen.com 115
http://www.koyoz.com 101
http://www.wwwued.com 101
http://www.fangyuqiang.com 95
http://static.slidesharecdn.com 88
http://www.css3html5.com 77
http://lahoo.com.cn 69
http://codelife.info 68
http://irockman.me 50
http://irockman.me 50
http://www.jb51.net 43
http://www.xh-css.cn 41
http://www.flywithmyzi.com 40
http://www.asktest.com 37
http://ygs.im 35
http://ce.sysu.edu.cn 31
http://www.xlnv.net 30
http://www.mouyao.com 28
http://20ju.com 27
http://www.taochengxi.com 26
http://www.webyuansu.cn 26
http://home.cnblogs.com 24
http://www.imjqy.com 23
http://bbs.bingyan.net 23
http://www.slideshare.net 23
http://tommyhu.cn 22
http://blog.bashanren.com 22
http://www.ljf.cn 21
http://pa.779web.com 21
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

15 of 18 Post a comment

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • 诸多非常有用的CSS实践
    Are you sure you want to
    Your message goes here
    Processing…
  • css
    Are you sure you want to
    Your message goes here
    Processing…
  • [译]Efficient, maintainable CSS
    Are you sure you want to
    Your message goes here
    Processing…
  • coool
    Are you sure you want to
    Your message goes here
    Processing…
  • 高效可维护的CSS
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

[译]Efficient, maintainable CSS Presentation Transcript

  • 1. 高效的 可维护的, 组件化的 【译】
  • 2. 你对CSS了解多少?
  • 3. “如何写出更加高效 的CSS呢? ”
  • 4. 让我们来看看 4个关键点
  • 5. 高效的CSS 可维护的CSS 组件化的CSS hack-free CSS
  • 6. 书写高效CSS
  • 7. 使用外联样式替代行间 样式或者内嵌样式.
  • 8. 不推荐使用行间样式::
  • 9. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <meta http-equiv="content-type" content="text <title>Page title</title> </head> <body> <p style="color: red"> ... </p> </body> </html>
  • 10. 不推荐使用内嵌样式::
  • 11. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <meta http-equiv="content-type" content="text <title>Page title</title> <style type="text/css" media="screen"> p { color: red; } </style> </head> <body> ... </body> </html>
  • 12. 推荐使用外联样式::
  • 13. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <meta http-equiv="content-type" content="text <title>Page title</title> <link rel="stylesheet" href="name.css" type="text/css" media="screen" /> < /head> <body> ... </body> </html>
  • 14. 为了兼容老版本的浏览器,建议使 用link引入外部样式表的方来代替 @import导入样式的方式. 译者注: @import是CSS2.1提出的所以老的浏览器不支持,点击查看 @import的兼容性。@import和link在使用上会有一些区别, 利用二者之间的差异,可以在实际运用中进行权衡。 关于@import和link方式的比较有几篇文章可以拓展阅读: @import vs link、don’t use @import 、 Flash of Unstyled Content (FOUC) .
  • 15. 不推荐@import导入方式::
  • 16. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <meta http-equiv="content-type" content="text <title>Page title</title> <style type="text/css" media="screen"> @import url("styles.css"); </style> </head> <body> ... </body> </html>
  • 17. 推荐引入外部样式表方式::
  • 18. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <meta http-equiv="content-type" content="text <title>Page title</title> <link rel="stylesheet" href="name.css" type="text/css" media="screen" /> </head> <body> ... </body> </html>
  • 19. 使用 继承
  • 20. 低效率的::
  • 21. p{ font-family: arial, helvetica, sans-serif; } #container { font-family: arial, helvetica, sans-serif; } #navigation { font-family: arial, helvetica, sans-serif; } #content { font-family: arial, helvetica, sans-serif; } #sidebar { font-family: arial, helvetica, sans-serif; } h1 { font-family: georgia, times, serif; }
  • 22. 高效的::
  • 23. body { font-family: arial, helvetica, sans-serif; }
  • 24. body { font-family: arial, helvetica, sans-serif; } h1 { font-family: georgia, times, serif; }
  • 25. 使用 多重选择器
  • 26. 低效率的::
  • 27. h1 { color: #236799; } h2 { color: #236799; } h3 { color: #236799; } h4 { color: #236799; }
  • 28. 高效的::
  • 29. h1, h2, h3, h4 { color: #236799; }
  • 30. 使用 多重声明
  • 31. 低效率的::
  • 32. p { margin: 0 0 1em; } p { background: #ddd; } p { color: #666; } 译者注: 对于十六进制颜色值,个人偏向于色值不缩写且英文字 母要大写的方式.
  • 33. 高效的::
  • 34. p { margin: 0 0 1em; background: #ddd; color: #666; }
  • 35. 使用 简记属性
  • 36. 低效率的::
  • 37. body { font-size: 85%; font-family: arial, helvetica, sans-serif; background-image: url(image.gif); background-repeat: no-repeat; background-position: 0 100%; margin-top: 1em; margin-right: 1em; margin-bottom: 0; margin-left: 1em; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; border-style: solid; border-width: 1px; border-color: red; color: #222222;
  • 38. 高效的::
  • 39. body { font: 85% arial, helvetica, sans-serif; background: url(image.gif) no-repeat 0 100%; margin: 1em 1em 0; padding: 10px; border: 1px solid red; color: #222; }
  • 40. 避免使用 !important
  • 41. 慎用写法::
  • 42. #news { background: #ddd !important; }
  • 43. 特定情况下可以使用 以下方式提高权重级别::
  • 44. #container #news { background: #ddd; } body #container #news { background: #ddd; }
  • 45. 那么,如何让(后续)维护你 站点的人更容易理解你的 样式代码呢?
  • 46. 书写可维护的CSS
  • 47. 在样式表开头添加一个注 释块,用以描述这个样式 表的创建日期、创建者、 标记等备注信息.
  • 48. /* --------------------------------- Site: Site name Author: Name Updated: Date and time Updated by: Name --------------------------------- */
  • 49. 包括公用颜色标记
  • 50. /* --------------------------------- COLORS Body background: #def455 Container background: #fff Main Text: #333 Links: #00600f Visited links: #098761 Hover links: #aaf433 H1, H2, H3: #960 H4, H5, H6: #000 --------------------------------- */
  • 51. 给ID和Class进行有意义 的命名
  • 52. 不推荐的命名方式::
  • 53. .green-box { ... } #big-text { ... }
  • 54. 推荐使用的命名方式::
  • 55. .pullquote {... } #introduction {... }
  • 56. 将关联的样式规则进行整 合
  • 57. #header { ... } #header h1 { ... } #header h1 img { ... } #header form { ... } #header a#skip { ... } #navigation { ... } #navigation ul { ... } #navigation ul li { ... } #navigation ul li a { ... } #navigation ul li a:hover { ... } #content { ... } #content h2 { ... } #content p { ... } #content ul { ... } #content ul li { ... }
  • 58. 给样式添加清晰的注释
  • 59. /* --------------------------------- header styles --------------------------------- */ #header { ... } #header h1 { ... } #header h1 img { ... } #header form { ... } /* --------------------------------- navigation styles --------------------------------- */ #navigation { ... }
  • 60. 接下来, 如何管理你整站 的CSS文件呢?
  • 61. 组件化 CSS
  • 62. 举个例子: 你的Html 文档引入了一个主样式表 HTML文档 主样式表
  • 63. 步骤一 将主样式表拆分成独立的样式文件 container.css HTML 文档 header.css content.css
  • 64. 为什么要拆分样式文件? 更易于查找样式规 则.简化维护,方便 管理.还可以针对某 一页面提供特定 的样式.
  • 65. 步骤二 添加一个桥接样式文件 HTML 文档 桥接样式文件
  • 66. 为什么要添加桥接样式? 你可以随时添加或移除样 式而不需要修改 HTML文档.
  • 67. 步骤三 引入桥接样式文件 HTML 文档 桥接样式文件
  • 68. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <meta http-equiv="content-type" content="text <title>Page title</title> <link rel="stylesheet" href="bridging.css" type="text/css” media="screen, projection"> </head> <body> ... </body> </html>
  • 69. 为什么要定义两种媒体类型? NN4不支持@import,故识别 不到桥接样式.
  • 70. 步骤四 将(分离的)CSS文件导入桥接 样式中 HTML 文档 桥接样式文件
  • 71. @import ‘header.css’; @import ‘content.css’; @import ‘footer.css’;
  • 72. @imports 如何工作? 它将所有CSS规则从一个文 件导入到另外一个文件. @import 不能被老的 浏览器所识别.
  • 73. 概述? HTML 文档 桥接样式文件
  • 74. 对于大型站点来 说,这是一个理 想的概念.
  • 75. header nav Home bridge1 footer home
  • 76. header nav Section 1 bridge2 footer Section 1
  • 77. header nav Section 2 bridge3 footer Section 2
  • 78. Hack-free CSS
  • 79. 处理诸如IE这样烦人的浏 览器的兼容性是我们最头 疼的事儿之一.
  • 80. 很多朋友使用CSS hack来解决这些问题.
  • 81. 问题是当IE版本进行升级 更替,改进对CSS的支持后, 之前使用的hacks将会无效!
  • 82. 你是怎么解决这个问题的呢?
  • 83. “我们要求你在不使用CSS hacks 的情况下更新你的 页面.假如你想针对IE或 者避开IE,你可以使用条 件注释.”
  • 84. 条件注释如何工作?
  • 85. 步骤一 针对IE,创建一个新的样 式文件
  • 86. header nav Home bridge1 footer home IE
  • 87. 步骤二 在HTML文档的开头添加条 件注释代码
  • 88. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <meta http-equiv="content-type" content="text <title>Page title</title> <link href="css/import1.css" rel="stylesheet" <!--[if IE 5]><link rel="stylesheet" href="ie5.css" type="text/css" media="screen"><![endif]--> </head> <body> ... </body> </html>
  • 89. 只有指定的IE浏览器版本 识别这个心的样式,其它 的浏览器将会彻底忽略它.
  • 90. header nav Home bridge1 footer home IE
  • 91. 平常的浏览器识别:
  • 92. header nav Home bridge1 footer home IE
  • 93. 特定IE版本识别:
  • 94. header nav Home bridge1 footer home IE
  • 95. 举个例子, 大多数浏览器会 将补白加进容器的宽度里, 但是IE5不会.这种情况下, IE5显示的是一个比较小的 容器.
  • 96. main.css (被包含IE5在内的所有浏览器识别)::
  • 97. #container { width: 600px; padding: 100px; }
  • 98. ie5.css (只有IE5识别)::
  • 99. #container { width: 800px; }
  • 100. 为什么条件注释是一个好的解决 方案呢?
  • 101. 1. No hacks 特定的CSS规则仅出现在新 的样式表里.
  • 102. 2. 文件分离 针对特定版本的IE定义的 样式脱离了主样式表,可 以在IE浏览器升级更新对 属性支持时轻松移除这些 文件.
  • 103. 3. 针对性 可对不同版本的IE浏览器有 针对性的进行相关属性的定 义。
  • 104. <!--[if IE]> <!--[if IE 5]> <!--[if IE 6]> <!--[if lt IE 6]> <!--[if lte IE 6]> <!--[if gt IE 6]> <!--[if gte IE 6]>
  • 105. 高效的 CSS 可维护的 CSS 组件化的 CSS hack-free CSS
  • 106. 作者: Russ Weakley http://www.maxdesign.com.au 翻译: Jeanne http://webteam.tencent.com