爲什麼所有的CSS文件都在一個文件夾中？

我一直堅持將所有CSS文件放在一個文件夾中的做法。這只是爲了保持組織的有序性，還是除此之外還有其他任何好處。爲什麼所有的CSS文件都在一個文件夾中？

這個問題不僅僅是爲了說明的目的，我有很多的網站，我試圖減少他們的加載時間，我想知道這種方法是否會有所幫助。

2014-11-14 Sleek Geek

它使它可維護。只有去一個地方編輯是真的有用的時候寫html/etc – jbutler483 2014-11-14 13:42:03

這不是唯一的方法，你可以把與CSS和HTML＆JS文件在一個單一的目錄，這裏有一個名稱忘了它叫什麼。 – simonzack 2014-11-14 13:43:26

有很好的討論[這裏]（http://webmasters.stackexchange.com/questions/39088/directory-structure-for-a-website-js-css-img-folders）和[here]（http：/ /webstyleguide.com/wsg3/5-site-structure/3-site-file-structure.html）關於這篇文章。 – mrgenco 2014-11-14 13:44:02

兩個原因來考慮，現在（在保持了HTML，JS和CSS單獨做）：

CSS和JS可以在多個HTML文件，如果是在外部文件中重複使用，但您需要如果是單個html + css + js頁面，則在每個頁面中複製相同的代碼。
如果你想要的話，你可以爲在線頁面開發一個新版本的代碼css或js，當你完成你唯一需要做的事情就是改變html中鏈接或腳本元素的文件名。這意味着你不會被重複

將它們放置在一個CSS也意味着它更容易找到的造型和批量編輯在一個地方有很多的HTML造型。

我還發現：

更方便的編輯：假設你發現距離計算錯誤（或任何你正在工作），那麼它肯定容易，只需打開包含文件負責距離計算的對象比滾動瀏覽您的巨大HTML文件尋找罪魁禍首。
語法突出顯示/代碼完成/您的其他功能IDE（如重構）：這可能部分與HTML文件內的代碼一起工作，但並非全部如此。所以，你可以更快地工作，並在錯誤發生之前真正看到錯誤。
可緩存：當你的HTML代碼會有所不同爲您的網站的所有頁面，你的CSS和JS不會，那將是愚蠢的重新加載它們的每一頁（當他們穿上這恰好直接進入HTML）。
頁面加載時間：隨着HTML文件CSS和JS，他們必須加載之前，瀏覽器將看不到任何實際的HTML，所以頁面會顯示較慢。此外，不關心你的腳本的搜索引擎將不得不加載它們，並且基於頁面加載時間會受到處罰。
縮小：在生產中，你用你的CSS和JS的縮小（和連續）的版本，當然你不想手動創建，每次你做出改變，所以你做編程。試圖在沒有單獨文件的情況下做到這一點會變得非常難看，並且您無法緩存縮小版本，這將會大大降低性能。
CSS發電機：當你開始在意保持代碼的重複降到最低，你會很快寫CSS，裏面充滿了重複的，和開關，例如輪胎，以SASS（像我一樣很前一段時間）。你一定需要單獨的文件來完成這項工作。

所以，在回答你的問題，

是，對於大多數的網站，將它們分開（如MVC的默認操作）可能會加快網頁加載時間。（這個規則中很少出現例外情況，但是一個帶有1或2個樣式聲明的網站在放置在html中時可能會稍微快一點，但是如果您使用過MVC，則不會回顧而不是將它們分開！）

來源

2014-11-14 13:45:43 jbutler483

它是一個謨非常重要的組織，你不把蘋果切成梨袋這是一種條件反射，但事實上你可以做到這一點...

的代碼是一樣的，你把CSS文件放到CSS文件夾中，但你不能這樣做。

想象一下，你有30個CSS文件，40個PHP文件，50張圖片和10個js文件......你需要組織這個！

來源

2014-11-14 13:45:17 keegzer

爲什麼所有的CSS文件都放在一個文件夾中？

爲什麼有很多CSS文件開頭？如果你對「減少加載時間」感興趣，那麼你應該考慮讓只有一個CSS文件。

長話短說，您可以以任何您想要的方式組織您的CSS和JavaScript文件。但是，在提供文件時，您必須將所有CSS文件合併爲一個（對於JavaScript也是如此）。

我個人保持相關的CSS，圖像和JavaScript在一起。我發現用這種方式處理文件要容易得多。一個例子是：

- resources 
    - plugin1 
    - plugin1.js 
    - plugin1.css 
    - images 
    - plugin2 
    - plugin2.js 
    - plugin2.css 
    - images

我寫了所有文件夾合併CSS文件的腳本到一個文件中，minifies他們和結果複製到下面的wwwroot目錄。

來源

2014-11-14 13:48:48

將所有css文件存儲到一個文件夾中不會減少加載時間。減少加載時間的最佳方法是將所有CSS文件合併到minify it。這裏的壞事是時候來改變你的風格。你將不得不保留原始文件，或者解壓縮/漂亮地打印它，而不是改變，而不是再次縮小。一些CMS可以選擇縮小和緩存所有樣式（和JavaScript文件），這樣會更好。另一方面，您的服務器端，確保您的所有樣式在傳遞到客戶端瀏覽器之前都進行了gzip壓縮。更多關於如何enable compression on Apache

來源

2014-11-14 13:56:09 skobaljic

*將不會減少加載時間*？在緩存過程中會發生什麼？ – jbutler483 2014-11-14 13:59:35

而不是調用例如10個css文件，CMS（如xCart）可以縮小所有樣式，並且這種方式只能爲瀏覽器提供一個css文件。只有等待10個文件的響應可能需要超過一秒鐘。一旦你改變你的CSS文件，你告訴你的CMS再次緩存它們，很容易。 – skobaljic 2014-11-14 14:01:16

我的歉意讀錯了你的答案。我以爲你是純粹的說單個CSS不會幫助，而不是*進入一個文件夾*。畢竟，它們意味着不同的事情 – jbutler483 2014-11-14 14:03:56

爲什麼所有的CSS文件都在一個文件夾中？

回答

相關問題