CSS優化技巧總整理

談CSS優化

使用重置樣式表(reset css)

為瞭解決不同瀏覽器對css渲染方式不同的問題，可以是用重置樣式表來解決。重置樣式來保證瀏覽器渲染的結果是一致的，以下是Yahoo YUI所推薦使用的重置表： http://yui.yahooapis.com/3.4.1/build/cssreset/cssreset-min.css

/* YUI 3.4.1 (build 4118) Copyright 2011 Yahoo! Inc. All rights reserved. Licensed under the BSD License. http://yuilibrary.com/license/ */ html { color: #000; background: #FFF } body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td { margin: 0; padding: 0 } table { border-collapse: collapse; border-spacing: 0 } fieldset, img { border: 0 } address, caption, cite, code, dfn, em, strong, th, var { font-style: normal; font-weight: normal } ol, ul { list-style: none } caption, th { text-align: left } h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: normal } q:before, q:after { content: '' } abbr, acronym { border: 0; font-variant: normal } sup { vertical-align: text-top } sub { vertical-align: text-bottom } input, textarea, select { font-family: inherit; font-size: inherit; font-weight: inherit } input, textarea, select {* font-size: 100% } legend { color: #000 }

這樣的方法讓我們可以保證瀏覽器之間的初始值不同導致的問題，解決許多在css編寫上的困擾。

用類選擇器代替內嵌style程式碼

如果直接在html標籤中直接使用style屬性來賦予css樣式，這樣也許會造成HTML程式碼過多的問題，例如下面範例

<ul> <li style="color:red; font-size:large"> SEO is important issues! </li> <li style="color:red; font-size:large"> SEO is important issues! </li> <li style="color:red; font-size:large"> SEO is important issues! </li> </ul>

如果將這個範例的style屬性拉出撰寫在css中，這樣可以節省更多的html程式碼

<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>new_file</title> <meta name="author" content="Augus" /> <style> li.red { color: red; font-size: large; } </style> </head> <body> <ul> <li class="red"> SEO is important issues! </li> <li class="red"> SEO is important issues! </li> <li class="red"> SEO is important issues! </li> </ul> </body>

這樣的好處除了簡化了html複雜度以外，還提高了內容代碼比這個重要的SEO優化的技巧呢！

& 註：

所謂內容代碼比就是實際網頁的內容與網頁程式碼的比值，這會影響搜尋引擎爬蟲程式認定是否為關鍵網站十分重要的議題。

使用後代選擇器

後代選擇器又叫Contextual Selectors，只的是選擇某元件內的DOM元素，適時的使用後代選擇器（不濫用類選擇器）可以節省大量的程式碼量並且也提高了內容代碼比。

<head> <style> li p{ color: red; font-size: large; } </style> </head> <body> <ul> <li> <p>SEO is important issues!</p> </li> <li> <p>SEO is important issues!</p> </li> <li> <p>SEO is important issues!</p> </li> </ul> </body>

除了使用後代選擇器之外，也可以使用精細度更高的子選擇器（Children Selector）來選取直接後代，使用方法為div > p。

將含有相同的選擇器合併

CSS中可以將共同宣告的多個選擇器使用逗號的方式合併，這樣優化的技術可以讓更多的選擇器共享同樣的樣式節省了程式碼量。
<head> <style> li p, .myfont{ color: red; font-size: large; } .myfont { text-align: center; } </style> </head> <body> <h2 class=」myfont」>SEO is important issues!</h2> <ul> <li> <p>SEO is important issues!</p> </li> <li> <p>SEO is important issues!</p> </li> <li> <p>SEO is important issues!</p> </li> </ul> </body>

將相同選擇器的不同宣告合併

CSS允許相同選擇器而不同宣告合併為一個組，使用逗號分隔，讓多個選擇器可以放入一個宣告中，縱而節省空間
ul { background-color: black; font-size: 1em; } ul { padding: 10px; } ul li { background-color: black; font-size: 1em; } ul li p { font-size: 1em; color: red; }

修改後
ul, ul li, ul li p { background-color: black; font-size: 1em; color: red; }

將相同的樣式合併為共享類

利用繼承來消除重複宣告