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

2019.08.02 mf_web

51

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

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

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

编者注

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

原子结构

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

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

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

01
02
03
04
05
06
07
08
09
10
11
12
13
14
- 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

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
// 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/*";

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

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

目录内容

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

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
- 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块,从而为所有涉及代码库的人创建易用性。看一下以下目录结构:

01
02
03
04
05
06
07
08
09
10
11
12
13
- vars
- functions
- mixins
- base
- typography
- plugins
- toolbox
- components
- layout
- pages
- states
- utility
style.scss

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

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

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
// 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的各种想法(模板 - 在本例和页面中称为布局)。

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

1
2
3
4
6
7
8
9
- components
  - _buttons.scss
  - _navigation.scss
  - _masthead.scss
  - _footer.scss
  - _logo.scss
  - _avatar.scss
  - _contact-form.scss
  - _sales-calculator.scss

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

结论

原子设计绝对可以用于保持元素的最小样式,以创建有意义和可重用的界面组件。但是你可能会发现某些方面令人困惑。自己决定什么最适合你,并从中得出结论。和所有事情一样,这只是我的经验,而其他人可能会有不同的立场。 

我很想知道你们如何处理这种情况,所以请在评论中告诉我。大家快乐编码!

北京高端网站建设

最新案例

寒枫总监

来电咨询

18868949445

微信咨询

寒枫总监

TOP