该SCSS文件结构是否由某CSS/SCSS框架生成？如是，对应为哪个框架？

这个SCSS组织结构属于ITCSS（倒三角CSS架构），是前端领域通用的CSS项目分层规范，并非特定前端框架内置的样式体系，配套的类名规则是BEM（块-元素-修饰符）+ 工具类命名规范，理解分层和命名规则即可快速上手。

ITCSS从上到下的分层顺序对应你项目SCSS目录的文件前缀，优先级逐层升高：

• _settings.*.scss：全局配置层，存放颜色、间距、字体等全局变量，仅做定义不直接输出CSS
• _tools.*.scss：工具函数层，存放mixin、公共函数、媒体查询封装等工具代码，也不会直接输出CSS
• _generic.*.scss：通用重置层，存放浏览器样式重置、normalize规则，消除不同浏览器默认样式差异
• _base.*.scss：原生标签基础样式层，存放无类名的HTML原生标签默认样式，比如h1、p、a、table的基础样式
• _objects.*.scss：公共对象层，存放全局复用的无业务皮肤的基础UI组件，比如按钮、卡片、栅格、容器等，类名一般带o-前缀
• _module.*.scss：业务组件层，存放业务相关的模块样式，你示例中c-开头的类名就属于这一层，c是component的缩写
• _modifier.*.scss/_trumps.*.scss：工具类层，存放单一样式的通用工具类，优先级最高，你示例中u-开头的类名就属于这一层，u是utility的缩写
• _vendor.*.scss：第三方样式层，存放第三方依赖的样式引入或覆盖，对应你项目依赖里的animate.css、slick、sal.js等库的样式

你要修改的Section类名是c-hero__header c-hero__header--resources，按规则直接定位到_module.*.scss下搜索.c-hero__header--resources选择器，修改其中的justify-content: center为justify-content: flex-start即可：

• --resources是修饰符后缀，这个规则仅对资源页的hero头部生效，修改不会影响其他页面的hero组件
• 如果你发现justify-content: center是写在通用的.c-hero__header类中，不想影响其他hero的话，直接给.c-hero__header--resources新增一行justify-content: flex-start即可覆盖通用规则，不会产生全局影响

• 打开根目录的main.scss可以看到所有文件的引入顺序，完全符合ITCSS分层规则，越靠后引入的文件优先级越高
• 修改时不要随意改动_settings、_objects层的通用规则，仅修改对应业务组件的修饰符类，就不会出现全局样式破坏问题
• 类名快速识别规则：c-=业务组件、o-=全局公共组件、u-=工具类、__=组件内子元素、--=组件修饰符

内容的提问来源于stack exchange，提问作者callan