CSS Secrets 翻译笔记 01: CSS coding tips

Introduction

CSS SECRETS AMAZON 链接
CSS Secrets 翻译笔记 01: CSS coding tips_第1张图片

本系列的文章是翻译过程中的心得,并非原文的完全照搬,需要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或者其它手段来减少使用,它们会使得代码难以维护。

本文完。

你可能感兴趣的:(CSS Secrets 翻译笔记 01: CSS coding tips)