转载

CSS Secrets 翻译笔记 01: CSS coding tips

Introduction

CSS SECRETS AMAZON 链接

本系列的文章是翻译过程中的心得，并非原文的完全照搬，需要PDF的同学，欢迎向博主索取 :)。

Minimize code duplication

保证代码的不重复(DRY)以及可维护(maintainable)是软件开发中最大的挑战，对于CSS开发，也是一样的。从实践的角度来说，一个大的组件我们认为它可维护性高的标准即为： 改动发生时，需要改变的代码量极少。 反面的例子：一个小的组件，我们要做10个甚至更多的改动才能完成新的需求，让情况更糟糕的是，这个组件可能不是你写的(这个机率太大了)。我们难免有什么遗漏，好吧，即使没有任何遗漏，我们用在仔细调整，一点点查代码的时间本来可以用来做很多更有意义的事。

更进一步的，即使不谈未来可能遇到的改变，高灵活度的CSS开发使得我们的CSS编码本身，也会变的很舒服。因为，它让CSS开发变的更像在写代码。

来看一个例子，下面是一个按钮：

它的样式是这样的

padding: 6px 16px; border: 1px solid #446d88; background: #58a linear-gradient(#77a0bb, #58a); border-radius: 4px; box-shadow: 0 1px 5px gray; color: white; text-shadow: 0 -1px 1px #335166; font-size: 20px;  line-height: 30px;

考虑到维护性，以上的代码存在很多问题，不过，我们可以解决这些问题。最显眼的是字体的问题。比如说我们期望改变字体的大小，像这样。

font-size: 26px;

我们发现行内容与边框的间距变小了，看到后，再给line-height打一个补丁

line-height: 39px;

绝对值(px)是易于编写的(照着mock up比一比，量一量，填一填)但是，每一次有改动来临时，都会有各种改动，有些还是很难考虑到的。以下是解决方案：

font-size:  1.25em;  line-height: 1.5;

之后，再有关于字体的改动，我们只需要改变font-size就可以了.但是比起最初的按钮，好像还是有那么点区别，原因是形如padding，也是用px指定的，我们将它们也设置为同font-size关联。

当各种值有互相依赖时，我们要找到将它们关联的方法。

padding: .3em .8em; border: 1px solid #446d88; background: #58a linear-gradient(#77a0bb, #58a); border-radius: .2em; box-shadow: 0 .05em .25em gray; color: white; text-shadow: 0 .05em .25em #335166; font-size: 1.3em;  line-height: 1.5;

如果希望以根节点(如html这个根tag)的font-size为参考点，那么就选择rem而不是em，我们需要根据具体的应用场合，做出决定。

现在我们的样式的可扩展性更高了，我们的border实际上用的还是绝对值，故而，也不要一味的套em. 当然，大小可不是我们唯一需要的改动，在举个例子：颜色。我们现在需要一个红色的Cancel按钮，一个绿色的OK按钮，做的改动实际也非常多(border-color, background, box-shadow, text-shadow, 亮度值)。借助半透明，我们可以减轻后续改动的痛苦

padding: .3em .8em; border: 1px solid rgba(0,0,0,.1); background: #58a linear-gradient(hsla(0,0%,100%,.2),transparent); border-radius: .2em; box-shadow: 0 .05em .25em rgba(0,0,0,.5); color: white; text-shadow: 0 -.05em .05em rgba(0,0,0,.5); font-size: 125%; line-height: 1.5;

若要指定白色半透明，hsla是很好的选择。

为两个按钮分别增加class

button.cancel {    background-color: #c00; } button.ok {    background-color: #6b0; }

现在，我们每次只需要改动背景色，就能到达改动颜色的需求。

Maintainability versus brevity

很多时候，可维护性与简洁性可能是有一点互斥的。即使是我们刚才按钮的例子，最后的代码也比最初，多了不少。下面的代码，给所有元素除了左边侧，都加了个border。

border-width: 10px 10px 10px 0;

如果我们希望10 -> 11，那么无疑，改动会有三次。我们可以将改动减为1次，并使代码可读性更高。

border-width: 10px;  border-left-width: 0;

后者在博主看来更可取。

On Responsive Web Design

一个经常发生的情节是：在各个分辨率下测试页面显示效果，为CSS不断的增加 media queries以解决显示不正确的问题。但是，每一个 media query都为CSS增加了负担，特别是针对未来需要的改动。每一个未来的改动，都要测试相应的media query下的工作效果。media query越多，代码越脆弱。

这并不是说 media queries 是bad practice。只是说他们需要正确的使用，

以下是一些建议：