跟着月影学 JavaScript（上） | 青训营笔记
这是我参与「第四届青训营」笔记创作活动的的第2天
本节重点
介绍HTML、CSS、JS分别负责什么职能，以及相互之间如何工作
各司其职
HTML用来标记内容（重在内容组织上）
CSS用来修饰内容样式（重在内容样式美化展示上）
JavaScript用来做交互
浅色深色模式切换
- 1
效果
js中修改body元素的backgroundColor、color等样式，内容显混乱，不易维护
- 2
首先，className设为night，这个操作本身透露了需求信息，它描述了这是一个夜间（night）模式的业务状态。这样就便于后来的维护者快速理解业务需求。
其次，如果产品需求变更，把模式对应的颜色换了，我们不需要修改 JS 代码，只需要修改body.night的样式规则即可！
第三，如果要增加切换过程的动画效果，可以使用 CSS3 支持的过渡动画
button加了一个background-color透明的设定，效果为
点击切换时，只改变了body的类，而不改变各个类别或是整体js文件中的设定值，有利于修改和维护
- 3
我们在 body 的子元素中添加一个type="checkbox"的input元素。当我们点击这个元素时，就有两种状态：普通状态和选中状态。其中，选中状态可以用伪类选择器#modeCheckBox:checked来标记。
微调一下上一版本的样式，将body中的padding移到.content容器中，将body.night的样式移到#modeCheckBox:checked + .content规则中
使用 CSS 代替 JS 来切换并记住与用户交互的状态，省去JS代码，不用写 JS 代码，这样就不用维护 JS 代码，也不可能有 JS 的 bug，尤其是在移动端页面，具有巨大优势
