html - 用于构建多页站点的替代或更好的 sass 架构指南

Question

在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 文件将导入它们的特定部分，并且在这个站点的每个页面将链接不同的 css 页面的方式。

我是不是完全偏离了正轨，或者我误解了指南的意思，所以我的设计理念是好的？

Answer 1

我可以想到您可能不想使用每页使用一个样式表的方法的三个原因:

1)缓存

一个main.css与 n <page>.css .您要么为整个站点加载一个文件，要么为每页加载一个文件。这里的考虑因素可能是首次加载性能与后续页面加载性能。根据我的经验，CSS 文件并不大，所以我敢说拆分 main.css 可以提高性能。文件可以忽略不计。

2) 冗余 CSS

如果你愿意_grid.scss在您网站的每个页面上，然后您每次都单独加载它。用户可以加载相同的 CSS n 次，其中 n 是他们查看的页面数量。这可能比加载一个 main.css 加起来更大的大小/时间。 .

3) 开发者体验

每次创建页面时，您都必须包含特定的依赖项(即 @import )。此过程的创建和维护可能会在您的 CSS 中引入不需要的结果/复杂性。