Question

我正在一个网站（或者更确切地说是几个网站）上工作，这些网站主要是在HTML5 / CSS3中完成的，其中有一些PHP用于一些功能。

因此，在单个样式表中将所有CSS调用到页面或（因为代码的剪切大小），每个部分都有自己的外部样式表，这是正确的做法吗？（仅我的导航栏和页脚之间可能有1500-2000行代码。）

对于代码清洁度以及对多个样式表的“调用”数量，可能会有好处和后退。是否有任何可靠的技术原因，为什么一个使用比另一个更多？我的目标是使用最小的足迹制作最好的网站，以便通过各种设备快速轻松地访问。它不是用户密集型或处理繁重。

Answer 1

关于标记大写，一点历史可能有助于理解趋势从大写变为小写的原因：在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将是你的模板，并且需要有一个ul元素，id属性设置为header-menu。

Answer 2

简而言之，它取决于您和确切的网站。尽管如此，你可以解答几个问题：

小写。大写是一个有点旧的学校，虽然它对浏览器没有任何影响。
尽可能减少HTTP请求。一个CSS通常更好，但它确实取决于。使用http://www.webpagetest.org
使用PHP includes.

Answer 3

正如Rcih所说，你真的应该选择一个特定的编程约定或者说礼仪（如果是HTML），它还取决于你正在使用的实际网站。

重要的一点是，您的HTML代码（与任何其他编程语言一样）应该是您未来或任何其他团队成员（如果您有的话）在任何时候都可以理解的。

就CSS而言......如果您要对网站中的大多数页面使用相同的样式，最好有一个CSS文件可以链接到您的页面。另外明智的是，如果您计划为页面的不同部分设置不同的突发样式......您可能会选择“让每个部分都有自己的外部样式表”方法。

单个CSS样式表，或每个部分一个样式表？

3 个答案: