Your SlideShare is downloading. ×
0
高效的
可维护的, 组件化的




             【译】
你对CSS了解多少?
“如何写出更加高效
 的CSS呢?
        ”
让我们来看看
4个关键点
高效的CSS
可维护的CSS
组件化的CSS
hack-free CSS
书写高效CSS
使用外联样式替代行间
样式或者内嵌样式.
不推荐使用行间样式::
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
...
不推荐使用内嵌样式::
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
...
推荐使用外联样式::
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
...
为了兼容老版本的浏览器,建议使
用link引入外部样式表的方来代替
@import导入样式的方式.
    译者注:
    @import是CSS2.1提出的所以老的浏览器不支持,点击查看
    @import的兼容性。@import和li...
不推荐@import导入方式::
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
...
推荐引入外部样式表方式::
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
...
使用 继承
低效率的::
p{
font-family: arial, helvetica, sans-serif; }

#container {
font-family: arial, helvetica, sans-serif; }

#navigation {
...
高效的::
body {
font-family: arial, helvetica, sans-serif; }
body {
font-family: arial, helvetica, sans-serif; }

h1 {
font-family: georgia, times, serif; }
使用 多重选择器
低效率的::
h1 { color: #236799; }
h2 { color: #236799; }
h3 { color: #236799; }
h4 { color: #236799; }
高效的::
h1, h2, h3, h4 { color: #236799; }
使用 多重声明
低效率的::
p { margin: 0 0 1em; }

p { background: #ddd; }

p { color: #666; }



                     译者注:
                     对于十六...
高效的::
p
{
    margin: 0 0 1em;
    background: #ddd;
    color: #666;
}
使用 简记属性
低效率的::
body
{
       font-size: 85%;
       font-family: arial, helvetica, sans-serif;
       background-image: url(image.gif);
 ...
高效的::
body
{
       font: 85% arial, helvetica, sans-serif;
       background: url(image.gif) no-repeat 0 100%;
       margin: 1...
避免使用 !important
慎用写法::
#news { background: #ddd !important; }
特定情况下可以使用
以下方式提高权重级别::
#container #news { background: #ddd; }

body #container #news { background: #ddd; }
那么,如何让(后续)维护你
站点的人更容易理解你的
样式代码呢?
书写可维护的CSS
在样式表开头添加一个注
释块,用以描述这个样式
表的创建日期、创建者、
标记等备注信息.
/*
---------------------------------
Site:             Site name
Author:                    Name
Updated:                 ...
包括公用颜色标记
/*
---------------------------------
COLORS
Body background:                    #def455
Container background:             ...
给ID和Class进行有意义
的命名
不推荐的命名方式::
.green-box { ... }
#big-text { ... }
推荐使用的命名方式::
.pullquote {... }
#introduction {... }
将关联的样式规则进行整
合
#header { ... }
#header h1 { ... }
#header h1 img { ... }
#header form { ... }
#header a#skip { ... }

#navigation { ... }...
给样式添加清晰的注释
/*
---------------------------------
header styles
---------------------------------
*/

#header { ... }
#header h1 { ... ...
接下来, 如何管理你整站
     的CSS文件呢?
组件化 CSS
举个例子:
你的Html 文档引入了一个主样式表




   HTML文档    主样式表
步骤一
将主样式表拆分成独立的样式文件


            container.css


  HTML 文档
              header.css


            content.css
为什么要拆分样式文件?

   更易于查找样式规
   则.简化维护,方便
   管理.还可以针对某
     一页面提供特定
     的样式.
步骤二
添加一个桥接样式文件



  HTML 文档   桥接样式文件
为什么要添加桥接样式?

你可以随时添加或移除样
式而不需要修改
HTML文档.
步骤三
引入桥接样式文件



 HTML 文档   桥接样式文件
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
...
为什么要定义两种媒体类型?

NN4不支持@import,故识别
        不到桥接样式.
步骤四
将(分离的)CSS文件导入桥接
样式中

 HTML 文档   桥接样式文件
@import ‘header.css’;
@import ‘content.css’;
@import ‘footer.css’;
@imports 如何工作?

它将所有CSS规则从一个文
件导入到另外一个文件.
@import 不能被老的
浏览器所识别.
概述?


 HTML 文档   桥接样式文件
对于大型站点来
说,这是一个理
想的概念.
header



                  nav
Home   bridge1

                 footer



                 home
header



                        nav
Section 1   bridge2

                       footer



                      Section 1
header



                        nav
Section 2   bridge3

                       footer



                      Section 2
Hack-free CSS
处理诸如IE这样烦人的浏
览器的兼容性是我们最头
疼的事儿之一.
很多朋友使用CSS
hack来解决这些问题.
问题是当IE版本进行升级
更替,改进对CSS的支持后,
之前使用的hacks将会无效!
你是怎么解决这个问题的呢?
“我们要求你在不使用CSS
hacks 的情况下更新你的
页面.假如你想针对IE或
者避开IE,你可以使用条
件注释.”
条件注释如何工作?
步骤一
针对IE,创建一个新的样
式文件
header



                  nav
Home   bridge1

                 footer



                 home



                   IE
步骤二
在HTML文档的开头添加条
件注释代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
...
只有指定的IE浏览器版本
识别这个心的样式,其它
的浏览器将会彻底忽略它.
header



                  nav
Home   bridge1

                 footer



                 home



                   IE
平常的浏览器识别:
header



                  nav
Home   bridge1

                 footer



                 home



                   IE
特定IE版本识别:
header



                  nav
Home   bridge1

                 footer



                 home



                   IE
举个例子, 大多数浏览器会
将补白加进容器的宽度里,
但是IE5不会.这种情况下,
IE5显示的是一个比较小的
容器.
main.css (被包含IE5在内的所有浏览器识别)::
#container
{
      width: 600px;
      padding: 100px;
}
ie5.css (只有IE5识别)::
#container { width: 800px; }
为什么条件注释是一个好的解决
方案呢?
1. No hacks
特定的CSS规则仅出现在新
的样式表里.
2. 文件分离
针对特定版本的IE定义的
样式脱离了主样式表,可
以在IE浏览器升级更新对
属性支持时轻松移除这些
文件.
3. 针对性
可对不同版本的IE浏览器有
针对性的进行相关属性的定
义。
<!--[if IE]>
<!--[if IE 5]>
<!--[if IE 6]>
<!--[if lt IE 6]>
<!--[if lte IE 6]>
<!--[if gt IE 6]>
<!--[if gte IE 6]>
高效的 CSS
可维护的 CSS
组件化的 CSS
hack-free CSS
作者: Russ Weakley
     http://www.maxdesign.com.au

翻译: Jeanne
     http://webteam.tencent.com
Upcoming SlideShare
Loading in...5
×

高效率的、可维护的Css

5,493

Published on

Css 大家可以借鉴一二

Published in: Education, Technology
3 Comments
14 Likes
Statistics
Notes
  • easy to understand!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • 哈哈。还浪费空间呢下次发布前先搜索
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • http://www.slideshare.net/jeannewoo/efficient-maintainable-css-2721388
    这里不是有吗?您是诚心要浪费slideshare的空间吧
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
5,493
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
98
Comments
3
Likes
14
Embeds 0
No embeds

No notes for slide

Transcript of "高效率的、可维护的Css"

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

    Clipping is a handy way to collect important slides you want to go back to later.

×