是CSS还是JavaScript?

         在现在的前端开发中，一直在倡导着这样三个分离：表现和结构分离；行为和结构分离；行为和表现分离。

         前两个分离，都很好理解，就是通俗的div和css的分离，以及html和js程序的分离，而且这种分离很容易做到。

         但对于第三个分离：行为和表现分离，比前两个要复杂得多。基本的问题是：哪些效果用CSS定义，哪些应该用JavaScript实现？尽管答案看似很明显：表现用CSS，行为用JS。但事实上存在很多CSS和JavaScript的灰色地带，不能清楚地把某个效果归为表现还是行为。

        下面，我们通过两个常用的效果实现对比来分析下。

        1.下拉菜单：hover或mouseover/mouseout

        下拉菜单的用途是：当用户的鼠标移上某个主菜单上时，显示相应的子菜单；而当用户移出时，再将它隐藏。

           下面是某个主菜单的下拉菜单的html程序;

    <li><a href="#">News</a>        <ul>           <li><a href="#">Home</a></li>           <li><a href="#">Abroad</a></li>       </ul>    </li>   

      通过css，我们可以这样来实现：

    li ul{display:none;}    li:hover ul {display:block;}

       如上，我们可以通过简短的两行CSS代码来实现目的，从代码量和维护量来看，CSS的：hover方案明显比JavaScript的mouseover/mouseout方案好得多，但从另一方面，IE6和更早的浏览器并不支持li:hover.而且有些人喜欢用键盘来代替鼠标，通过tab键和enter键来获取焦点，这些键盘用户将无法使用CSS下拉菜单，因为li:hover是一个纯鼠标选择器，它不会对键盘焦点作出响应。另外，焦点也不可能被放在<li>上，因为键盘焦点只能选择链接、按钮和表单域。相反，JavaScript可以适应键盘用户，具有更好的可访问性。

       因此，两种方法都有其自身独特的优缺点，没有哪一种能完全胜出。

       从更高层的理论视觉看，下拉菜单是表现还是行为？它只有在用户做出触发动作之后才会产生效果，似乎是行为；但是，这种效果是子菜单的呈现，它又像是表现。

       总之，到底是用CSS还是JavaScript，最终还是归结为个人的选择。