1

在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 文件要下载，但它可能会很大），其次避免冲突将非常困难（一个简单的例子，2个不同主页中的相同ID和具有不同规则的联系人）。

我的想法是构建 home.scss 和 contact.scss（没有部分）等等会更好，有两个不同的（在我的简单示例中）scss 文件将导入它们的特定部分，并且以这种方式每个页面该网站将link不同的CSS页面。

我是否完全偏离了轨道，或者我误解了指南的含义，因此我的设计理念是好的？

4

2 回答 2

2

首先：形成最佳实践以

  • 构建最佳运行页面
  • 优化您的工作流程
  • 节省工作时间
  • 使用经过测试（=工作）的代码解决方案
  • 避免代码冲突

在大多数情况下，不同目标之间存在冲突……您需要找到一个解决方案，该解决方案是您的工作和项目的最佳折衷方案。

A. 一个或多个 CSS 文件

实际上，对于用户体验而言，页面最关键的属性之一是页面加载时间。即亚马逊/易趣/谷歌的页面确实有 100 万分之一决定了数百万的收入。这不是开玩笑，他们对此进行了非常有趣的测试。因此，优化页面的工具（即在浏览器 Chrome 中提供）首先查看页面速度也就不足为奇了。

对于您的 CSS，这意味着：最佳实践（解决方案）是一种加快页面速度的方法，以毫秒为单位。要实现这个最关键的属性是您的页面需要加载的文件数量：这是因为将浏览器与服务器连接所需的时间（每个文件！）比下载时间本身更重要。

因此，简单的优化页面将代码包装在一起并尝试仅加载一个 CSS/JS 文件。更优化的页面不仅可以压缩代码，还可以将不需要的 CSS 类删除到项目中。最佳优化页面领先一步：如果可能，他们将尽可能多的 CSS/JS 代码直接写入 HTML 文件。看看谷歌页面的源代码......谷歌试图通过他们的项目“谷歌移动加速页面”将这种技术推给开发人员一段时间......（尚未提及下一步是使用“新' 仅加载代码或在需要时加载代码的技术，即使用 React）。

但这并不是所有项目的最佳实践，因为实现对项目的最佳实践折衷还有其他更重要的权重。所以最快的加载时间对电子商务来说（真的）很重要，但在简单的登陆页面、产品页面、公司页面（取决于项目）上并不重要。在这种情况下，情况正好相反：如果资源受到限制，建立页面的 SAVED WORK 比页面速度更重要。速度优化会耗费大量资源。

在这种情况下，最佳实践是使用经过测试的代码、准备使用的模块、开箱即用的布局，并进行一些小的调整。这意味着：现在的最佳实践确实是加快您的页面构建速度。您可以使用像 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

但再一次：BEST PRATICE TO YOU 是组织你的方式（1）快速工作和（2）使页面快速加载的结构。因此，请不要犹豫，尝试并从几个建议中调整想法，以找到最适合您和您的特殊项目的一个。

于 2021-04-14T08:23:25.023 回答
2

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

1) 缓存

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

2) 冗余 CSS

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

3) 开发者经验

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

于 2021-04-13T22:56:59.540 回答