2009-07-30 207 views
4

我有一個留言板,我的一個用戶編寫了一個用於設置頁面內各種元素風格的greasemonkey腳本。他在這方面做得很好,但爲了簡化工作,腳本的第一步是解析當前頁面,併爲頁面上的所有html元素添加幾個CSS類。他們中的大多數都不習慣風格的頁面,而是讓他更容易查詢他將實際修改每頁的幾個元素。例如class="thread_started_by_user_123 thread_with_456_posts thread_with_789_views thread_last_posted_in_by_user_12345"等etc向HTML元素添加大量CSS類

這是一個標準的做法?是否有任何缺點添加大量不必要的CSS類,無論是在JavaScript中,或在服務器上,如果我也將它們添加到服務頁面。

回答

2

這看起來是使用類將任意元數據嵌入到元素中,這當然不是類屬性的設計目的。考慮到它的效果開始和結束時使用的是grepmonkey腳本,因此本地化爲客戶端,似乎是一種無害的破解,但我不建議在服務器端進行復制。

不幸的是,HTML在元數據方面沒有提供太多的元數據,而是在無效屬性中插入元數據,所以有一種機制在現有標記中爲「類」屬性添加語義含義 - 即microformats。圍繞微格式有很多令人喘不過氣來的熱門話題,但總的來說,他們確實圍繞着所有xml不可行的地方的最佳做法。

2

就語義而言,是的有缺點。如果您的課程沒有描述實際內容,並且僅僅是出於造型目的,那麼在您決定重新設計和/或重組時,這可能會傷害到您。

例如,BAD:

<div class="header red left-side"> 

GOOD:

<div class="header main current-event"> 
+0

+1。如果你有太特定的類(即,可能相關的posted_in_2006,但可能完全不相關),那麼過度使用它也可能不好。 – You 2009-07-30 21:21:18

+0

是的,過分具體的類是我所擔心的。我不希望被請求轟炸「你能爲這些元素添加這樣和那樣的類」嗎?但是,只要處理/渲染/帶寬問題不會阻止整個事情 – kenwarner 2009-07-30 21:26:43

+0

我不是說過分,並將元數據放在類中......當然,如果你想和他們是相關的元素是什麼(類可以做的不僅僅是風格,obv他們可以用於jscript/jquery /等),但如果你只依賴他們的樣式,我寧願讓他們兩個類,三絕對MOST – Jason 2009-07-30 21:28:58

1

類不只是CSS,他們的標記部分的分類。基於該分類應用樣式只是一種用法。因此,如果這些類對其他分類目的有用,那麼這很好,而且是非常好的做法。

2

如果沒有與分配給元素的類關聯的樣式,那麼我相信瀏覽器會忽略它。所以如果這是你所擔心的,它不會增加你的頁面處理時間。

但是,如果每個元素都有很多很多的類,那麼您必須意識到您正在使用有價值的帶寬並增加以這種方式加載整個頁面所花費的時間。您可以通過外部化CSS來避免該問題,以便瀏覽器可以緩存該問題。

你使用jquery來查詢你真正想修改的元素嗎?可能會發現,使用jQuery選擇器更容易選擇這些元素,這些選擇器對於標準JavaScript來說似乎很難或不可能,因此您可以避免所有這些額外的不必要的類。底線,如果需要的話,使用大量的類沒有問題,這對生產來說是完美的,但如果你不需要它們,就像你的情況一樣,必須有更好的解決方案,你可能會想出。

2

只是爲了一個數據點,我昨天看了一下GMail的HTML(他們的按鈕非常好),它充滿了這種東西。

下面是一個例子:

class="goog-imageless-button goog-inline-block goog-imageless-button-collapse-left goog-imageless-button-collapse-right"