各司其责
- 让HTML、CSS和JavaScript职能分离
eg: 写一段JS，控制一个网页，让它支持浅色和深色两种浏览模式。怎么实现？
- 版本一
获得button，在button上注册了click事件，在click事件中进行判断。
用JavaScript来控制CSS，让JavaScript做了CSS的事
- 版本二
定义class，操作html元素的状态
希望看到的代码是上图这种的。各司其责。
- 版本三
根据各司其责，CSS是用来控制样式的，如果实现夜间模式，相当于样式的改变。
用纯CSS是最好的。
用到了CSS的高级功能(伪类选择器)。[用来匹配元素状态的]
可以给一个checkbox设置一个checked状态。
在body的下一行，写了一个type = "checkbox"的input。
在右边的css里，根据兄弟节点选择器，选择最近的class为content的标签。
给label设置一个for元素，这个for元素会for一个checkbox(上面input)的id。
所以点击label相当于改变checkbox的状态。
-
总结
- HTML/CSS/JS 各司其责
- 应当避免不必要的由JS直接操作样式
- 可以用class来表示状态
- 纯展示类交互寻求零JS方案
