Question

为简单起见，我们可以说我的网站上有两个页面，一个登录页面和一个产品页面。两个页面都使用媒体查询有3个断点。就目前而言，每个页面都有master.css个文件和3个断点.css。

感觉有点重复复制并一遍又一遍地粘贴页眉，页脚，导航按钮。由于我是新手，我不知道用于构造我的文件的正确“方法”。

我应该继续坚持这种方法，还是应该将我的页眉，页脚和导航css分成单独的css文档，并在同一个地方包含它们的所有断点？

Answer 1

您的master.css文件应该包含将在整个基本布局中应用的所有CSS。

以下面的HTML布局为例：

<!DOCTYPE html>
<html>
    <head>
        <title>Title - My Webpage</title>

        <link href="css/master.css" rel="stylesheet">
        <script src="js/script.js"></script>
    </head>
    <body>
        <h1>Page Title</h1>
        <div id='container'>
            <p>Page Content</p>
         </div>
         <div id="footer">
             &copy; Copyright 2014 by YOU.
         </div>
    </body>
</html>

虽然某些页面可能有特殊的侧边栏或某些特定于页面的垂直导航，但主要布局（如页面标题，容器等）应在包含媒体查询的共享外部样式表中设置样式。这确实是个人偏好，但您可以将import其他外部样式表添加到master.css中，或者您可以在<head＆gt;中添加多个样式表。部分。然后，在包含特殊组件的网页（如侧边栏）上，您可以添加sidebar.css或其他.css。

对于标记的重复，如果您要使用静态标记文件（即.html），则需要为每个新页面保留重复标记。但另一种选择是使用template engine。

基本上，模板引擎允许您将可重用布局移动到单独的文件中以供重用。以下是使用Twig（PHP模板引擎）的基本示例。

<强> layout.html.twig ：

<!DOCTYPE html>
<html>
    <head>
        {% block head %}
            <!-- master css and js to be shared on the base layout -->
            <link href="css/master.css" rel="stylesheet">
            <script src="js/script.js"></script>

            <title>{% block title %}{% endblock %} - My Webpage</title>
        {% endblock %}
    </head>
    <body>
        <h1>{% block heading}{% endblock %}</h1>
        <div id='container'>
            {% block content %}{% endblock %}
         </div>
         <div id="footer">
             {% block footer %}
                  &copy; Copyright 2014 by YOU.
             {% endblock %}
         </div>
    </body>
</html>

这将是共享布局。我们将在前面的页面中扩展这种布局。

<强> product.html.twig ：

<!--here we are extending our base layout, so we don't have to duplicate the static layout -->
{% extends "layout.html" %}

{% block title %}Index{% endblock %}
{% block head %}
    <!-- parent() is going to extract all of the stuff in our layout in the 'head' block -->
    {{ parent() }}

    <!-- this is our page specific code in our head -->
    <style type="text/css">
        .important { color: #336699; }
    </style>
{% endblock %}
{% block heading %}Hello, World! {% endblock %}
{% block content %}
    <p class="important">
        Welcome to my awesome homepage.
    </p>
{% endblock %}

现在，如果我们访问我们的产品页面，我们将看到主页面布局，其中我们定义的块中插入了页面特定的标题，样式，内容等。

_{要更详细地查看此示例，请访问Twig Documentation。}

所以，通过使用模板引擎，我们做了两件很棒的事情：

消除了复制静态标记的需要。
创建了我们设计的具体实现，可以轻松地重复使用和扩展。

请记住，使用这样的选项会有一些开销，因此对于只有几页的非常简单的网站，最好只使用静态标记。

Answer 2

取决于网站的复杂性。在您的情况下，如果您只有几页，最好创建一个包含所有样式和媒体查询的样式表。您可以使用模块化方法（参见下文）或通过向每个页面添加类并使用后代选择器应用样式来对其进行范围化。

模块化方法的一个例子是：

<div class="Product">
  <div class="Product-image">..</div>
  <p class="Product-description">...</p>
</div>

并在样式表中：

.Product { ... }
.Product-image { ... }
.Product-description { ... }

编辑：我建议您阅读this article

Answer 3

我建议您采用SASS或其他类似的css实用程序（LESS，Stylus等）以更好的方式管理您的项目结构。

例如，我通常有一个带有所有@imports的主 screen.scss 文件，如果我有一些与代码相关的代码（例如），我会在名为<的文件中写入默认行为em> header.scss 以及名为* header_mq.scss的文件中的所有响应代码*

通过这种方式，您可以构建应用程序的css，如果某个组件未在页面中使用，则可以简单地避免导入该特定页面的块。

我还建议你阅读这本书http://smacss.com/

如何组织媒体查询CSS文件？

3 个答案: