1. 首页
  2. css

CSS构建和维护OUI(Optimizely\”s UI库):第2/2部分

以下是丹尼尔·奥康纳的客座帖子。丹尼尔分享了更多关于OUI的信息,这是Tom Genoni在第1部分中介绍的UI库。
一年多前,我们在Optimizely开始执行一项任务,以统一我们的产品设计,并处理不断增加的CSS负载。同为UI工程师的Tom Genoni在2014年率先开展了这项工作,并创建了名为OUI的Sass框架。
我们首先将OUI集成到Optimizely应用程序的一小部分中,并在随后的几个月内逐渐将其添加到整个a/B测试产品中。此后,我们使用该框架开发了一个全新的产品,以及一些较小的产品。范围的扩大带来了独特的挑战,要求我们改进执行战略。
在第1部分中,Tom描述了建立和传播OUI所采取的高层次步骤。在这篇文章中,我将讨论我们所做的Sass体系结构决策和我们添加的流程,这些决策和流程允许我们扩展OUI。OUI的解剖结构是在Optimizely代码库之外创建的,并存在于GitHub上自己的存储库中。该体系结构允许开发人员通过重写变量轻松修改默认样式,并创建与框架配合良好的部分(组件和对象)。
根目录`my_应用程序.scss`文件将来自OUI和本地项目的变量和部分组合起来。
上图显示了我们通常如何将OUI集成到应用程序中。实际上,我的_应用程序.scss`文件通常如下所示:
// [1] Import OUI and app functions and mixins@import \”oui/partials/elements/functions\”;@import \”oui/partials/elements/mixins\”;@import \”my_app/partials/elements/functions\”;@import \”my_app/partials/elements/mixins\”;// [2] Import OUI and app variables@import \”oui/oui-variables\”;@import \”my_app/my_app-variables\”; // [3] Import OUI and app partials@import \”oui/oui-partials\”;@import \”my_app/my_app-partials\”; // [4] Import OUI trumps@import \”oui/partials/trumps/background\”;@import \”oui/partials/trumps/borders\”;@import \”oui/partials/trumps/layo ut\”;@import \”oui/partials/trumps/margin\”;@import \”oui/partials/trumps/padding\”;@import \”oui/partials/trumps/sizing\”;@import \”oui/partials/trumps/type\”;
关于上面的SCS的一些注意事项:
1. 我们首先导入OUI的mixin和函数,然后是我们需要的任何自定义函数。
2. OUI的变量在我们的应用程序变量加载之前加载。这允许我们修改或覆盖现有变量,并引入自定义变量。
3. 这是文件的主要内容。第一部分导入OUI的所有基本规则、组件和对象,而第二部分导入产品的自定义代码。通过在这里列出它们,我们可以确保它们能够提取所有默认变量以及应用程序变量添加或更改的所有变量。
4. 我们的实用程序类Trumps是最后加载的,因为它们执行特定的任务,不应被覆盖。
5. 使用npm和语义版本控制添加更改日志
6. 实现构建系统
7. 创建动态文档解决方案

CSS构建和维护OUI(Optimizely\”s UI库):第2/2部分 为WP2原创文章,链接:https://www.wp2.cn/css/css%e6%9e%84%e5%bb%ba%e5%92%8c%e7%bb%b4%e6%8a%a4oui%ef%bc%88optimizelys-ui%e5%ba%93%ef%bc%89%ef%bc%9a%e7%ac%ac2-2%e9%83%a8%e5%88%86/