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或者其它手段来减小使用，它们会使得代码难以维护。

本文完。