Zhao Tian 博客

高效、可维护、组件化的CSS

2018-1-10 13:38:40


一、高效CSS

(一)使用外链样式代替行内样式

不推荐行内样式

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Document</title>
  </head>
  <body>
    <p style="color:red">
      …
    </p>
  </body>
</html>

不推荐内嵌样式

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
      p{
        color:red;
      }
    </style>
  </head>
  <body>

  </body>
</html>

推荐使用外联样式

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="main.css">
  </head>
  <body>
    ...
  </body>
</html>

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

@import是CSS2.1提出的所以老的浏览器不支持,点击查看@import的兼容性。 @import和link在使用上会有一些区别,利用二者之间的差异,可以在实际运用中进行权衡。关于@import和link方式的比较有几篇文章可以拓展阅读:@import vs linkdon’t use @importFlash of Unstyled Content (FOUC)

不推荐@import导入方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style type="text/css">
    @import url("main.css");
</style>
</head>
<body>
...
</body>
</html>

推荐引用外部样式表方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
...
</body>
</html>

(三)使用继承

低效率的

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

(四)多重选择器

低效率的

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.jpg");
    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.jpg") no-repeat 0 100%;
    margin:1em 1em 0;
    padding:10px;
    border:1px solid red;
    color:#222222;
}

(七)避免使用!important

谨慎写法

#news{ background:#ddd !important;}

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

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

二、书写可维护的CSS

让后续维护你站点的人更容易理解你的样式代码

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

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

(二) 包括公用颜色标记

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

(三)给ID和Class进行有意义的命名

不推荐的命名方式

.green-box{...}
#big-text{...}

推荐使用的命名方式

.pullquote{...}
#introduction{...}

(四)将关联样式规则进行整合

#hearder{...}
#hearder h1{...}
#hearder h1 img{...}
#hearder from {...}

#navigation {...}
#navigation ul{...}
#navigation ul li{...}
#navigation ul li a{...}
#navigation ul li a:hover{...}

(五)给样式添加清晰的注释

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

三、组件化CSS

(一)、将主样式标拆分长独立的样式文件

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

(二)添加一个桥接样式文件

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

样式文件

(三)引用样式文件

样式文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="main.css" media="screen,projection">
</head>
<body>

</body>
</html>

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

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

(四)将分离的CSS文件导入桥接文件

微信截图_20180110120334

@import 'header.css';
@import 'content.css';
@import 'footer.css';

@import如何工作?

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

微信截图_20180110120334

微信截图_20180110120334

微信截图_20180110120334

四、Hack-free CSS

处理IE浏览器兼容性的问题

(一)针对IE,创建一个新的样式文件

微信截图_20180110120334

(二)在HTML文档开头添加条件注释

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="main.css">
    <!--[if IE 5]>
    <link rel="stylesheet" href="ie5.css">
    <![endif]-->
</head>
<body>
...
</body>
</html>

平常浏览器识别

微信截图_20180110120334

特定IE版本识别

微信截图_20180110120334

No hacks

特定的CSS规则仅出现在新的样式表里

文件分离

针对特定版本IE定义样式脱离了主样式表,以在IE浏览器升级更新对属性的支持时轻松的移除这些文件

针对性

可对不同的版本的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]>

修改时间 2018-1-31 15:05:51| 阅读(133) |评论(0) |返回首页

评论