單個CSS樣式表或每個樣式一個樣式表？

我正在一個網站（或者更確切的說幾個網站）上工作，這些網站大部分都是在HTML5/CSS3中完成的，其中有一些PHP會在其中引入一些功能。單個CSS樣式表或每個樣式一個樣式表？

那麼，在單個樣式表中調用CSS的所有CSS或者（因爲代碼的剪切大小）具有每個節都有其自己的外部樣式表？（單獨在我的導航欄和頁腳之間可能有1500-2000行代碼）。

可能有好處和回退，例如代碼清潔度和對多個樣式表的「調用」數量。是否有堅實的技術原因，爲什麼一個人比另一個人使用更多？我的目標是製作最小尺寸的最佳網站，以便通過各種設備快速輕鬆訪問。這不是用戶密集或過程繁重。

2012-06-04 john.weland

關於標籤大小寫，有點歷史可能有助於理解趨勢從大寫字母轉變爲小寫字母的原因：在HTML4中，元素通常用大寫字母表示，但根據W3Schools，W3C recommended they be written in lowercase（雖然我找不到引用）。然後，XHTML變得流行起來;但是the specification stipulated elements and attributes must be lowercase。和HTML5 specification says you can go either way, but lowercase is recommended。

關於內部和外部的CSS，它確實取決於。如果多個頁面正在訪問相同的CSS，then the browser will likely cache it，這意味着將所有CSS放入單獨的文件是明智的。我也喜歡這個代碼抽象。但是，如果它是單個頁面，則可以選擇內聯。

關於導航欄，這是一個偏好問題。我喜歡加載模板文件，通過DOM運行它，然後插入我需要的元素。對於性能你可以選擇另一種方法，但我喜歡這個代碼抽象。

類似以下內容：

<?php 

class Webpage { 

    private $document; 

    function __construct() { 
     $this->document = new DOMDocument(); 

     if($this->document->loadHTMLFile("template.html")){ 
      $this->createHeaderMenu(); 
     }else{ 
      trigger_error("Webpage->__construct() failed to load template.html", LOG_ERR); 
     } 
    } 

    protected function createHeaderMenu() { 
     $headerMenu = $this->document->getElementById("header-menu"); 

     $li = $this->document->createElement("li"); 
     $a = $this->document->createElement("a", "Homepage"); 
     $a->setAttribute("href", "/"); 
     $a->setAttribute("target", "_self"); 
     $a->setAttribute("title", "Homepage"); 
     $li->appendChild($a); 
     $headerMenu->appendChild($li); 
    } 

    public function output() { 
     return (string) $this->document->saveHTML(); 
    } 

} 

$page = new Webpage(); 
echo($page->output()); 

?>

當然，template.html將您的模板，也將需要一個UI元素在裏面設置爲標題菜單的id屬性。

來源

2012-06-04 17:55:01

所以template.html被index.php調用（例如），並告訴index.php如何佈局網站或其他「調用」將被顯示？ –

是的， template.html基本上是一個純粹的HTML版本的網站，沒有任何內容。在'__construct（）'中，它被作爲DOMDocument加載。在'createHeaderMenu（）'中，找到帶有標題菜單id的元素，並插入一個裏面帶有元素的li元素;基本上它是填充你的空模板的內容。有很多方法可以對一隻貓進行皮膚處理，但是這種方法可以讓您保留實際的HTML，而不是將它分割成一堆包含或與PHP交織在一起。如果你想改變你的設計而不用搞亂PHP，那就太棒了:) –

Cool PHP對我來說是一款全新的球類遊戲。但我需要建立一個網站，其內容可以由其他不太懂網絡用戶編輯。我沒有運氣讓任何CMS來滿足我的需求，所以我猜它學會了硬編碼。 –

總之，這取決於你，和確切的網站。儘管您的疑慮有幾個答案：

小寫字母。大寫字母有點古老，但它對瀏覽器沒有任何影響。
儘量減少HTTP請求。一個CSS通常更好，但這取決於。時間它都與http://www.webpagetest.org
使用PHP includes.

來源

2012-06-04 17:28:02

太棒了，如果我理解PHP包含你分享的正確內容。我仍然需要在我的index.php中使用HTML來表示什麼被稱爲在哪裏。我對嗎？ –

如果您使用PHP包含，那麼CSS文件將在它到達瀏覽器之前包含在內。因此，您將不需要HTML標記來拉CSS，因爲它已經在那裏。 – legacybass

所以樣式表也被稱爲php文件而不是html文件？得到它了！ –

方式作爲Rcih建議它是真正由你來選擇一個特定的編程約定或者說禮節（在HTML的情況下），它也確實取決於實際站點你正在努力。

重要的部分是，您的HTML代碼（與任何其他編程語言一樣）在將來或任何其他團隊成員（如果有的話）在任何時間點都應該整齊易懂。

就CSS而言......如果您要在網站的大部分頁面中使用相同的樣式，最好有一個CSS文件可以鏈接到您的網頁。除此之外，如果您計劃爲頁面的不同部分分配不同的突發風格......您可能會因爲「讓每個部分都有自己的外部樣式表」方法而行。

來源

2012-06-04 17:37:17 qre0ct

單個CSS樣式表或每個樣式一個樣式表？

回答

相關問題