:checked + label
组件开发

关于作者

大家好，我是翟路佳。全栈工程师，编程爱好者。

• 博客：http://blog.meathill.com/
• 微博：http://weibo.com/meathill

何为组件化

1. 把常用的功能、UI 封装成一个个独立的组件
2. 组件通常有统一的视觉规范和接口规范
3. 开发业务逻辑，可以视作拼接组件

组件化的优势

1. 增加代码的复用能力
2. 减少开发工作量
3. 加强团队协作

组件化开发的问题

1. 组件化的粒度很难把控
2. 组件之间套用有一定难度
3. 组件库之间混用难度更大

值得学习的组件化方案

1. HTML + CSS
2. Bootstrap
3. Vue.js

:checked

1. CSS3 新增伪类选择器
2. 用来选择 radio 和 checkbox 处于选中状态的元素
3. 亦可选择 <select> 中被选中的 <option>

由于 CSS 极低的编程能力，这个选择器几乎是我们唯一的依赖。

<input type="radio" checked>
<input type="checkbox" checked>
<select>
  <option selected>Some Value</option>
</select>

+ / ~

1. CSS3 新增兄弟选择器
2. 用来选择某元素后面，[毗邻|所有] 同层级元素

<ul>
  <li class="sample"></li>
  <li></li> <!-- `.sample + *` 选择这个元素 -->
  <li></li> 
  <li></li> <!-- `.sample ~ *` 选择第二个 `<li>` 到这个元素 -->
</ul>

<input>

1. type="checkcbox"
   1. 复选框
   2. 只有一个也可以作为开关
   3. name="q[]" 以便提交给后端数组
2. type="radio"
   1. 单选框

<label>

1. 核心属性 for="some-id"，代理 id="some-id" 表单元素的点击事件
2. 里面可以容纳任何其它元素
3. 是单选框、复选框非常好的替代品

CSS 动画基础

1. 关键属性：transition: prop duration [ease];
2. 设置开始属性、结束属性

移动设备触发 GPU 渲染：

1. transform: translate3d(0,0,0)