為什么擁有外部樣式表比內部樣式表更好？ 除了重用

Question

我一直在為頁面寫一些CSS作為實習生，然后將CSS放在頁面的標題中。 而不是將其放在站點的主CSS文件中。 一個巨大的文件。 與網站的其余部分相比，該頁面具有許多獨特的樣式。 我收到了我工作所在的外部承包商的電子郵件。 要求將樣式移入主文件。 有什么特別的原因我應該這樣做。 我不介意將其移動到除主文件之外的外部CSS文件中。 我真不明白為什么這就是他所說的“標准最佳實踐”。

據我所知，唯一的區別是外部可以重復使用，我想堅持自己的看法。 但與此同時，我也熱衷於理解這個家伙的想法，因為他更有經驗。

如果有人可以向我解釋為什么使用外部樣式表是最佳實踐。 我很少在網站上看到內部樣式表，因此我想對此應該有一定的邏輯。

謝謝！

Answer 1

在某些情況下，您的頁面將具有動態內容。 因此，它不能被緩存。 通過將css添加到標頭中，可以增加必須使用的帶寬量。 擁有單獨的樣式表可以通過緩存減少帶寬消耗。

另外，樣式表可以並行加載，因此外部樣式表可以加快頁面加載速度。

Answer 2

許多頁面重復使用相同的CSS。 因此，瀏覽器可以緩存外部樣式表並在每個頁面上重復使用，這將導致較低的開銷和更快的頁面加載速度。

如果全局CSS是內聯的，則將為每個頁面加載它，這將導致大量的開銷，並且不必要增加連接和瀏覽器的負擔。

但是，有很好的理由可以內聯某些 CSS，也可以將其歸類為“關鍵” CSS。 外部CSS樣式表具有渲染功能，因此在所有CSS均已下載之前，它不會應用您的樣式。 對於大型的全局外部CSS文件，有時您會注意到瀏覽器應用樣式（也稱為FOUT [無樣式文本的Flash]）之前的延遲。 提議的解決方案是將關鍵CSS內聯在折疊上方，以便快速應用這些樣式。 然后，在頁面准備好后，允許瀏覽器應用其余的CSS。

FOUT在移動連接上更加引人注目，在當今移動流量每天都在增加的時代，重要的是要考慮這些做法以改善移動體驗。

阿迪·奧斯曼尼（Addy Osmani）撰寫了一篇很棒的文章“檢測出關鍵的CSS超出常規”，這將使您更好地理解這種做法及其好處： http : //addyosmani.com/blog/detecting-critical-above-the-用保羅金蘭視頻折疊css /

Answer 3

除了Franz的答案，將結構，邏輯和顯示代碼分離是一種最佳實踐。 這是MVC背后的驅動力-它使代碼更具可維護性。

Answer 4

要設置網頁或博客主題的格式，可以使用三種樣式表：外部樣式表：外部樣式表是一個單獨的文件，其中包含所有樣式。 您可以在網頁編碼的開頭部分鏈接到它。

<link rel="stylesheet" type="text/css" href="styles/stylesht.css">

如果您有多個樣式表，則可以輕松找到所有樣式表。 另外，您可以在robot.txt文件中放置一條指令，以指示搜索引擎漫游器不要進入該文件夾，並且不要將其添加到其數據庫中。

---

內部樣式表：內部樣式表已添加到頁面的頂部。

<style type="text/css">
Your style types
</style>

內部樣式表中的樣式僅應用於實際編碼到的頁面。 您經常看到這種情況。 模板由內部樣式表構成，在您重新使用模板時，樣式代碼將插入到每個頁面的頭部。 某些Wordpress插件也可以這樣做，而不是僅為該插件插入指向外部樣式表的鏈接。

---

內聯樣式：內聯樣式應用於HTML元素。

<p style="color: #636954;">My sentence.</p>

這種內聯樣式將文本的顏色更改為綠色：