使用许多断点和许多模板来组织 CSS 文件答案

【问题标题】：Organizing CSS files with many breakpoints and many templates使用许多断点和许多模板来组织 CSS 文件
【发布时间】：2014-11-11 03:05:58
【问题描述】：

我开始接触 CSS、HTML 和 Sass，虽然我了解基础知识，但我想开始学习最佳实践。我正在构建一个响应式投资组合网站（使用 Bones HTML5 Boilerplate 和 Wordpress），它将有 4-5 个断点，以及大约 5 个不同的静态网站模板。

我的断点是根据来自多个 .scss 文件中代码的媒体查询导入的，如下所示：

_base_res.scss
_481_and_up.scss
_768_and_up.scss
_1030_and_up.scss

现在，我还有一些静态页面，其中包含媒体查询：

_home.scss
_about.scss
_contact.scss
_work.scss

拥有包含媒体查询和断点 css 文件的静态页面 css 文件是否多余？我应该在断点 scss 文件中只包含 .home、.about、.contact、.work 类吗？

对不起，如果我的问题不清楚。如果没有，请告诉我如何澄清。

谢谢

【问题讨论】：

我会说这是你的决定。我是那些将为每个元素编写媒体查询并根据我的内容选择查询宽度的人之一，而不是例如移动设备、平板电脑和桌面设备的外观，这会使媒体查询文件变得多余，我也发现它是在我的元素中对每种样式进行分组更容易，这也是我认为的 sass 人的想法，否则你为什么能够在元素中对媒体查询进行分组。

【解决方案1】：

我建议阅读 https://smacss.com/ 并了解它，这将教你如何创建良好的 css 架构。此外，我建议编写一个允许您传递媒体查询变量的 mixin。完成后，在特定样式表上写下您不需要它们的媒体查询。

【讨论】：