筆記一：高效的可維護的,組件化的CSS

時間 2019-11-18

標籤筆記高效維護組件 css 欄目 CSS 简体版

原文原文鏈接

書寫高效CSScss

　　一、使用外聯樣式替代行間樣式或者內嵌樣式。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>
</head>
<body>
<p style="color: red">
...
</p>
</body>
</html>

　　　　不推薦使用內嵌樣式:ide

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

　　二、爲了兼容老版本的瀏覽器，建議使用link引入外部樣式表的方來代替@import導入樣式的方式。ui

　　　　不推薦@import導入方式:url

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

　　　　推薦引入外部樣式表方式:spa

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

　　三、使用繼承code

　　　　低效率的:orm

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

　　七、避免使用 !important

　　　　慎用寫法:

#news { background: #ddd !important; }

　　　　特定狀況下能夠使用如下方式提升權重級別:

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

書寫可維護的CSS樣式

　　一、在樣式表開頭添加一個註釋快，用以描述這個樣式表的建立日期、建立者、標記等備註信息。

/*
---------------------------------
Site: Site name
Author: Name
Updated: Date and time
Updated 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進行有意義的命名。

　　四、將關聯的樣式規則進行整合。

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

　　五、給樣式添加清晰的註釋。

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

如何管理整站的CSS文件？

組件化 CSS

一、將主樣式表拆分紅獨立的樣式文件。

　　　　爲何要拆分樣式文件?

　　　　　　更易於查找樣式規則.簡化維護，方便管理.還能夠針對某一頁面提供特定的樣式。

二、添加一個橋接樣式文件。

　　　　爲何要添加橋接樣式？

　　　　　　你能夠隨時添加或移除樣式而不須要修改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="bridging.css"
type="text/css」 media="screen, projection">
</head>
<body>
...
</body>
</html>

　　　　爲何要定義兩種媒體類型？

　　　　　　NN4不支持@import，故識別不到橋接樣式。

四、將(分離的)CSS文件導入橋接樣式中。

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

　　　　@imports 如何工做?

　　　　　　它將全部CSS規則從一個文件導入到另一個文件。@import 不能被老的瀏覽器所識別。

Hack-free CSS

　　處理諸如IE這樣煩人的瀏覽器的兼容性是咱們最頭疼的事兒之一。

　　不少朋友使用CSShack來解決這些問題，問題是當IE版本進行升級更替，改進對CSS的支持後，以前使用的hacks將會無效!

　　你是怎麼解決這個問題的呢？

　　　　如何在不使用CSShacks 的狀況下更新你的頁面.假如你想針對IE或者避開IE，你能夠使用條件註釋.」

　　條件註釋如何工做？

　　　　一、針對IE，建立一個新的樣式文件。

　　　　二、在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瀏覽器版本識別這個心的樣式，其它的瀏覽器將會完全忽略它。

　　爲何條件註釋是一個好的解決方案呢？

　　　　一、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]>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。