CSS编程中一些值得注意的地方小结

时间:2021-05-08

CSS即层叠样式表,所以一层一层覆盖其实是其本质特征。真正的问题在于维护,许多人认为CSS仅是样式,不是代码,无需维护,所以任意书写,只要将自己需要的样式的优先级设为最高即可,才导致了深层级CSS的出现,因为每次添加一个样式就必须比以前的优先级高才能在页面看到。深层级不仅造成维护性降低,可读性也是一个问题,人不是机器,无法很优雅的按优先级阅读,所以很难确认一个样式用于哪里,其实还存在许多的冗余样式,在任何地方都被覆盖的样式。这样的代码在扩展性上,一开始反而是有优势的,因为添加一个新class,无需担心影响其他地方,但慢慢随着项目规模的增大,页面增多,需要复制样式的地方也越来越多,它们之间又存在微小的差异,设计的更改,需求的变化,这一切都会将这种快餐式的CSS推进柏油坑。因为难以维护,所以无法响应需求,所以无法复用,只能复制,恶性循环。

正如上面所说的,问题在于可读性、维护性、扩展性、复用性这几个方面。所以只要提高它们就能解决问题, 虽然这么说,也不是如此简单的。先来谈谈在CSS中,这些概念都有着怎样的意义。
可读性

有人认为CSS不是程序,不需要可读性,有人认为CSS只要写出来就有可读性,因为很简单。抛开各种预处理器不说,原生CSS结构确实简单,没有需要编程的部分,但仍然可能导致混乱。原因有二,一是CSS可以层叠,其中涉及到了优先级和作用范围,如果写的不好,人很难读出其中的意义,二是CSS属性众多,加上CSS3引入了很多用法独特的属性,一个选择器可能包含几十个属性。比如下面这段我随便写的CSS代码:

CSS Code复制内容到剪贴板
  • span{
  • -webkit-box-shadow:6px4px4pxred;
  • -moz-box-shadow:6px4px4pxred;
  • box-shadow:6px4px4pxred;
  • }
  • divspan{
  • border-width:4px;
  • border-style:dotted;
  • border-color:blue;
  • }
  • #box{
  • border-left:2pxsolidred;
  • border-bottom:2pxsolidred;
  • }
  • 乍一看也没什么,都是border,大致能看出来这段CSS只是为了添加一个红色的阴影让box看起来比较立体。但中间的部分似乎是捣乱的,你可能会说这太傻了,看不到吗。是的,当这3部分散落在上万行的CSS中时,肯定看不到。于是有人很自然的想起了我们可爱的浏览器,没错,在浏览器中可以快速找到作用于目标的CSS样式,但这也是万恶之源。首先我假设你不知道中间那部分东西是为了什么而写的,因为你是靠浏览器找到它的。然后剩下两种可能,不管三七二十一改了再说和看看它为什么存在。前者悲剧的可能性是100%,后者悲剧的可能性是90%,因为你已经掉坑里了,很快我们会发现要修改它还牵扯到了另外的地方,接着在浏览器中探索到另一个莫名其妙的样式,当你弄懂全部的时候,你应该已经把上万行的代码弄了个一清二楚了,也许最幸运的是,浪费了几个小时的时间发现只需要修改一行就能达到目的。

    当然,我们可以天真的认为,只要把他们写在一起就可以了,这样找起来很简单。而我将继续顺着这样的思路来尝试曝露问题。
    维护性

    所谓物以类聚是很有道理的,人们习惯将事物归类,但问题是分类标准,样式并不关心业务,无论是什么文字内容,还是功能有何不同,它在乎的只是样式,比如文字的尺寸,间距和宽高,颜色等等。如果简单的将一个组件的样式放在一起,势必带来的就是小段代码的重复书写。不觉得有多严重?我来举个栗子。

    CSS Code复制内容到剪贴板
  • aside{
  • box-shadow:6px4px4px#AA3343;
  • }
  • nav{
  • box-shadow:6px4px4px#AB3633;
  • }
  • .item{
  • box-shadow:6px4px4px#AA3732;
  • }
  • .item.otherStatus{
  • box-shadow:6px4px4px#AA3132;
  • }
  • 继续说上面的例子,box需要阴影,但如果这个项目的UI统一风格,包括sidebar,navigator以及item都需要这样的阴影呢?再如果,明天客户或者UX一拍脑袋,这个阴影应该是灰色的不该是红色的呢?不要继续天真的认为全局替换是救命稻草。首先,没有几个网站会用red,blur做色调的,你用的应该是#AA3333,这样的代码,然后你发现sidebar用了#A43433,而navigator是#AB3633,等等,item有两个状态,而两个状态对应的颜色是不一样的。这怎么可能?但当你打开浏览器的时候你会发现本来就相差无几的颜色,在阴影中变得一模一样了,谁看的出来呢,当初使用的时候可能也不过是随意的在mockup中取的一个颜色。

    大量的重复带来的不仅仅是代码的冗余,我们必须靠人力去同步它们,而人很难保证它们的修改是完全一致的,尤其是当它们中引入了一些不一致的独特的东西时。不要小看CSS,其后果就是进度和人力的压力,后面就是PM有没有读过《人月神话》的事了。

    肯定有人在想,谁让你当初要写成这样呢。我们在读代码的时候最喜欢问,当初为什么要这么写?但慢慢的你会读出它的历史,有时候它是身不由己的。这就涉及到了下一个要讨论的内容。
    扩展性

    扩展性是一个具有欺骗性的东西,所谓的扩展性其实就是在现有基础上再次开发新东西的性能,但我认为它还必须有前提条件,那就是保持可读性与维护性。

    简单的追求可维护性是自取灭亡,原因很简单,将新旧代码完全分离的时候扩展性最高,因为不必担心对以前的部分有影响,新的样式可以随意发挥。是不是很神奇,这样想的我们写下的代码,肯定就是前面我们追问的代码。所以自己回答自己吧,当初没考虑可读性和维护性,只想着快点增加新的样式,就这么写了。

    那什么才是一个好的扩展性呢,简单来说,就是多功能产品。比如一个box,也许它的样式就时
    复用性

    似乎我一直在说的就是重复,那我们就来说说复用性,如何才能复用CSS代码是一个很大的问题,比如粒度,是一两个属性进行复用还是一大组选择器进行复用呢,再比如对象,是为了class复用属性,还是为了html复用class呢。这些选择不算太重要,但是带来的影响却很重大,可以说是整个CSS结构的改变。下面继续用box的阴影来讨论复用。

    CSS Code复制内容到剪贴板
  • .shadow{
  • -webkit-box-shadow:6px4px4px#A93334;
  • -moz-box-shadow:6px4px4px#A93334;
  • box-shadow:6px4px4px#A93334;
  • border-left:2pxsolid#A93334\9;
  • border-bottom:2pxsolid#A93334\9;
  • }
  • 这样看起来我有了一个shadow的class可以给任意的目标加上这个阴影了,但这导致了一个复用的问题,和上面那段捣乱的CSS样式一样,如果item已有另外2个border了,那这个class是无法去除的。所以复用时不仅要考虑需要什么,还要考虑不需要什么。另外一些必须的属性比如display还有overflow等也是要考虑的,因为user agent的原因,很多属性是隐藏在element中的。

    声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

    相关文章