上次，我们形成了两种header的布局，一种flexbox，一种float，最后与身边做重构的同事交流下来，选择了float的布局。
事实上布局的选型不需要我关注，我的参与或者一些意见多数是自我提升，但要说html结构完全控制于csser的话就不一定了
在整个header组件的代码过程中，我与重构同事就一些地方发生了重复的交流，争论，今天就header组件的布局以及功能实现，聊一聊js与css的配合
然后header组件本身是一个老组件，我们顺便探讨下，这类老组件应该如何翻新比较合适。
最初的结构
最开始重构的同事给了我一个已经做好了的页面：
我们针对其中一些小的体验上做了讨论，并且知会到设计组，便改了，很顺畅，然后我开始了愉快的代码，这是其中一块HTML的结构：
复制代码
<header class=”cm-header” style=”top: 50px;”>
<span class=”fl cm-header-icon icon-back “></span>
<span class=”fr cm-header-btn”>确认</span>
<span class=”fr cm-header-icon”><i class=”icon-home”></i></span>
<span class=”fr cm-header-icon”><i class=”icond-list”></i></span>
<h1 class=”cm-page-title”>
页面标题</h1>
</header>
这里除去h1标签中的文字不说，因为其中可能表现的非常复杂，我们后面再说，其中的按钮有以下功能：
① 第二行：回退按钮
② 第三行：确认
PS：左边采用float布局所以第一个元素在最右边
③ 第四行：home标签
④ 第五行：三个点，点击会出一个侧边栏
以上便是HTML的实现，但是对与程序员来说，头部除了按钮（btn）以外就只有图标（icon），所以以上的结构事实上js一般是不买账的
Jser需要的结构
与重构同事交流下来，原因是这样的：
① 因为回退比较特殊，所以多了一个样式，具体什么我没记住了
② icon代表背景图，icond代表CSS3画的，CSS3画的可扩展性高，比如换颜色什么的
③ ……
当时双方的讨论还是比较激烈的，但是对icond全部变成icon，重构同事不同意，于是也就作罢，经过一轮讨论，结构变成了这样：
复制代码
<header class=”cm-header” style=”top: 50px;”>
<span class=”fl cm-header-icon”><i class=”icon-back”></i></span>
