環保是目前時下流行的議題,網站設計也需要環保。不是回收,而是簡潔,對於設計上有偏執的設計師,讓CSS與網頁代碼如同Apple追求的設計風格一樣簡潔。簡潔似乎已經是時下的王道,網站設計也需要簡潔。今天要來談談關於CSS以及html搭配使用時,應該要注意的一些簡單原則,目的就是要讓你的網站更簡潔

1、採用Strict DOCTYPE

要做就做對的。不管是 HTML 4.01 還是 XHTML 1.0,它們都提供 Strict 模式,使用 Strict 模式可以保證我們的代碼不隱藏任何錯誤。

2、字元集聲明,特殊字元進行編碼處理

字元集聲明應當放在 部分的最前面,以便讓瀏覽器知道如何顯示網頁中的所有內容,包括標題。另外,一些特殊字元,如 & 最好用 & 代替,這是一種最安全的方法。

3、恰當的縮排

縮排不會影響網頁的解譯,但會明顯改善閱讀源代碼時的體驗。縮排沒有特定的規則,但始終保持一致是個好習慣。

4、正確地嵌套 Tag 標簽

如下圖,第一行代碼中,h1 標簽嵌套在 a 標簽中,儘管多數瀏覽器會正確解譯,但這不是好的習慣,h1 標簽是 block 物件,而 a 是 inline 物件,inline 物件不應該容納 block 物件。

避免的用法
<a href="book.html"><h1>This is a book.</h1></a>

建議的用法
<h1><a href="book.html">This is a book.</a></h1>

5、消除不必要的 div 標籤

div 標籤常被濫用,人們希望把任何東西都放在 div 標籤中以便爲它們分配 CSS 式樣,這種濫用會導致的臃腫。

6、將 CSS 和 JavaScript 放在外部文件中

將 CSS 和 JavaScript 放在外部文件中引用,不僅減低單個網頁的尺寸,而且意味著其他網頁也可以共用這些代碼,另外,瀏覽器的緩存機制可以很好地降低對相同代碼的重復下載。

7、儘量使用 CSS 控制文字的排版

如下圖所示,不要直接使用大寫,用 CSS 對這些文字排版方面的格式進行控制,這樣會更靈活。

<ul><li><a href="/">HOME</a></li></ul>

ul li a{ text-transform:uppercase}

8、爲 body 分配獨立的 class/id

爲 body Tag 分配一個獨立的 class/id,可以很好地定位頁面中任何物件,因爲頁面中所有物件都位於 body 中。

9、W3C 的驗證

完成網頁撰寫後,盡可能的對網頁的代碼進行驗證,儘管有些代碼錯誤瀏覽器能自動更正,但有些錯誤是會帶來不好的後果的,尤其當你位於 Strict 模式下。

並不一定要對是否通過 W3C 驗證有任何潔癖。Web 設計中存在更多的考量,只拘泥 W3C 驗證結果,可能影響一些更重要的因素。
比如,IE6 在 W3C 標準方面存在不少 BUG,如果你爲了100%通過 W3C 驗證而宣佈自己的網站不支援 IE6,那可能會被迫放棄一些使用xp電腦的老舊企業或政府單位的使用者。

10、千萬避免直接將 word 編輯排版後的文字直接貼進編輯器

你如果有經驗,應該會發現那會產生很多擁腫而無意義的代碼,有時候短短一個字彙,甚至會出現超過文本原來的代碼數量。