Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >TW洞见 | 用“五个为什么”写CSS

TW洞见 | 用“五个为什么”写CSS

作者头像
ThoughtWorks
发布于 2018-04-20 06:38:22
发布于 2018-04-20 06:38:22
8360
举报
文章被收录于专栏:ThoughtWorksThoughtWorks

今日洞见

文章作者来自:ThoughtWorks - 张铮铮。封面图片来自网络。

本文版权归【ThoughtWorks中国】(微信ID:思特沃克ThoughtWorks)。任何个人或单位未获得明确的书面许可,不得对本文内容复制、转载或进行镜像,否则将追究法律责任。

相信大多数人都有过关于CSS的痛苦经历,从我加入公司到现在,不到两年的时间里,听到最多CSS相关的讨论就是‘很难调’。所以我也一直在探究这其中有怎样的问题,为什么很多人觉得CSS很难写,如何才能让其他人更优雅的写CSS。在Code Review的时候,我渐渐的发现了问题所在,其实很多人已经掌握了丰富的CSS知识,但却不知道如何分组属性写成class。最后只好在需要改变样式的元素上随意起个名字做class然后把所有要写的属性丢进这个class里,如果优先级不够,再把前面的选择器都加上。结果就是CSS代码不断堆积,重复和冗余不断增多,维护也变得举步维艰。

问题找到了,但如何解决呢,虽然我在项目组内做了几次分享,还经常在Code Review的时候提出一些问题,却还是收效甚微。有时候知道什么是正确的很容易,但知道如何才能做到正确却很难。直到最近,看了几本书之后,发现了一个很适合指导设计CSS的方法,那就是五个为什么或者叫五问法。五问法来自丰田的精益生产,后来自然衍生到了精益创业中,在DDD以及UX相关书籍中都会见到这个方法,其主旨是深入发觉大量现象的背后所隐藏的真正原因。乍一看它是一个管理方法,其实我觉得它是一种思维方式,即刨根问底的找到问题的根本原因并解决。所以被应用于各个领域,自然对于CSS所面临的问题也正恰如其分。

举个例子

先来举个例子吧,某天Code Review发现了一条CSS代码是这样写的:

.max-width {

max-width: 300px;

}

由此产生了以下对话(纯属虚构):

UI Dev:“不应该这样写,这和直接写内联样式有什么区别呢?”

Dev:“如果我不加最大宽度,页面上那个元素左边就会多出一部分,不然加个margin外边距可以吗?”

UI Dev:“这个...我也不确定,我从没遇到过这样的问题,一定是哪里有问题。”

Dev:“确实这样写也挺不好的,过一段时间就不知道这行代码什么意思了,也不敢修改它。但究竟应该如何写呢?”

UI Dev:“呃,这样吧,我们来试试五个为什么,找找问题的根本原因。”

Dev:“好啊,CSS的问题也困扰我好久了,能解决就最好了。”

UI Dev:“首先问问,为什么要给元素加最大宽度呢?”

Dev:“因为不加就就会多出一部分呀。”

UI Dev:“那为什么这个元素会多一部分呢?”

Dev:“因为没加最大宽度,开个玩笑,别生气,其实我也不确定,不过用DevTools看了一下,好像它的父元素的宽度也不对。”

UI Dev:“已经接近了,为什么父元素的宽度不对?”

Dev:“因为父元素的内边距两边不一样。”

UI Dev:“为什么父元素的内边距不一致?”

Dev:“啊,我知道了,原来为父元素的父元素写了一个last的伪选择器,它是用来把padding-right设为0的,因为父元素现在正好是最后一个,所以被影响了。”

UI Dev:“别急,为什么要把最后一个元素的padding-right设为0?”

Dev:“因为原先最后面的那个元素里面是一个无法修改样式的控件,需要把padding-right设为0才能放得下。”

UI Dev:“所以这才是问题所在,我们的意图是给空间的容器加上padding-right为0的属性对吗?而不是给最后一个元素加,所以应该写一个class,也许叫做‘widget-container’之类的,放在那个容器上,然后把last伪选择器删掉,如此一切就正常了。原先出问题的地方其实是没问题的。”

Dev:“原来是这样,太好了,我学到了,样式出问题的地方不一定是代码有问题的地方,五个为什么太有用了。”

这样反复问多次“为什么”可以让我们找到问题的根本所在,如果仅仅从表面现象去解决问题很可能导致南辕北辙的后果。而且在例子中的last伪选择器就是因为没有找到根本原因而简单粗暴的写了这样一行代码而导致的。这个例子还很好的展现了五个为什么对于CSS的益处,不仅是找到问题的根本原因,还使得我们在写CSS的时候意图更加明确。如此一来,class命名难的问题也迎刃而解,padding-right应该为的0的元素是那个控件的容器,所以很容易想出“widget-container”这样的名字,因为通过五个为什么的方法找到了真正的意图,此时,class叫什么和应该放在哪都是水到渠成了。

按比例投入

但有时候我们所面对的项目不会这么善良,“为什么”的层级越多,说明CSS的关系也越复杂,所以现在我们来谈谈五个为什么中的一个重要原则,按比例投入。其主旨是小问题小投入,大问题大投入,问题等级越高,投入也应该越大。在CSS中来讲,就是当发现样式异常时,使用五个为什么深入找到的根本原因所在之处的重复次数越多,说明问题越严重,对问题的解决方案也应投入的更多。

再回到上面的例子中,通过一个元素位置异常的问题,找到根本原因来自一个控件需要内边距为0的容器元素,由于第一次发现,所以选择投入较小的解决方案,针对该控件加一个class用来去掉内边距。目前看来是很正确的,但如果接二连三的从不同的问题上深入找到这个控件上,那就说明问题等级提升了,不应该仅仅是在每个调用控件的容器上添加该class。此时我们可以考虑其他方式,比如把所有容器内边距都设为0,而有针对性的对内部元素添加外边距,如果问题等级继续提升,还可以修改甚至替换控件,或者重构其他部分来适应该控件。总之就是要按问题等级选择解决问题的手段,这样的好处不仅仅是原先在精益中那样可以自动调节效率,还可以等样式需求更明确的时候作出相应的重构。

由于CSS的描述性,使得它很自由,所以同一个需求,往往一百个开发者有一百种实现。在第一次碰到一个需求时,更是很难写出最佳实现,只能有针对性的写一个专属class把需要的属性扔进去。其实问题不在于此,而在于之后是否能在相同问题出现时重构原先的代码,根据所有相关问题写出更具普适性的class。有经验的UI Dev有时会通过经验来判断,直接写出这种class,Bootstrap这类框架就是这样的,但没有或较少经验的开发者就会产生疑惑。五个为什么的按比例投入原则可以很好的驱动CSS的开发,用深入的根本原因连接不同元素甚至不同页面上出现的问题,这样使我们能够安心的以目前的问题等级来组织代码,等到再次碰到问题并找到这里,才再次重构以解决问题。

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2015-09-12,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 思特沃克 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
浅谈 CSS 的用法
   为了让网页元素的样式更加丰富,也为了让网页的内容和样式能拆分开,CSS 由此诞生,CSS 是 Cascading Style Sheets 的首字母缩写,意思是层叠样式表。有了 CSS,html 中大部分表现样式的标签就废弃不用了,html 只负责文档的结构和内容,表现形式完全交给 CSS,html 文档变得更加简洁。
Demo_Null
2020/09/28
1.6K0
浅谈 CSS 的用法
【CSS】CSS三大特性、盒子模型
​相同选择器给设置相同的样式,此时一个样式就会覆盖(层叠)另一个冲突的样式。层叠性主要解决样式冲突的问题。
P_M_P
2024/04/12
2770
【CSS】CSS三大特性、盒子模型
前端成神之路-盒子模型
网页布局中,我们是如何把里面的文字,图片,按照美工给我们的效果图排列的整齐有序呢?
海仔
2020/11/12
1.1K0
前端成神之路-盒子模型
大型编程电视剧连载 | CSS知识点硬核整理归纳(二)
网页布局中,我们是如何把里面的文字,图片,按照美工给我们的效果图排列的整齐有序呢?
上分如喝水
2021/08/16
1.9K0
大型编程电视剧连载 | CSS知识点硬核整理归纳(二)
勇闯44关深入浅出CSS基础之第一篇
欢迎回来三钻的FCC前端教程,上一篇文章我们通过28关学会了HTML与HTML5网页开发基础。这一期我们一起攻破前端第二大知识点《CSS基础入门》。因为这一课一共有44关,我把文章分成两期更新。敬请期待!
三钻
2020/10/29
1.3K0
勇闯44关深入浅出CSS基础之第一篇
CSS学习笔记(基础篇)
CSS 指层叠样式表 (Cascading Style Sheets)(级联样式表)
Daotin
2018/08/31
4.8K0
CSS学习笔记(基础篇)
【QT】QT界面的美容院 -- QSS
🔥 在网页前端开发领域中,CSS 是一个至关重要的部分,描述了一个网页的 “样式”,从而起到对网页 美化 的作用。
IsLand1314
2025/04/15
4730
【QT】QT界面的美容院 -- QSS
Web前端学习 第2章 网页重构4 css选择器和常用属性
CSS(层叠样式表)控制着网页的样式,例如我们之前编写的HTML文件,文字的颜色都是默认的黑色,如果希望将文字设置成其他颜色,就需要CSS了,可以在HTML文件中填写如下代码,即可把一个h1标签的文字设置成红色;
学习猿地
2020/06/12
4410
Web前端学习 第2章 网页重构4 css选择器和常用属性
【海贼王航海日志:前端技术探索】CSS你了解多少?(三)
可以看到,width、height是500 * 250,而最终整个盒子大小是520 * 270。边框10个像素相当于扩大了大小。
枫叶丹
2024/08/17
1260
【海贼王航海日志:前端技术探索】CSS你了解多少?(三)
CSS快速入门
css中有四种选择器,分别是class选择器,id选择器,标签选择器,属性选择器。例如:
zy010101
2022/05/30
8280
CSS快速入门
CSS基础知识巩固你的前端基础
CSS基础知识 css,英文 Cascading Style Sheets,中文名:级联样式表。层叠样式表。 css是一种表现语言,是对网页语言的补充。 css用于网页的风格设计,包括字体,颜色,位置等。 css使用的4中方式:引入外部样式文件,导入外部样式文件,使用内部样式定义,使用内联样式定义。 引入外部样式文件: <link type="text/css" rel="stylesheet" href="css样式文件的url"/> 导入外部样式文
达达前端
2022/04/13
2.2K0
【CSS】CSS 总结 ⑤ ( CSS 盒子边框 | CSS 盒子模型内边距 | CSS 盒子模型外边距 | CSS 盒子模型圆角边框 | CSS 盒子模型阴影 ) ★
HTML 的 一个布局 可以看做一个 矩形的 盒子模型 , 该 盒子模型 是一个用于 容纳 标签元素 的容器 ;
韩曙亮
2024/03/12
5840
【CSS】CSS 总结 ⑤ ( CSS 盒子边框 | CSS 盒子模型内边距 | CSS 盒子模型外边距 | CSS 盒子模型圆角边框 | CSS 盒子模型阴影 ) ★
CSS之box-sizing的应用
在我们说box-sizing之前,我们先了解下前端经典的“盒子模型”,聪明的程序猿们巧妙的用盒子模型这一形象将枯燥的css代码表示出来:想象一个盒子,它有:外边距(margin)、边框(border)、内边距(padding)、内容(content)四个属性;这些加起来就是一个完整的元素。
OECOM
2020/07/01
4260
【前端基础篇】CSS基础速通万字介绍(下篇)
以及在看本篇之前需要有HTML的基础,详情请见【前端基础篇】HTML零基础速通,同时还有【前端基础篇】CSS基础速通万字介绍(上篇)
半截诗
2024/10/09
3150
【前端基础篇】CSS基础速通万字介绍(下篇)
Day4:html和css
行高可以让一行文本在盒子中垂直居中对齐,文字的行高等于盒子的高度,行高-上距离-内容高度-下距离.
达达前端
2019/07/03
4.2K0
CSS3学习(一)——基础学习
CSS 1.1 CSS 编写的位置    使用CSS来修改元素的样式 第一种方式:内联样式/行内样式 第二种方式:内部样式表 第三种方式:外部样式表(最佳实践) 1.1.1 内联样式   在标签内部通过style属性来设置元素的样式 问题:  使用内联样式,样式只能对一个标签生效,  如果希望影响到多个元素必须在每一个元素中都复制一遍  并且当样式发生变化时,我们必须要个一个的修改, 非常的不方 便 注意:开发时绝对不要使用内联样式 <p style="color: red; fon
传说之下的花儿
2023/04/16
8410
【JavaEE初阶】CSS
层叠样式表。(Cascading Style Sheets) CSS 能够对网页中元素位置的排版进行像素级精确控制, 实现美化页面的效果. 能够做到页面的样式和结构分离。
xxxflower
2023/10/16
3350
【JavaEE初阶】CSS
Css详细介绍
(就近原则): !important > id > class > tag (!important 比内联优先级高)
FGGIT
2024/10/15
2770
CSS三大特性
当然如果没有学习之前的知识,可以到我的主页中查看之前的文章:秋落雨微凉 - 博客园
秋落雨微凉
2022/10/25
1.3K0
CSS三大特性
CSS 入门指南(二):盒模型 & 浮动弹性布局 & CSS 特性
这个盒子由这几个部分构成 : 边框 border、 内容 content、 内边距 padding、 外边距 margin
IsLand1314
2025/03/30
2000
CSS 入门指南(二):盒模型 & 浮动弹性布局 & CSS 特性
相关推荐
浅谈 CSS 的用法
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档