2/28/2007

id 和 class 的差異

原文刊載於Sitepoint : http://www.sitepoint.com/article/html-37-steps-perfect-markup/2
第 34. 項 id 和 class 有何差異?

id 是HTML 文件中某個特定元素的單一識別。好比社會安全號碼一樣為這個特定元素提供唯一可辨識的方式。如同二個人不可能擁有同一個社會安全號碼,任二個元素在文件也不可能擁有同樣的id. Ids在頁面中一定是獨特的。

class認定為某個元素有些特性可以與其他元素共享。 一個元素可能同時屬於一個或多個以上class。 用比較貼切的比喻: 一個人可能同時是木匠和護士,而社會上有許多的木匠和許多的護士。 (他們全都有獨特的社會安全號碼)

id和class主要被使用於CSS和JavaScript。 在CSS, id 比class有更高的獨特性,使它容易為一個特定元素訂定特殊的規則。 以JavaScript來說,我們可以用id查找元素

我們指定 id在頁面中至多只能出現一次,例如導覽menu、footer、sidebar等。 我們也可以指定 id在整個網站只出現一次,例如我們想要一個特定圖像擁有特定的CSS規則,或者想以JavaScript操作。

我們指定class到具有共同特徵的元素中,通常透過CSS規則顯示其屬性。

id和class名稱應該儘可能符合「語義」。它應該描述本身是什麼而不是描述外觀像什麼。 因此用 id= "menu" 會比 id=”left” 好,因為萬一menu移動到右邊的話,left就不合適了。id和class名稱容易因為不同專案而變動,html也是。即便如此,我們也不應讓它隨著不同專案變動。

沒有留言: