写点什么

避坑指南:如何在基于组件的应用中使用CSS架构

2020 年 1 月 12 日

避坑指南:如何在基于组件的应用中使用CSS架构

CSS 架构是一个常被开发人员忽视的复杂问题。为简化开发人员的工作,可对每个组件封装(Encapsulate)CSS,由此避免许多 CSS 相关的坑,但这种“变通”做法是以降低可重用性和可扩展性为代价的。


一旦开发人员定义了一个 CSS 类,该类将自动作用于整个应用的范围之内,会修改所有相关元素及其子元素。对于那些结果可预测的简单应用,这种做法非常适用。但是随着应用和团队规模的增长,该做法立刻会出现问题,将导致一些不可预料的问题。


上述问题的最初解决方案是BEM(Block Element Modifier)规范。作为一种方法和命名规范,BEM 为开发人员清晰标识了每个类的行为,有助于避免产生冲突。例如,form__submit–disabled 指示开发人员正在表单内设置一个提交按钮的状态为禁用。


但作为命名规范,难以强制开发人员去遵守 BEM。此后,JavaScript 推出了一些更易于实现的解决方案,包括CSS ModulesStyled Components,并得到了开发人员的采纳。这些方法采用不同的技术路线,在单个组件中添加 CSS,同样解决了许多 BEM 所针对的问题。


解决组件化设计中缺少跨应用架构的问题,涉及三个独立的方面:


  1. UI:包括主题和一般应用行为。

  2. 布局组件(Layout Components):也常被称为“容器”或“智能组件”。布局组件确定指定组件在特定场景中的行为,通常是不可重用的。

  3. 展示组件(Presentational Components):是增强应用功能的可重用代码片段。为增加展示组件的多样性,其中应尽可能避免包含逻辑。


UI


UI 会定义在作用于整个应用的全局 CSS 文件中。主要包括两个方面:


  1. 常量类(Constant):开发人员过去会使用所有主流浏览器都支持的自定义CSS属性,最近可使用SCSS或LESS变量,


CSS 自定义属性主要有两方面优点。第一,可在运行时做修改。对于转换主题或支持夜景模式,这是一种很好的解决方案。第二,支持在布局组件中修改,开发人员更易于实现小范围内的设计调整。


  1. UI状态(State)定义通常可分解为三方面:

  2. 修饰符(Modifier)状态:确定各元素的规格(大/小)、设计(主/次)等的变化。

  3. 行为(Behavioral)状态:包括整个应用范围的状态。例如,在线/离线、正在加载等。

  4. 伪(Pseudo)状态:启用/禁用等临时状态,以及:hover和:focus等CSS状态。


布局组件


布局组件会按指定方式在页面上组织可重用的组件。布局组件的功能可分解为两个方面,一是以设定属性和设计对可重用组件做初始化,二是使用 CSS Grid、Flexbox 等功能将其所控制区域设定为特定的布局。


可重用组件


可重用组件中几乎不包含逻辑。它们从布局组件接收数据,当布局组件执行操作时会触发相关事件(或回调)。


为确保组件的可重用性,开发人员应尽量避免在组件中添加逻辑和设计。具体而言,通常应避免添加显示、宽度、留白等属性。


这并非易事,因为可重用组件常常需要处理比其最初设计更多的场景,例如,支持多行文本的按钮,支持显示更多文本内容的标题等。但可重用组件确保了组件真正的可重用性,无需在应用下次使用时进行重写。


原文链接:


CSS Architecture for Component-Based Applications


2020 年 1 月 12 日 09:151747

评论

发布
暂无评论
发现更多内容

回"疫"录(2):不知者无畏

小天同学

疫情 回忆录 现实纪录

最近的一些人生感悟

小智

人生 哲学

漫谈哲学与编程

keelii

编程 哲学

很不幸,自动化测试永远只能是必要非充分条件

刘华Kenneth

DevOps 敏捷 自动化 测试 金字塔

如何阅读源码?

武培轩

Java 源码 面试 进阶 后端

软件工程的史前时代 -- Therac-25 事件

王泰

质量管理 软件工程 软件危机 软件测试

加班能解决交付的期望么?

拖地先生

项目管理 领导力 管理 时间管理

聊聊苹果公司技术部门的宫斗和冷战

赵钰莹

程序员 外包 apple

Facebook在用户增长到5亿时的扩容策略

Rayjun

团队管理 扩容

软件世界中的个人英雄与团队协作

王泰

团队管理 软件工程 团队协作

浅谈负载均衡

Damon

Java 负载均衡 Kubernetes 微服务架构 Spring Cloud

知乎开发了一个搜索引擎

红泥小壶

搜索引擎 百度 知乎

程序员陪娃漫画系列——修龙头

孙苏勇

生活 程序员人生 陪伴 漫画

基于Kubernetes的多云和混合云

倪朋飞

云计算 架构 Kubernetes 微服务架构 Service Mesh

终极 Shell

池建强

Linux Shell

敏捷(组织)转型的6个准备条件

Bob Jiang

团队管理 敏捷 组织转型

随手记备忘录的好习惯

changyou

在谈判中,你有哪些属于自己的独特的方法和技巧?

Yolanda

Disruptor为何这么快

Rayjun

Java Disruptor

揭秘|为何程序员们能一直保持高收入?

丁长老

学习 程序员 写作 高薪

敏捷开发 | 张三与需求管理

Worktile

敏捷开发 需求管理

我敢说 80% 的程序员都掉进了「老鼠赛跑」的陷阱

非著名程序员

读书笔记 程序员 程序人生 提升认知

有关Kotlin Companion 我们需要了解到的几个知识点

王泰

Java 编程 kotlin 编程语言

理性主义和实证主义

王泰

理性主义 实证主义 哲学 软件工程

死磕Java并发编程(6):从源码分析清楚AQS

七哥爱编程

Java Java并发 并发编程 AQS

Zoom的加密算法,到底有什么问题?

范学雷

算法 编码习惯 产品设计 安全 编程语言

小论互联网项目管理

南方

项目管理 互联网 个人成长 碧海潮生曲

克制文章长度

changyou

写作平台使用感受

小天同学

产品 体验 反馈

Java并发编程系列——线程

孙苏勇

Java 并发编程 线程

「超级右键」

非著名程序员

macos 程序员 效率工具 软件 Mac

避坑指南:如何在基于组件的应用中使用CSS架构-InfoQ