1

我不是专业人士。我的企业网站已从 5 个文件增长到 300 个文件。我的 css 文件现在大约有 800 行长，而且越来越难以管理。

我有一定数量的杂物在里面。

Firefox 扩展“Dustoff”有帮助。它可以跟随站点地图并告诉我没有使用哪些选择器。

W3C 有效性检查器没有帮助。它验证我有匹配的括号并且我的选项拼写正确。

CSS-Lint 对重新定义大惊小怪。我倾向于考虑——

h1, h2, h3, h4 {
font-variant:small-caps;
}

h3, h4, h5, h6 {
margin: auto;
width: 35rem;
}

这个想法是将风格相关的项目设置在一个地方。

现在，我面临着尝试做出更具响应性的设计，并牢记两个目标：让它至少可以在手机上使用，并使其打印合理。这两者都需要多个样式表（速度和维护都不好）或更长的样式表（更难维护）

在编码风格和组织方面，目前普遍接受的制作可维护 CSS 文件的做法是什么？

4

3 回答 3

3

最好的解决方案是使用Grunt或Gulp之类的东西，并分解一堆不同的样式表，但这是有道理的。你可以按照风格、业务逻辑等来分解它，只要对你有用。

然后使用其中一种工具，您可以将它们编译成 1 个缩小的样式表，并且这是您在 HTML 中加载的唯一一个样式表。

于 2016-03-21T18:05:03.477 回答
1

您可以做几件事，但我建议您看一下SCSS。本质上，它是一种编译为纯 CSS 的语言。有了它，您可以：

  • 使用变量
    • 例如，定义 1 种颜色并将其分布在不同的元素中。
  • 允许文件包含
  • 它允许嵌套元素
  • 可以做基础数学
  • 允许简单的功能

学习起来并不难，因为它与 CSS 非常相似，而且你可以让代码更有条理，它会自动变得更短，因为它消除了 CSS 的重复性。

CSS

#container {
    width: 960px;
    margin: 0 auto;
    border-color: black;
}

#container p {
    color: black;
}

SCSS

$black: #000000;

#container {
    width: 960px;
    margin: 0 auto;
    border-color: $black;
    p {
        color :$black;
    }
}

两种代码完全相同，唯一的区别是您必须编译 scss 代码，但您可以选择压缩 CSS 输出，并可选择使用有助于在大多数代码检查器中进行调试的映射文件。

由于您询问的是响应式设计，请查看本指南。它展示了如何使用 SCSS 中的媒体查询使其在较小的设备上兼容。

于 2016-03-21T18:25:11.657 回答
1

我建议将其分解为单独的样式表。我通常有一个用于排版样式，我将放置标题、正文和复制样式，另一个用于全局样式（将在整个站点中重复使用的样式），然后另一个用于特定于部分的样式。

由于您要使网站具有响应性，我建议您为每个部分定义媒体查询，就在该部分的 CSS 下方，以便轻松找到进行更改的位置。

我发现从移动优先的响应式开发方法开始是最简单的，因此您的初始样式都将面向移动设备，然后您将使用媒体查询来覆盖平板电脑/桌面。

于 2016-03-21T18:03:33.367 回答