【经验】少写代码少填坑？

<div role="heading"aria-level="2">Subheading</div>

应该这样写:

<h2>Subheading</h2>

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

<div role="checkbox"      aria-checked="false"      tabindex="0"      id="checkbox1"      aria-labelledby="label-for-checkbox1"></div> <div class="label" id="label-for-checkbox1">My checkbox label</div>

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

<input type="checkbox"        id="checkbox"        name="checkbox1"> <label for="checkbox1">My checkbox label</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 教会了我这个。