【经验】少写代码少填坑？（编写代码时应注意的问题）

我不是这个世界上最有才的程序员。是的，我知道这是真的。所以我尝试尽可能少写代码。我写得越少，破坏越少，调整和维护的工作量也就越少。

我也很懒，所以觉得一切过得去就行了。

然而，事实证明让 Web 变得高效的唯一行之有效的方法也只是少写代码。精简代码？压缩代码？缓存？好吧，听起来好高级。从源头上竭尽全力拒绝增加代码或者引入别人写的代码？现在你说到点子上了。解决一个问题又会带来另一堆别的问题，你的任务可能让你无比蛋疼。

而这还没完。不同于为了可见的性能收益的优化目标 —— 如果确实有可见的优化点，你还是需要多写一些代码，不过你得想好了 —— 少写代码可以让你的 Web 应用使用成本降低。我接收的数据内容不在乎你用小块还是大块数据发送，反正它们拼起来之后都一样（意思是性能优化不明显的话没必要过度合并请求 —— 译者注）。

我最喜欢的关于少写代码更好的观点是：你应该只完成你真正需要的东西 —— 即你的用户真正需要的东西。在按钮上加一道光？别说道光，加康熙也不干。为了加社交按钮引入一堆第三方代码，同时破坏掉你的页面设计？将它们一脚踹开。用 JavaScript 定制用户的鼠标右键来显示一个自定义的模态对话菜单？代表月亮消灭它们。

这不仅仅是关于你引入代码来破坏 UX 设计的问题，你自己写的代码也必须要尽量减少。这里我提供一些观点会有帮助。我曾经写过一些不用写的代码，用在无障碍和响应式设计方面。结果却让我明白一个道理，灵活的、无障碍的 Web 正需要我们尽可能少去人为控制。只有不写的代码才永远都不需要重写。

WAI-ARIA

首先，WAI-ARIA(Web Accessibility Initiative - Accessible Rich Internet Applications) 不等于 Web 无障碍。它只是一个工具，在需要的时候通过某些辅助技术来提高兼容性，比如支持读屏软件。因此，ARIA 使用的第一原则 是如果你不是必须要用的时候不要使用 WAI-ARIA。

为了德玛西亚！别这样写：（原文这里是 LOL，no:，LOL 应该是 Laugh Out Loud，不过我故意翻译成那个的 )

应该这样写:

使用原生元素的好处是你通常也不需要为你的元素行为添加脚本。看下面的 checkbox 实现，这么写不仅代码很冗长，而且还需要依赖一段 JavaScript 来控制状态变化从而 模拟（follyfill） 出本来就是浏览器标准化的 name 属性和 HTTP GET 的基本行为。明显这么写需要更多代码，而且不那么健壮。搞笑吧？

上面那么写是为了要考虑样式？没关系，如果你真的需要自定义样式，可以这么做。

My checkbox label

Grids

你记得曾经享受使用/阅读一个超过三栏布局的网页吗？我不觉得那是一种享受。太多的内容堆在一起，干扰了我的注意力。“我想知道那些看起来像是导航栏的东西它真的是我想要的导航栏吗？” 这样的网站套路太深，我要做的任务被打断了，于是我离开了这个网站。

有时候我们确实想要内容堆在一起。比如搜索结果或者其他什么。但是为什么要引入一整个笨重的栅格框架模板只为了实现这个功能？Flexbox 用三两个声明块就能做到。

.grid {  display: flex;  flex-flow: row wrap; } .grid > * {  flex-basis: 10em;  flex-grow: 1; }

现在一切都“扭曲”为大约 10em 宽。一行有多少列取决于 viewport 可以放下大约多少个 10em 宽的单元格。搞定，继续。

然后，当我们来到这里，下面这个是什么鬼：

width: 57.98363527356473782736464546373337373737%;

你知道精确的测量是根据一个神秘的比例计算的吗？一个令人敬畏的神奇比例？不，我不觉得，也不感兴趣。我只想要让播放动作片的按钮足够大以便我能找到它。

Margins

我们做到了这个。使用通用选择器让元素共享 margin 定义。只在需要改变的地方重写它，不需要更复杂。

body * + * {  margin-top: 1.5rem; }

不，通用选择器不会破坏你页面的性能，别被砖家坑了。

Views

你不需要一整个 Angular 或者 Meteor 或者别的什么来分离一个简单的网页到“视图”。视图只是分别控制你所能看见的网页部分和你看不见的部分，CSS 也可以做到：

.view {  display: none; } .view:target {  display: block; }

“但是单页应用需要在它们加载视图的时候执行代码！”我知道你要说这个。这个用 onhashchange 事件就好了。不需要其他库，你只需要使用标准的，可收藏到书签的链接方式就可以了。这很棒。关于这个技术，这里有更多介绍，如果你感兴趣可以看一下。

Font sizes

调整字体大小真的可以让你的 @media 块膨胀。这也是为什么你需要小心照顾好你的 CSS。其实用一行代码可以解决：

font-size: calc(1em + 1vw);

嗯，这样就行了。你甚至有了字体的最小大小，所以在手机上字体也不会变得太小。多亏了Vasilis 教会了我这个。

译者：[十年踪迹](http://zcfy.cc/@akira)

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。