问题描述
在 https://sass-guidelin.es/#architecture 中建议像最佳实践一样为站点构建类似的架构，使用 partials 并且只有一个名为 main.css 的 CSS 文件（唯一一个不会是部分，因此是从预处理器输出的唯一 .css）：
<pre>
sass/
|
|– abstracts/
| |– _variables.scss # Sass Variables
| |– _functions.scss # Sass Functions
| |– _mixins.scss # Sass Mixins
| |– _placeholders.scss # Sass Placeholders
|
|– base/
| |– _reset.scss # Reset/normalize
| |– _typography.scss # Typography rules
| … # Etc.
|
|– components/
| |– _buttons.scss # Buttons
| |– _carousel.scss # Carousel
| |– _cover.scss # Cover
| |– _dropdown.scss # Dropdown
| … # Etc.
|
|– layout/
| |– _navigation.scss # Navigation
| |– _grid.scss # Grid system
| |– _header.scss # Header
| |– _footer.scss # Footer
| |– _sidebar.scss # Sidebar
| |– _forms.scss # Forms
| … # Etc.
|
|– pages/
| |– _home.scss # Home specific styles
| |– _contact.scss # Contact specific styles
| … # Etc.
|
|– themes/
| |– _theme.scss # Default theme
| |– _admin.scss # Admin theme
| … # Etc.
|
|– vendors/
| |– _bootstrap.scss # Bootstrap
| |– _jquery-ui.scss # jQuery UI
| … # Etc.
|
`– main.scss # Main Sass file
</pre>
我强烈怀疑通过这种方式将只有一个大的 main.css 文件也将包含其他页面的 css（因此，将只有一个 main.css 文件要下载，但它可能会非常大) 第二件事是很难避免冲突（一个简单的例子，相同的 id 在 2 个不同的主页主页和不同规则的联系人）。
我的想法是构建 home.scss 和 contact.scss（无部分）等等会好得多，有两个不同的（在我的简单示例中）scss 文件将导入它们的特定部分，在这个网站的每个页面都会link 不同的 css 页面。
我是完全偏离了轨道还是我误解了指南的含义，因此我的设计理念是好的？
解决方法
我可以想到三个原因，为什么您可能不想使用每页使用一个样式表的方法：
1) 缓存
一个 main.css 对 n <page>.css。您要么为整个站点加载一个文件，要么为每页加载一个文件。这里的考虑可能是首次加载性能与后续页面加载性能。根据我的经验，CSS 文件并不大，所以我敢说拆分 main.css 文件带来的性能提升可以忽略不计。
2) 冗余 CSS
如果您希望在您网站的每个页面上都有 _grid.scss，那么您每次都需要单独加载它。用户可以加载相同的 CSS n 次，其中 n 是他们查看的页面数量。这可能比加载一个 main.css 的大小/时间加起来更大。
3) 开发者体验
每次创建页面时，您都必须包含特定的依赖项（即 @import）。此流程的创建和维护可能会给您的 CSS 带来不必要的结果/复杂性。
首先：形成最佳实践
- 构建最佳运行页面
- 优化您的工作流程
- 节省工作时间
- 使用经过测试（=有效）的代码解决方案
- 避免代码冲突
在大多数情况下，不同的目标之间存在冲突......并且由您自己找到解决方案，这是对您的工作和项目的最佳折衷方案。
A.一个或多个 CSS 文件
确实，对于用户体验来说（其中之一）页面最关键的属性是页面加载时间。 IE。到 Amazon/Ebay/Google 的页面确实是一秒决定了大约数百万的收入。这不是开玩笑， - 他们对此进行了非常有趣的测试。因此，优化页面的工具（即 Chrome 浏览器中提供的）首先查看页面速度也就不足为奇了。
对于您的 CSS，这意味着：最佳实践（解决方案）是一种方法，它以毫秒为单位加速您的页面。要实现这一最关键的属性是您的页面需要加载的文件数量：这是因为将浏览器与服务器连接所需的时间（每个文件！）比下载时间本身更重要。
因此，简单的优化页面将代码包装在一起并尝试仅加载一个 CSS/JS 文件。稍微优化的页面不仅可以压缩代码，还可以将不需要的 CSS 类移除到项目中。最佳优化页面领先一步：如果可能，他们将尽可能多的 CSS/JS 代码直接写入 HTML 文件。看看谷歌页面的源代码......谷歌试图通过他们的项目“谷歌移动加速页面”将该技术推送给开发人员一段时间......（尚未提到下一步是使用“新的' 只加载代码或在需要时加载代码的技术，即使用 React）。
但这并不是适用于所有项目的最佳实践，因为还有其他更重要的权重来实现对项目的最佳实践折衷。所以最快的加载时间对电子商务来说（真的）很重要，但在简单的登陆页面、产品页面、公司页面（取决于项目）上并不重要。在这种情况下，情况正好相反：如果资源受到限制，构建页面的保存工作比页面速度更重要。并加快优化成本，消耗大量资源。
在这种情况下，最佳做法是使用经过测试的代码、随时可用的模块、开箱即用的布局，并进行一些小的调整。这意味着：现在的最佳实践确实是加快您的页面构建。你使用像 Bootstrap 这样的大框架来做到这一点，它会生成大量不需要的类，这些类必须加载到你的项目中（希望只有一个文件......）并且由于大小而无法添加到 html 中。并且您使用 CMS 系统（如 Wordpress）并添加模块。这样，您可以更快地添加内容，而您的客户可以自行完成。但这意味着：几乎每个模块都在单独的文件中添加自己的 CSS/JS ......当然你可以优化......但这意味着还有一个使用缓存的模块......使编码和调试更加复杂并且需要更多资源...并且由于您的客户限制资源，在这种情况下的最佳实践折衷方案是一个项目，其中添加了大量 CSS/JS 文件，并且加载了大量代码。但老实说：在大多数情况下，这种类型的项目是可行的，因此在这种情况下，这种方式确实是最佳实践，因为它是对特殊项目基本条件的最佳妥协。
因此，最佳实践取决于您的项目以及您想要/需要优化的属性。仅使用一个主 CSS 文件是一种妥协，我个人（！）会说在两种情况。但这并不（！）需要应用您的工作。
B.一个项目中的多个 ID
但是有一点需要说明：在你的项目中为不同的元素使用多个 ID 根本不是神作，也不应该成为使用不同 CSS 文件的原因。 ID 不仅在页面中而且在项目中都应该是唯一的。因此，这种情况下的最佳做法是养成习惯，由于选择器的特殊性，以独特的形式命名项目中的元素（无论是 Class 还是 ID）。
这是因为最佳实践妥协：这避免了 (1) 不需要的工作（=资源）来调试选择器冲突，以及 (2) 需要使用多个 CSS 文件（= 更好的页面速度）。
你可以做到：
- 如果不需要，请避免使用 ID。在大多数情况下，类也能正常工作！
- 为元素使用唯一的名称结构，并为元素使用嵌套的 CSS。这样可以更轻松地组织代码结构。 （SASS 有助于编写这样的代码结构。）
C.项目文件结构
项目中文件结构的最佳实践也旨在加速您的工作，组织您的编码结构，从而产生更好的代码。显示的结构是值得称赞的结构之一，它以这种方式适用于许多编码人员。因此，该结构已经过测试并且可以正常工作。
但如果另一种结构更适合您，请不要犹豫，根据您的需要进行更改。
我个人不喜欢这种常用结构的原因是目录数量庞大。在目录之间切换让我发疯。如果我只想更改基本部分文件中的某些内容，我需要 (1) 搜索并打开文件夹，然后 (2) 在目录中搜索文件...
对我来说更原生的是在一个目录中组织最需要的部分文件。诀窍：将 SUBDIR 的名称添加到文件的名称中可以保持结构不变。
这样我就可以在一个目录上做最多的工作。我不必先搜索目录，然后滚动并搜索该目录......我只需要滚动一个目录。这大大加快了我的速度，并在文件之间切换时让我的头脑保持自由！
也许你喜欢看看这个：
SASS
|
| -- abstracts
= general files which serves the methods for the project
= and which are not often used
= BUT NOT the variables
= Note: most often these files are parts of (own) modules
|
| - functions
| - mixins
| ...
|
| -- myModules
= just the own modules to include (not to change / work in code)
= like your abstracts
|
| -- module-color-manager
|
| -- _files ...
|
| -- module-overlays
|
| -- _files ...
|
| -- ...
|
| -- vendors
= vendor modules
|
| -- bootstrap
| ...
| ...
|
| -- partials
= writing the css code
= working files (most used files = that is my one working folder)
= organized by adding (your) subdir names to file names
= better/easier overview
|
| -- _base-reset
| -- _base-grid
| -- _base-typography
| -- _base-forms
| -- ...
| -- _menu-main
| -- _menu-footer
| -- ...
| -- _structure-header
| -- _structure-footer
| -- _structure-sidebar
| -- _structure-sections
| --...
| -- _component-cards
| -- _component-carousel
| -- ...
| -- _breakpoint-mobile-landscape
| -- _breakpoint-tablet
| -- _breakpoint-dtp-small
| ...
|
|
_configColors (= my variables,colors separated for better overview)
_configProject (= all variables including settings for ALL (own&vendor) modules
main.scss
但再一次：对您来说最佳实践是组织您的结构，以 (1) 快速工作和 (2) 使页面快速加载。 所以不要犹豫尝试和适应从几个建议中找出最适合您和您的特殊项目的建议。