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

前端  /  管理员 发布于 7年前   314

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

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

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

CSS Code复制内容到剪贴板

1. span {   
2.     -webkit-box-shadow: 6px 4px 4px red;   
3.     -moz-box-shadow: 6px 4px 4px red;   
4.     box-shadow: 6px 4px 4px red;   
5. }   
6. div span {   
7.     border-width: 4px;   
8.     border-style: dotted;   
9.     border-color: blue;   
10. }   
11. #box {   
12.     border-left: 2px solid red;   
13.     border-bottom: 2px solid red;    
14. }  

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

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

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

CSS Code复制内容到剪贴板

1. aside {   
2.     box-shadow: 6px 4px 4px #AA3343;   
3. }   
4. nav {   
5.     box-shadow: 6px 4px 4px #AB3633;       
6. }   
7. .item {   
8.     box-shadow: 6px 4px 4px #AA3732;   
9. }   
10. .item.otherStatus {   
11.     box-shadow: 6px 4px 4px #AA3132;   
12. }  

继续说上面的例子，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复制内容到剪贴板

1. .shadow {   
2.     -webkit-box-shadow: 6px 4px 4px #A93334;   
3.     -moz-box-shadow: 6px 4px 4px #A93334;   
4.     box-shadow: 6px 4px 4px #A93334;   
5.     border-left: 2px solid #A93334\9;   
6.     border-bottom: 2px solid #A93334\9;    
7. }  

这样看起来我有了一个shadow的class可以给任意的目标加上这个阴影了，但这导致了一个复用的问题，和上面那段捣乱的CSS样式一样，如果item已有另外2个border了，那这个class是无法去除的。所以复用时不仅要考虑需要什么，还要考虑不需要什么。另外一些必须的属性比如display还有overflow等也是要考虑的，因为user agent的原因，很多属性是隐藏在element中的。