GMTC 全球大前端技术大会(北京站)门票 9 折特惠中,点击立减 ¥480 了解详情
写点什么

避坑指南:如何在基于组件的应用中使用 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:151813

评论

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

一入爬虫深似海,从此早睡是路人

马士兵-苹果老师

【转载】图形化系统开发组件X-Series(一)——XrossUnit介绍

赫杰辉

2020年12月的面试经历:美团4面+字节4面(均已拿offer),面试真题分享

Java架构师迁哥

TcaplusDB君· 行业新闻汇编(4月21日)

TcaplusDB

数据库 nosql 分布式 TcaplusDB

被“百万”程序员吹捧上天的阿里Java面试手册!GitHub已惨遭封杀

Crud的程序员

Java 编程 架构 java程序员

干货来袭!阿里大牛亲码Java面试全解笔记全网开源!(1024道Java面试真题+54道HR面必问软性问题整理

Java王路飞

Java spring 程序员 架构 面试

重磅来袭:Spring之RequestBody的使用姿势小结

学Java关注我

Java 编程 架构 技术 程序人生

上头!GitHub上线半小时,10w访问被下的JVM实战笔记,内容太干了

周老师

Java 编程 程序员 架构 面试

聪明人的训练(二十二)

Changing Lin

4月日更

前端规范之路

白玉兰开源

前端 前端框架 前端进阶 开发规范

大专学历,CRUD3年进大厂面经分享!鬼知道我是怎么过来的!

程序员小毕

Java spring 程序员 架构 面试

简简单单才是真,初试 Svelte

LeanCloud

彻底搞懂ThreadLocal

千珏

Java 源码分析 多线程 ThreadLocal

从源码分析 MySQL 死锁问题入门

比伯

Java 编程 程序员 架构 计算机

Redis的适用场景简单剖析

大数据技术指南

redis 4月日更

前端DDD总结与思考

白玉兰开源

前端 前端开发 DDD 前端进阶

离谱!阿里面试官嫌面试者技术差,竟彻夜怒肝524页面试通关手册

周老师

Java 编程 程序员 架构 面试

软件测试——教育机构课程顾问常见黑话大全

程序员一凡

程序员 软件测试 教育 机构 教育培训

一文搞定 Flink Job 的运行过程

shengjk1

flink flink源码 flink源码分析

GitHub惊现!JVM G1GC的算法+实现,90张图+33段代码,你的面试专属!

Java架构师迁哥

IPFS挖矿算力排行榜怎么看?IPFS挖矿收益怎么计算?

投资矿机v:IPFS1234

IPFS挖矿算力排行榜怎么看 IPFS挖矿收益怎么计算

Redis为什么是单线程?高并发响应快?

Linux服务器开发

redis Linux服务器开发 网络io C++后端开发 单线程

前端⼤规模构建演进实践

白玉兰开源

架构 前端 前端进阶

知识分享:SQL注入的流程和步骤

马士兵-苹果老师

sql

爱了!Java知识点最强总结,美女学姐带你入坑,网友感叹:真香

java专业爱好者

Java

0门槛成为“技术牛人”!星环科技线上分享课“星课堂”开播,快来报名,一探究竟

星环科技

人工智能 数据库 云计算 大数据 直播技术

华云大咖说 | 华云数据与数科网维携手共建国产云生态

华云数据

家务活中的python协程

行者AI

协程 python学习

腾讯网络安全大牛用16部分讲明白黑客攻防(从0到1,新手必看)

Machine Gun

黑客 网络安全 信息安全 行业趋势

智汇华云 | ArSDN打通软件定义数据中心的“任督二脉”

华云数据

肝了15000字性能调优系列专题(JVM、MySQL、Nginx and Tomcat),看不完先收藏

北游学Java

Java MySQL nginx tomcat JVM

DIY 的 Kubernetes 集群的稳定性保障实践

DIY 的 Kubernetes 集群的稳定性保障实践

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