51
原子设计 是一种概述样式表的合理代码结构的方法。它有很多跟随者,但我发现它的命名约定有时可能不明确。什么是分子?什么是有机体?我们怎么知道两者之间的界限?这些特殊问题似乎是解释原子结构的最大绊脚石。
北京高端网站建设今天我们将讨论我使用的内容,我努力解决的原子设计惯例的特定方面,我为解决问题所做的工作,以及我目前如何使用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 |
从本质上讲,组件是一站式商店。原子设计可能完美适用于一个团队,甚至是一个非常熟悉的团队,但在更大的团队中,可以感受到挫败感。
原子设计绝对可以用于保持元素的最小样式,以创建有意义和可重用的界面组件。但是你可能会发现某些方面令人困惑。自己决定什么最适合你,并从中得出结论。和所有事情一样,这只是我的经验,而其他人可能会有不同的立场。
我很想知道你们如何处理这种情况,所以请在评论中告诉我。大家快乐编码!
北京高端网站建设
热门分享
最新文章
2019.08.24
北京建站:整洁的着陆页更好的设计和更高的转化率
2019.08.16
北京高端建站:如何在Web设计项目中使用淡色
2019.08.16
北京企业网站开发:移动设备和响应式设计模式
2019.08.16
北京网站建设:分析材料设计组件的经验教训
2019.08.16
北京网页设计:使用Hero Header充分利用您的设计
2019.08.16
北京网站建设:WordPress的六个最佳备份插件
2019.08.15
北京做网站:编写转换的博客文章的7个技巧
2019.08.15
北京网站开发:降低跳出率并提升转化率的12个技巧
2019.08.15
北京网站优化:您的电子商务转换率如此之低的20个原因
2019.08.15
北京网站设计:2019年有效访客博客策略的终极指南
随机推荐
2019.08.02
北京网站制作:设计师的发展之了解前端
2019.08.13
北京做网站:介绍网站速度测试图像分析工具
2019.05.22
北京建站:给WordPress内容一个语法检查的3种有用的工具
2019.08.13
北京高端建站:设计实施的九项原则
2019.08.13
北京网站设计:在网页设计中融入幽默
2019.05.22
北京网页设计:域名生成器帮助您找到完美的域名
2019.08.14
北京网站开发:社交分享真的对排名很重要吗?
2019.07.11
北京网站建设:提高前端性能的9种方法
2019.08.16
北京高端建站:如何在Web设计项目中使用淡色
2019.08.02
北京网站设计:您的第一个响应式电子邮件构建与电子邮件基础