DRY和表現之間的張力？

我的應用程序中有多個頁面在加載時顯示部分FOUC（閃爍的未格式化內容），這是因爲其中一些樣式表和/或JavaScript定義在文檔的頭部而不是佈局中。根本的問題是，DOM在這些樣式表加載之前正在觸發。DRY和表現之間的張力？

爲了解決這個問題，我想有幾個可能性：

延遲的DOM射擊，直到附加樣式表被加載後。這會起作用，但會降低網站的速度，因爲我們會迫使DOM等待至少兩個樣式表加載。
把它留在原地，FOUCs和所有。
將所需的樣式表移動到佈局中，以便一開始就裝入其餘的樣式表。這是性能最佳的，但它會干擾我的困惑。我有很多頁面使用相同的佈局，但每個頁面都需要不同的修改樣式表。例如，用戶可能使用應用程序佈局，但需要users.css文件，而產品可能使用應用程序佈局，但需要一個products.css文件。這個選項的終點是很多幾乎完全相同的佈局，唯一的區別是CSS要包含什麼（可怕的unDRY）。
一個優雅的技術解決方案，我不知道在我的intermediacy。

包含不同樣式表的正確方法是什麼？是否可以在不重複佈局代碼的情況下執行此操作？

2010-10-14 sscirrus

你能澄清你通過和 '佈局' 的文件頭「的意思 - 你的意思HTML頁面的部分和Rails application.html.erb文件？ – 2010-10-14 19:54:02

你好。通過佈局我的意思是Rails佈局，例如application.html.erb。按照我的意思（可能不準確！）在users/new.html.erb視圖頂部的樣式表聲明。 – sscirrus 2010-10-14 21:10:21

佈局/ application.erb

<body id="body-<%= content_for :body_name %>"> 
    ... 
</body>

公共/樣式表/ combined.css

#header { 
    /* styles for all pages */ 
} 

body#body-products { 
    /* styles for the products page only */ 
}

2010-10-14 20:59:11 yfeldblum

正義，謝謝你的回答。我明白這隻會選擇我想申請特定頁面的樣式。我是否正確，這仍然會爲每個頁面加載一個巨大的樣式表？ – sscirrus 2010-10-14 21:11:46

是的。但是樣式表通常並不那麼大，而單一的樣式表就會被瀏覽器緩存。 – yfeldblum 2010-10-14 21:13:42

因此，可以用3-5K行的combined.css表格來提供15-20個不同的獨立樣式表。 – sscirrus 2010-10-14 22:53:25

不知道這是否會得到您的批准，但這是我會做的。

通過刪除所有非通用stylesheet_link_tag調用來修改主佈局。這種替換它們：

= stylesheet_link_tag 'style_used_in_every_page' 
- @stylesheets.each do |css| 
    = stylesheet_link_tag css

而在你的控制器，指定哪個樣式表使用視圖從控制器：

def UsersController < ApplicationController 
    @stylesheets = ['users', 'admin', 'print'] 
end

這是否有意義？沒有測試過，但它應該讓你走上正軌。

2010-10-14 20:52:53 nfm

感謝您的答案nfm！ – sscirrus 2010-10-15 01:29:54

回答