内容样式行为分离

一、内容样式行为分离

一般情况下，我们用 html 来控制内容，用 css 来控制样式，用 js 来控制行为，将内容、样式和行为三者分离开来。如果不分别控制，则代码可读取性降低，而且很容易出现 bug。

二、举例说明

1. 若用 html 控制样式
   使得 html 中既有表示内容的标签标签的逻辑结构不清晰，不容易区分。

2. 若用 css 控制的内容
   用户无法选中，js 也无法读取。

3. 若用 css 控制行为
   即 css 不仅要负责样式还要负责逻辑，会使 css内容变得很多，加载速度变慢，进而导致页面加载速度很慢。

4. 若用 js 控制样式
   例如 $div.hide() 和 $div.show()，若 $div 之前的样式为 display: none;，则隐藏再显示之后的样式会变为 display: block;，造成前后不一致。最好通过添加类 $div.addClass('active') 和 $div.addClass('disable') 来切换状态。