Less is More。这是20世纪30年代著名的建筑师路德维希·密斯·凡德罗说过的一句话，意思是“少即多”这是一种提倡简单，反对过度装饰的设计理念。简单的东西往往带给人们的是更多的享受。
作为程序员我们写代码何尝不是这样子呢？
腾讯WXG基础产品部的颜俊鸿在“物勒工名”，第一届前端体验大会分享了《WeUI代码设计理念》的时候提到：
1、以更少的代码实现组件；
2、减少冗余的样式；
3、简化接口。
最近在学习WeUI，发现一个很有代表性的组件——开关按钮，很好地诠释了“以更少的代码实现组件”。
一个开关按钮只用到了一个input标签。
Less is More——一个input实现开关按钮——燃烧的陈林林.jpg
首先input标签设置type="checkbox"，这样input会有checked的属性（设置或返回 checkbox是否应被选中）。这就有我们需要的两种状态，开和关。
input设置没选中状态为灰色#DFDFDF,选中为绿色#04BE02。
input中的before覆盖在input上面，未选中状态设置颜色#FDFDFD（和input设置的颜色一样），选中状态设置为transform: scale(0)。
input中的after是上面的圆球，选中状态沿X轴向右平移20px。
具体代码如下：
结构：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>燃烧的陈林林</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
</head>
<body >
<input type="checkbox" class="weui-switch">
</body>
</html>
样式：
.weui-switch {
-webkit-appearance: none;
appearance: none;
}
.weui-switch {
position: relative;
width: 52px;
height: 32px;
border: 1px solid #DFDFDF;
outline: 0;
border-radius: 16px;
box-sizing: border-box;
background-color: #DFDFDF;
-webkit-transition: background-color 0.1s, border 0.1s;
transition: background-color 0.1s, border 0.1s;
}
.weui-switch:before{
content: " ";
position: absolute;
top: 0;
left: 0;
width: 50px;
height: 30px;
border-radius: 15px;
background-color: #FDFDFD;
-webkit-transition: -webkit-transform 0.35s cubic-bezier(0.45, 1, 0.4, 1);
transition: -webkit-transform 0.35s cubic-bezier(0.45, 1, 0.4, 1);
transition: transform 0.35s cubic-bezier(0.45, 1, 0.4, 1);
transition: transform 0.35s cubic-bezier(0.45, 1, 0.4, 1),-webkit-transform 0.35s cubic-bezier(0.45, 1, 0.4, 1);
}
.weui-switch:after {
content: " ";
position: absolute;
top: 0;
left: 0;
width: 30px;
height: 30px;
border-radius: 15px;
background-color: #FFFFFF;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
-webkit-transition: -webkit-transform 0.35s cubic-bezier(0.4, 0.4, 0.25, 1.35);
transition: -webkit-transform 0.35s cubic-bezier(0.4, 0.4, 0.25, 1.35);
transition: transform 0.35s cubic-bezier(0.4, 0.4, 0.25, 1.35);
transition: transform 0.35s cubic-bezier(0.4, 0.4, 0.25, 1.35), -webkit-transform 0.35s cubic-bezier(0.4, 0.4, 0.25, 1.35);
}
.weui-switch:checked{
border-color: #04BE02;
background-color: #04BE02;
}
.weui-switch:checked:before {
-webkit-transform: scale(0);
transform: scale(0);
}
.weui-switch:checked:after {
-webkit-transform: translateX(20px);
transform: translateX(20px);
}
网友评论