你對CSS,掌握到第幾層了?

似乎有點武俠小說的感覺。在CSS Insider處,看到這篇 Friendly Bit » Levels of CSS knowledge。文中區分一般人對CSS的理解程度,頗有趣,簡單翻譯如下(每層的解釋我沒有照翻,有興趣者請自行至原文處。而與原文解釋不同的部分,如有錯誤,文責完全在我):

問題:「你會用CSS嗎?」

第0層的回答:「CSS? 是新出的線上遊戲嗎?」
第1層的回答:「喔,我知道啊。我會用CSS來去掉超連結下面的底線。」
第2層的回答:「沒有,我不喜歡用DIV;TABLE比較好用。」
第3層的回答:「有啊,那很優喔,但是我沒用,因為……」
第4層的回答:「CSS?喔,當然。我所有的頁面都是用DIV來排的。」
第5層的回答:「我用CSS來設計網頁,CSS比TABLE好,因為……」
第6層的回答:「那一版的CSS?…喔,有啊,你有讀過我寫的那本書……」

解讀:

你在第0層:沒關係,你只是在不同的世界裡面而已。我想你大概平常也沒機會用到CSS。有空多運動,不要老是坐在電腦前面打電動~~

你在第1層:你有HTML的基本知識,也實際會用CSS了,都很好。但是你通常只是用CSS來設定一些HTML語法作不到的事情。不過我想你應該大多使用DreamWaver或是FrontPage之類的編輯軟體,有時候你會作出一些原始碼很恐怖的網頁。不過這沒什麼關係,因為通常你應該不會真的需要處理到太複雜的網頁。也就是說,縱然江湖路險惡,你只要不招惹超過自己能力的事情,練練CSS強身健體也是無妨。

你在第2層:能夠熟悉使用到Table來進行網頁整體編排(layout),說明你已經有一定的根基。你往往在實際上用過DIV之後,又覺得不習慣而改回用熟悉的TABLE方法。注意,練到這層可能是最危險的,這個重大的關卡是,因為通常你已經身為網頁設計的專業工作者了,你所作出來的網頁往往有很高的流量與點閱率,或甚至是身為一伙設計幫眾的領頭大哥。

你在第3層:你也明瞭CSS在網頁設計定位上的好處,但是就是不能作。這通常是來自於外在因素的影響,例如你有個只練到第2層的頭頭,或是公司希望網站能向下相容到最早期的瀏覽器環境。反正沒有CSS,世界也不會滅亡,你可以看開點。另外,你也可以慢慢的介紹CSS的種種好處,如對於行銷效果、使用者經驗、管理成本帶來的效益等等,讓你的外在環境更能接受這樣的看法。

你在第4層:這並不少見,你能了解CSS帶來的好處,並身體力行,所產出的設計成果也大都能通過各種標準檢核。但是這當中隱藏了一個很大的難關與危險,讓你作出來的網頁比糟糕還要糟糕。過多的、累贅的、沒有語義內涵的DIV不但無法相容於舊的瀏覽器,也無法讓網頁語音閱讀器正常的讀出網頁的內容,換句話說,網頁的可及性(accessibility)有很大的問題;沒有語義的DIV名稱 (像是 #r5_c3, 通常是指第五列第三欄之類的),並沒有真正達到CSS的原來設計的目的,這些都可能偏離了宗門正道。你必須要重理正確的心訣,理解當初W3C規劃出CSS這種標準的目的與原因。另外有部分的原因是因為許多「新的網頁編輯器」會自動的產生過多的無意義DIV (例:我剛剛才看到 Roger 舉的 iWeb 的例子)。

你在第5層:到了這層的境界,表示你對CSS的目的有較好的理解與正確的使用方法,我想大部分讀這篇文章的都到這個境界了(原文作者認為他自己也是在此階段)。對於這一層的人來說,重要的是克服CSS與內容分離過程中的諸多小陷阱,與評估使用CSS的成本與必要性。

你在第6層:你不僅僅是了解怎麼做,知道為何作CSS的人,並且進一步的參與CSS標準的建構工作。練到這階段的已經是能開山立派的宗師,由使用者行為、需求,等等更基本的學術基礎,對未來的CSS提出新的討論與規劃工作。

  • 哦,原来我是第5层啊。

  • BBelief

    真是簡單又明確的分類啊

  • 我在四跟二跳來跳去,因為忘記時是第二級,記得時是四級(汗)

  • xxc

    紅:
    我覺得大部分第四級的問題,都是因為網頁製作軟體或系統的影響。
    像我今天用Writely記筆記,回傳到blog上的時候,裡面就出現了許多莫名其妙的 div跟span。說要清乾淨麻,用這些軟體或工具製作網頁,原本就是想圖個方便而已,不太可能再回頭去清理那些div的。
    我想這些錯誤,也不能全怪網頁內容的製作者;除非要把網頁製作退回到一頁頁純手工的時代,要不然這些問題會隨著製作軟體或工具而存在的。
    但是,如果是網頁設計者,或是網頁介面設計者;例如規劃某機構的網站;這種第四級的問題就是可以避免,而且應當避免的。
    如果可以的話,讀讀《The Zen of CSS》這本不錯的書,可以幫助理解CSS。

  • 獻醜了
    網頁設計近十年
    我還在第一層

  • xxc

    南庄:
    我相信有某些情況下,作網頁設計真的不需要CSS。

  • 很有趣的分類~CSS只有六層呀?

  • 事在人為嘛. 不過, 大環境實在變得太快. 今天的標準可以是明日黃花!