CSS Secrets 翻译笔记 01: CSS coding tips

Introduction

CSS SECRETS AMAZON 链接

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

Minimize code duplication

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

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; 

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

line-height: 39px;

I'm BUTTON A
绝对值(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;
}

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

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。只是说他们需要正确的使用，
以下是一些建议：

• 使用相对单位，或者相对viewport的单位(vw, vh, vmin, vmax)。
• 如果期望设定固定的宽度，使用max-width而不是width，这样就不会影响到小设备。
• 不要忘了给img, object, video, iframe这样的标签打上max-width : 100%。
• 如果希望背景图片覆盖整个容器，background-size: cover 足矣。
• 如果希望多列排版图片，那么，借助viewport的宽度来判断列数就够了。display:inline-block。
• 如果需要多列文本，使用column-width而不是column-count。这样，在小设备上，就可以只看到单列。

以上的建议本质上都是为了避免使用media queries。
当我们的CSS中有了过多的media queries。重新回头看看它们，尽量通过以上的tips或者其它手段来减少使用，它们会使得代码难以维护。

本文完。