2009-04-21 42 views
20

通常當我設計一個網站時,我需要一個特定的樣式來應用於頁面上的特定元素,我絕對相信它只會應用於該頁面上的該元素(比如絕對定位按鈕或某物)。我不想訴諸內聯樣式,因爲我傾向於贊同樣式與標記分開的理念,所以我發現自己在內部辯論放置樣式定義的位置。頁面特定的CSS規則 - 把它們放在哪裏?

我恨我了一次性使用的場景基地css文件中定義一個特定的類或ID,而我害怕做的每一頁的.css文件的想法。對於我正在處理的當前網站,我正在考慮將樣式定義放在頁面頂部的head元素中。你會怎麼做?

回答

12

看看是否有類的組合,會給你你想要的結果。您可能還想考慮將該元素的CSS分解爲幾個可以在其他元素上重用的類。這將有助於最小化整個網站所需的CSS。

我會盡量避免特定頁面的CSS頂部的HTML文件,因爲離開你的CSS中要改變網站外觀的情況下支離破碎。

對於真的,真的,永遠不會用在其他任何東西上的CSS,我仍然會採取在網站範圍內使用#id規則的CSS。

由於CSS是從不同的文件鏈接中,它允許瀏覽器緩存一些文件,它會稍微降低您的服務器帶寬(非常)爲未來的負載。

+1

我希望我能給出所有答案,但你的答案是最詳細的,所以你明白了。我最終設計了一個可以通用的類,可以在主要的css文件中使用,而不會造成混亂。感謝有關緩存和頁面大小的考慮,我忘了考慮這一點。 – Chris 2009-04-21 17:45:33

3

我把它們放在一個<style />標籤頁面的頂部。

1

對於這種情況,我覺得把在報頭中的特定頁面風格的信息可能是最好的解決方案。污染你的站點範圍的樣式表似乎是錯誤的,我同意你對內聯樣式的看法。

1

在這種情況下,我通常把它放在頁面的頂部。我在PHP中使用了一個頁面定義框架,它爲每個頁面提供局部變量,其中一個是頁面特定的CSS樣式。

1

如果您想知道樣式的定義位置,請將它放在您看起來的位置。

對我來說,這與我將樣式放置2次,5次或170次完全一樣 - 我沒有理由根據使用次數從主樣式表中排除樣式。

4

我想你肯定應該擴大的思維過程,包括一些無疑爲「頁特定的CSS」。這應該是一件非常非常罕見的事情。無論如何,我會說全球樣式表,但重構你的CSS/HTML的方式,頁面不必有超特定的樣式。如果最終在全球css中有幾行特定於頁面的標記,那麼誰在乎。無論如何,將它放在一個穩定的位置會更好。

3

爲一個或兩個特定規則加載頁面特定的CSS文件是不值得的。我會把它放在文檔頭部的標籤中。我通常會做的就是使用我的站點範圍的CSS文件,然後使用註釋,根據頁面對其進行分區並在其中應用特定的規則。

4

在消費頁面中定義樣式或將樣式輪廓化是同一枚硬幣的兩面 - 在這兩種情況下,您都使用頁面帶寬來獲取樣式。我認爲一個人不一定比另一個更好。

我會主張在您的站點範圍的主樣式表中爲它製作一個#Selector。污染是最小的,如果你真的有這麼多真正獨特的案例,你可能想重新考慮你的方式來標記你的網站。

2

如您所知樣式表文件是靜態文件並在客戶端緩存。他們也可以通過網絡服務器進行壓縮。所以把它們放在外部文件中是我的選擇。

4

我會設置一個ID的頁面像

<body id="specific-page"> or <html id="specific-page"> 

,並在整個站點的CSS文件中使用的CSS覆蓋機制。

5

有四種基本情況:

  1. 風格=屬性。這是最不易維護但最容易編碼的。我個人認爲使用style =是個bug。
    • <樣式>元素位於頁面頂部。這比style =稍好一些,因爲它使標記保持乾淨,但是它浪費了帶寬,並且使CSS更改變得更加困難,因爲您無法查看樣式表並知道存在哪些規則。
    • page-specifc css:這讓你擁有乾淨的HTML 乾淨的主CSS文件。但是,這意味着您的客戶端必須下載大量小CSS文件,這會增加帶寬和頁面加載延遲。但是,它很容易維護。
    • 一個大的網站CSS:一個大文件的主要優點是它只有一件事要下載。這在帶寬和延遲方面效率更高。

如果您有任何服務器端編程回事,你也許能夠只從動態#3組合多個表來獲得的#4的效果。

我會推薦一個大文件,無論是實際上將它保持爲一個文件,還是通過構建過程或在服務器上動態生成文件。你可以使用特定於頁面的ID來指定你的選擇器(總是包含一個,以防萬一)。

至於answer that was accepted when I wrote this,我不同意找到「給你想要的結果的類的組合」。這對我來說聽起來像是類正在識別視覺風格,而不是邏輯概念。你的課應該像「標題箱」而不是「紅色」。然後,如果你需要更改用戶信息頁面上的文本顏色,你可以說

#userInfoPage .titlebox h1 { color : red; } 

不要開始應用類所有的地方,因爲一類目前擁有你想要一個特定的外觀。你應該把高級概念放到你的頁面中,用HTML代表類,然後設計這些概念,而不是相反。