我如何构建我的 SCSS 项目以防止自己陷入疯狂

不幸的是，我们不能安装 SCSS 后就指望 Web 项目能神奇地自行修复。通过我用 HTML 和 SCSS 从零开始构建的所有设计，我逐渐意识到，结构是使项目易于维护、清晰易懂、并最终让我避免迷失的根本概念。哈哈！

好的，因为我是一名设计师，所以这个结构是基于原子设计的。如果你不熟悉它，它基本上就是将较小的组件与其他较小的组件组​​合起来，构建更大的组件，直到构建出网站的页面。

不过，请注意，我修改了一些术语，因为在我的项目中使用分子和生物体让我感觉很怪。对于那些不一定是设计师或程序员，但可能关心用户界面细节的人来说，我更喜欢使用更容易理解的术语。

高级文件夹和文件

需要注意的是，主文件夹需要按层级结构整齐排列，以便轻松浏览文件。文件夹的排列顺序应从网站的非实体元素到实体元素。

/摘要
/原子
/块
/成分
/框架
/页
css.scss

至少就我而言，这种安排使得指向特定位置更加明显。作为一名用户体验设计师，我再怎么强调这一点也不为过。我曾经在一个项目中，所有部分都存储在一个目录中，结果我们不得不不断地在一长串未排序的文件之间导航。真有意思！

摘要

摘要包含控制样式的规则和功能，但它们本身并非视觉上可感知的。在更具体的元素之间共享的规则和属性（例如文本对齐、图层和定位）被视为摘要。

/摘要
    ∟ /混合
    ∟ _alignment.scss
    ∟ _动画.scss
    ∟ _appearance.scss
    ∟ _layers.scss    
    ∟ _layout.scss    
    ∟ _positions.scss
    ∟ _sizes.scss

原子

原子代表网站中最小的有形元素，例如颜色、字体和图标。它们在页面中以视觉方式呈现，但需要其他原子才能使其看起来正确。

/原子
    ∟ /颜色
    ∟ /图标  
    ∟ /图片
    ∟ /排版
        ∟ _fonts.scss
        ∟ _sizes.scss
        ∟ _styles.scss

区块

块是由一个或多个原子组成的，用于在页面中以视觉方式呈现元素。按钮可以是文本、颜色和图标的组合，它们被视为块的一部分——网站的构建块。

/块
    ∟ _buttons.scss
    ∟ _cards.scss
    ∟ _标签.scss

成分

组件是网站更突出的功能，它可以独立存在并可以在不同的页面中重复使用。

/成分
    ∟ _article.scss
    ∟ _feed.scss
    ∟ _footer.scss

框架

框架包含更大的布局，用于将组件固定到位。这些布局包括主侧边组合框、网格、部分和包装器。

/框架
    ∟ _columns.scss
    ∟ _grids.scss
    ∟ _sections.scss
    ∟ _wrappers.scss

页面

页面特定的样式在此目录中创建。这些样式可以包含补充样式或覆盖样式。

/页
    ∟ _about-us.scss
    ∟ _products.scss

如果你觉得从现在开始就可以用这个方法，那么下一步就是将你的设计分解成这个层次结构。如果在设计阶段没有遵循原子设计原则，冲突是不可避免的。

通过遵守这一点，您可能会有意或无意地鼓励可以提高一致性和质量的规则和指导方针。

例如，您可以为网站不同部分使用的组件设置边距规则。由于该组件周围的空间可能无法预测，并且您可能不想每次都只针对该组件应用底部边距，因此您可以将实用程序类实现为规则。

因此，不要覆盖如下属性：

.component { margin-bottom: 15px;}
.container > .component { margin-bottom: 25px; } 
.container2 > .component { margin-bottom: 45px; } 

你可以这样做：

.component { // no margins specified }
.mb-sml { margin-bottom: 15px; }
.mb-med { margin-bottom: 25px; }

然后在 HTML 中：

<div class=“component mb-sml”></div>
<div class=“component mb-med”></div>

不过，我想说，在你最终确定这些规则之前，你还需要多次尝试，并深入了解你正在做的事情。毕竟，做事的方法通常不止一种。别忘了用注释记录你的代码，这样更容易进行调整，并最大限度地降低新手的学习难度。

该项目库已发布在GitHub上，其中包含一些样式供您探索和使用。欢迎在此基础上进行开发，并在评论区告诉我您的想法，以便我们共同改进 CSS 流程，造福所有人。

迁移到 Vue.js

我现在学习 Vue.js 时的主要区别是，我将 SCSS 组件部分移动到每个自己的 Vue 组件中。

我还必须在 SCSS 文件夹中生成一个base.scss，然后将其导入到这些组件中作为摘要。

/源
    ∟ /资产
    ∟ /组件
    ∟ /scss
        ∟ /摘要
        ∟ /原子
        ∟ /方块
        ∟ base.scss

因此在 Vue 组件中：

<template></template>
<script></script>
<style lang=“scss”>
    @import “../scss/base”;

    .component{
        //some properties
    }

</style>

好了，就到这里。希望你觉得这篇文章有用。下次再见！