我们应该怎样写样式表

写在前面

本篇blog为前端入门篇，面向的对象以初级后台研发和前端人员为主，请前端大牛绕行。

我们的后端代码似乎经常要应付样式的开发，虽然界面切图由前端小组基本完成，但是遇到具体的业务问题，界面就要做调整，此时就全是后台人员在该样式表，你一下我一下最后代码就面目全非，混乱不堪，同时，由于我们都是维护老的系统，所以代码在前人的维护下也让自己无从下手，这些老的问题我们也没有好的办法，但是我们可以从当下做起，来写合理的样式表并慢慢修复过去的混乱，让我们的代码整洁起来。所以本篇个人认为是干货，谈一下我们该怎么写样式表文件。

几个demo程序

demo点击这里或者点击这里

说明

当采用style将样式写在html文件中，首先html代码很是混乱，可读性很差，不符合样式、内容分离的原则，其次由于样式权重最高（当然是一人之下万人之上的权重，还有!important），当将代码发给后台人员以后并完成了jsp编写，如果样式变化，前端修改完成style样式，后台人员就要寻找前端修改的地方并修改jsp代码，费事费力。
项目中如果采用样式表通过link进行引用，将所有样式定义成class进行样式添加，实现样式与内容分离，html代码不会太混乱，同时当样式产生变更的时候，在html不发生变化的情况下（即大的变更的情况下），前端只要将样式表文件修改后直接给后端同学替换就可以了，省事省力。所以请不要随意修改前端人员给的样式表文件，因为需求变更，样式表随时可能修改，而你的修改无法到达他那里，如果要修改请新建样式文件修改或者至少和前端没有冲突的样式文件，如果有冲突样式可以采用样式权重进行修改，样式权重部分见下文。
关于样式权重的问题A:当style和class同时存在background-color样式的时候并且颜色值不一样的时候，会采用哪种颜色呢？答案是如果class中background-color不存在!important的情况下，使用style中的颜色值。
关于样式权重的问题B:当一个标签上拥有两个class，且两个class中同时存在background-color样式的时候并且颜色值不一样的时候，会采用哪种颜色呢？答案是如果两个class都是一层class并无class嵌套的时候，定义的样式表哪一个在最后面就使用哪个样式表的background-color，相当于后面的同名样式值替换了前面的样式；但是当前面的class中的.blue中存在层级嵌套（例如.demo4 .blue）并且嵌套层级比冲突样式.green层级嵌套多的时候,也就导致了background-color:blue的权重比较大，所以此处显示为蓝色。

应该怎样利用权重来解决我们遇到的问题呢？例如：当点击按钮一次，下面的div盒子中背景色和文字颜色都变化，再次点击就变回来，做切换效果，该怎么编写呢？

方法1：

var n=0;//奇偶切换记录
function _switchColor(e) {
    var tar=e.target;
    if(n%2==0){
        $(tar).siblings().css("background-color","#094209");
        $(tar).siblings().css("color","red");
        //...
    }else{
        $(tar).siblings().css("background-color","green");
        $(tar).siblings().css("color","#fff");
        //将来可能还有其他要变的样式，比如透明度、字体大小....
    }
    n++; 
} 方法2：

function switchColor(e) {
    var tar=e.target;
    $(tar).parent().toggleClass("toggle");
}
    
css:
.toggle .green {
  background-color: #094209;
  color: red;
}

对比以上两种方法，一定是第二种最简单了，不言而喻。这也是样式权重的常用应用。

另：使用好的权重就可以进行css命名空间的划定，来进行不影响他人样式代码编写，例如，在body上定义自己的样式名，并将后面自己的样式全部包裹在该空间样式名中，不会对其他人的样式产生影响。

一个tab页的切换来看看我们样式的应用。其中通过给点击的li标签添加active样式，并定义了active下的字体颜色值和上边条颜色。

整个功能的所有代码如下：

js部分：
addTabItemListener: function() {
    this.target.on("click", ".yc_tab_li", function(event) {
        $this=$(this);
        var index=$this.parent().children().index($this);
        $this.siblings('.yc_tab_li').removeClass('active');
        var relateTabs = $this.addClass('active').parents(".yc_tab_h").siblings('.yc_tab_container');
        relateTabs.addClass('yc_tab_hide');
        relateTabs.eq(index).removeClass('yc_tab_hide');
        relateTabs = null;
        event.preventDefault();
    });
},

html部分：
<div class="grp_tab_1">
    <div class="yc_tab_h">
        <ul class="yc_tab_ul">
            <li class="yc_tab_li active">
                <span class="hosticon icon">24小时逐时使用量</span>
            </li>
            <li class="yc_tab_li">
                <span class="dataicon icon">浏览统计</span>
            </li>
            <li class="yc_tab_li">
                <span class="servicon icon">人像对比使用情况</span>
            </li>
        </ul>
    </div>
    <div class="yc_tab_container">
        tab1
    </div>
    <div class="yc_tab_container yc_tab_hide">tab2</div>
    <div class="yc_tab_container yc_tab_hide">tab3</div>
</div>

css部分： 
    .yc_tab_li {
      width: 20%;
      display: inline-block;
      *display: inline;
      *zoom: 1;
      text-align: left;
      line-height: 40px;
      text-align: center;
      border-right: 1px solid #DDDDDD;
      font-size: 20px;
      cursor: pointer;
    }
    .yc_tab_ul {
      background-color: #FBFAF8;
      border-bottom: 1px solid #DDDDDD;
      height: 42px;
      font-size: 0;
    }
    .yc_tab_ul .active {
      background-color: #FFF;
      border-top: 2px solid #00A2CA;
      *border-top-width: 3px;
      color: #00A2CA;
      border-right: 2px solid #DDDDDD;
    }
    .yc_tab_hide {
      display: none;
    }
    .grp_tab_1 {
      *text-align: left;
    }

写在结尾

希望各位能在项目中好好组织自己的代码，能一次组织好的就不要想做完再整理，养成好的编写习惯很重要。以上只是本人的个人理解，如有问题或者错误请指正，共同进步。

0 样式表编写心得积累

我们应该怎样写样式表

写在前面

几个demo程序

写在结尾

0
样式表编写心得积累