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

笔记一:高效的可维护的,组件化的CSS

时间:2015-06-28 15:22:22      阅读:140      评论:0      收藏:0      [点我收藏+]

标签:

书写高效CSS

  1、使用外联样式替代行间样式或者内嵌样式。

    不推荐使用行间样式:

<!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>

    不推荐使用内嵌样式:

<!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>

    推荐使用外联样式:

<!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>

  2、为了兼容老版本的浏览器,建议使用link引入外部样式表的方来代替@import导入样式的方式。

    不推荐@import导入方式:

<!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>

    推荐引入外部样式表方式:

<!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>

  3、使用继承

    低效率的:

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; }

    高效的:

body {
font-family: arial, helvetica, sans-serif; }
h1 {
font-family: georgia, times, serif; }

  4、使用 多重选择器

    低效率的:

h1 { color: #236799; }
h2 { color: #236799; }
h3 { color: #236799; }
h4 { color: #236799; }

    高效的:

h1, h2, h3, h4 { color: #236799; }

  5、使用 多重声明

    低效率的:

p { margin: 0 0 1em; }
p { background: #ddd; }
p { color: #666; }

    高效的:

p{
margin: 0 0 1em;
background: #ddd;
color: #666;
}

  6、使用 简记属性

    低效率的:

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;
}

    高效的:

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;
}

  7、避免使用 !important

    慎用写法:

#news { background: #ddd !important; }

    特定情况下可以使用以下方式提高权重级别:

#container #news { background: #ddd; }
body #container #news { background: #ddd; }

 

书写可维护的CSS样式

  1、在样式表开头添加一个注释快,用以描述这个样式表的创建日期、创建者、标记等备注信息。

/*
---------------------------------
Site: Site name
Author: Name
Updated: Date and time
Updated by: Name
---------------------------------
*/

  2、包括公用颜色标记。

/*
---------------------------------
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
---------------------------------
*/

  3、给ID和Class进行有意义的命名。

  4、将关联的样式规则进行整合。

#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 { ... }

  5、给样式添加清晰的注释。

/*
---------------------------------
header styles
---------------------------------
*/
#header { ... }
#header h1 { ... }
#header h1 img { ... }
#header form { ... }
/*
---------------------------------
navigation styles
---------------------------------
*/
#navigation { ... }

如何管理整站的CSS文件?

组件化 CSS

1、将主样式表拆分成独立的样式文件。

    为什么要拆分样式文件?

      更易于查找样式规则.简化维护,方便管理.还可以针对某一页面提供特定的样式。

2、添加一个桥接样式文件。

    为什么要添加桥接样式?

      你可以随时添加或移除样式而不需要修改HTML文档。

3、引入桥接样式文件。

<!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>

    为什么要定义两种媒体类型?

      NN4不支持@import,故识别不到桥接样式。

4、将(分离的)CSS文件导入桥接样式中。

@import ‘header.css’;
@import ‘content.css’;
@import ‘footer.css’;

    @imports 如何工作?

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

Hack-free CSS

  处理诸如IE这样烦人的浏览器的兼容性是我们最头疼的事儿之一。

  很多朋友使用CSShack来解决这些问题,问题是当IE版本进行升级更替,改进对CSS的支持后,之前使用的hacks将会无效!

  你是怎么解决这个问题的呢?

    如何在不使用CSShacks 的情况下更新你的页面.假如你想针对IE或者避开IE,你可以使用条件注释.”

  条件注释如何工作?

    1、针对IE,创建一个新的样式文件。

    2、在HTML文档的开头添加条件注释代码。

<!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>

    只有指定的IE浏览器版本识别这个心的样式,其它的浏览器将会彻底忽略它。

  为什么条件注释是一个好的解决方案呢?

    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

标签:

原文地址:http://www.cnblogs.com/raines/p/4605485.html

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