Question

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

我有一定的瑕疵。

firefox扩展程序＆＃39; Dustoff＆＃39;帮助。它可以遵循站点地图并告诉我哪些选择器没有使用。

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

CSS-Lint对我的重新定义感到困惑。我倾向于因素 -

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

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

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

现在，我面临着尝试制作更具响应性的设计，并考虑到两个目标：至少可以在手机上使用，并使其合理打印。这两个都需要多个样式表（速度和维护都很差）或更长的样式表（更难以维护）

在编码风格和组织方面，目前常见的常规做法是制作可维护的CSS文件吗？

Answer 1

最好的解决方案是使用类似Grunt或Gulp之类的东西，然后分解一堆不同的样式表，但这是有道理的。你可以通过风格，业务逻辑等来解决它，无论什么对你有用。

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

Answer 2

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

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

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

Answer 3

你可以做的事情很多，但我建议你看看SCSS。从本质上讲，它是一种编译为纯CSS的语言。有了它，你可以：

这并不难学，因为它与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输出，可选择一个帮助大多数代码检查员调试的映射文件。

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