北京高端网站建设：构建Sass——告别原子设计歧义

2019.08.02 mf_web

原子设计是一种概述样式表的合理代码结构的方法。它有很多跟随者，但我发现它的命名约定有时可能不明确。什么是分子？什么是有机体？我们怎么知道两者之间的界限？这些特殊问题似乎是解释原子结构的最大绊脚石。

Atoms Molecules Organisms模板和页面 — 原子，分子，生物，模板和页面

北京高端网站建设今天我们将讨论我使用的内容，我努力解决的原子设计惯例的特定方面，我为解决问题所做的工作，以及我目前如何使用7-1模式组织Sass 。

编者注

原子设计的作者Brad Frost 后来澄清了这样一个事实，即它的方法实际上并没有规定任何CSS结构。相反，它提供了思考构建用户界面的心理模型。抱歉布拉德！

原子结构

“我们不是在设计页面，我们正在设计组件系统。” - Stephen Hay

我喜欢原子设计及其意识形态，但我发现他们在与那些不太熟悉它们如何运作的团队成员合作时会崩溃。过去我使用了以下文件夹结构：

文件夹组织： root/css/src/

- vars

- functions

- mixins

- base

- plugins

- typography

- atoms

- molecules

- organisms

- templates

- pages

- states

- utility

style.scss

在style.scss Sass中，使用gulp-sass-glob-import导入 partials ：

Sass导入索引文件： root/css/src/style.scss

// Config

@import "vars/*";

@import "functions/*";

@import "mixins/*";

// Bower Components

@import "../bower_components/normalize-scss/_normalize";

// General DOM selector styles

@import "base/*";

// Fonts & General Type Styling

@import "typography/*";

// 3rd Party Addons

@import "plugins/*";

// Atomic Design

@import "atoms/**/*";

@import "molecules/**/*";

@import "organisms/**/*";

@import "templates/**/*";

@import "pages/**/*";

// Variations thru Events

@import "states/*";

// General UI Helpers

@import "utility/*";

这种设置的顺序非常重要。如果需要调整“原子”，“分子”或“有机体”，则在模板或页面中进行的声明将覆盖上述部分以及每个其他部分前面部分。

如果需要，该订单还可以覆盖插件的样式（通常根据我的经验）。

目录内容

每个原子目录（原子，分子，有机体，模板，页面）的大部分内容都将包含理论上易于查找且在需要时易于管理的部分内容。

- atoms

- _buttons.scss

- _links.scss

- _inputs.scss

- molecules

- _navigation.scss

- _search-form.scss

- _contact-form.scss

- organisms

- _header.scss

- _footer.scss

- _content.scss

- templates

- _sticky-footer.scss

- _grid-2column.scss

- _grid-3column.scss

- pages

- _home.scss

- _about.scss

- _contact.scss

如果你对Atomic Design很明智，那么该组织似乎是明智的，但对于那些不熟悉这种方法和术语的人来说却是不合适的。不了解Atomic Design的开发人员不会理解搜索表单位于molecules目录中的事实，并且可能会引发其他区域的搜索以进行编辑，或者只是感到沮丧并创建新文件; 我已经看到它发生了。

组件结构

截至撰写本文时，我采用了一种方法，将元素完全视为组件，如lego块，从而为所有涉及代码库的人创建易用性。看一下以下目录结构：

- vars

- functions

- mixins

- base

- typography

- plugins

- toolbox

- components

- layout

- pages

- states

- utility

style.scss

希望你可以通过这个例子看到收集每个文件夹的目的是相当直观的（工具箱除外）。“工具箱”是存储与实用程序无关的助手的位置，例如布局和对象模式的自定义类，自定义关键帧动画等。对我来说，这些工具箱项通常最终会作为我可能会覆盖或将来可能想要的部分，以及它们在组件目录之前导入的原因。

在这个阶段，partials被加载到样式索引中，如下所示：

// Config

@import "vars/**/**";

@import "functions/*";

@import "mixins/*";

// UI

@import "../bower_components/normalize-scss/_normalize";

@import "base/*"; // general styling using DOM element selectors

@import "typography/*";

@import "plugins/**/*"; // 3rd party add-ons

@import "toolbox/**/*"; // Non-Utility Helpers

@import "components/**/*"; // lego blocks

@import "layout/**/*";

@import "pages/**/*";

@import "states/**/*";

@import "utility/**/*";

“组件”将包含UI的各个部分，例如按钮，输入，徽标，头像，页眉，页脚，表单，甚至导航等模块。组件可以是任何东西，只要它们只做一件事，一件事，可重复使用，在整个项目中重复使用，最重要的是独立; 如果你问我，那就不是一个普遍理解的错误定义。这种特殊的方法还实现了SMACSS （状态）和Atomic Design的各种想法（模板 - 在本例和页面中称为布局）。

在查找组件目录和查找关联接口部件方面更容易，开发人员可能正在跟踪; 例如：

五

- components

- _buttons.scss

- _navigation.scss

- _masthead.scss

- _footer.scss

- _logo.scss

- _avatar.scss

- _contact-form.scss

- _sales-calculator.scss

从本质上讲，组件是一站式商店。原子设计可能完美适用于一个团队，甚至是一个非常熟悉的团队，但在更大的团队中，可以感受到挫败感。