css小技巧

Posted 2020-10-12

前言

在开发项目书写css是必不可少的一部分，写好css能够有助于我们写js逻辑。我遵循的原则是能用css解决的事情坚决不使用js。现在就把我在项目中的使用技巧分享给大家希望能够相互学习共同进步。

选择

在处理列表删除的时候，我们需要选择某一项列表，这时候我们的页面布局就大致如下

<ul class="ul">
    <li class="list"><span class="checkbox"></span>数据1 金额：<span class="money">100</span></li>
    <li class="list"><span class="checkbox"></span>数据2 金额：<span class="money">200</span></li>
    <li class="list"><span class="checkbox"></span>数据3 金额：<span class="money">300</span></li>
    <li class="list"><span class="checkbox"></span>数据4 金额：<span class="money">400</span></li>
</ul>

span checkbox 代表多选按钮，一般人书写css肯定会是这样。给span 书写active css属性例如

li .active{

    /**样式*/
    ........
}

最后是通过js获取checkbox，给它添加删除active。目前为止，我们书写js大致是这样的。

$(".checkbox").click(function(){
    $(".checkbox").removeClass("active");
    $(this).addClass("active");
});

如果上述，每次jQuery都有获取checkbox去逐个移除active，然后在添加到当前checkbox上面。假设已经选中，依旧会执行此操作。可见这样的操作是多余的。
我会这样写css

.ul{
     background-color: #F2F2F2;
}
.ul li{
    border: 1px solid #00CC99;
    line-height: 35px;
    list-style: none;
    margin: 10px 0;
    padding-left: 10px;
}
.checkbox{
    display: inline-block;
    width: 18px;
    height: 18px;
    border-radius: 50px;
    background-color: #666666;
    vertical-align: -3px;
    margin-right: 15px;
    cursor: pointer;
    position: relative;
}
.ul .active .checkbox:before{
    content: "";
    position: absolute;
    width: 8px;
    height: 8px;
    left: 5px;
    top: 5px;
    border-radius: 50px;
    background-color: #F50909;
}

通过css控制li的active来控制checkbox的选择。至于不了解css优先级的同学请自行学习。
然后的书写的js是这样的

$(".list").click(function(){
    $(this).addClass("active").siblings("").removeClass("active");
});

一句代码即可实现效果。

伪类

在开发过程中有时候我们需要用到单位，比如金钱，温度，等。页面布局大致如下所示

<ul class="ul">
    <li class="list"><span class="checkbox"></span>数据1 金额：<span class="money">100</span></li>
    <li class="list"><span class="checkbox"></span>数据2 金额：<span class="money">200</span></li>
    <li class="list"><span class="checkbox"></span>数据3 金额：<span class="money">300</span></li>
    <li class="list"><span class="checkbox"></span>数据4 金额：<span class="money">400</span></li>
</ul>

很简单，明了。金额单独用span包裹。如果我们每次渲染时候拼接dom或者直接用vue v-for 或者其他框架渲染时，span标签内是否要包括“￥”符号呢？我是不会这样做的。我借助伪元素生成这种符号。如：

.list .money{
    color: #D40000;
}
.list .money:before{
    content: "￥";
}

这样做的原因是，假设某一天你要获取span内的金额时，你获取的肯定是数值，不包含“￥”符号。

三角形tips

三角形的实现网上教程很多，实现的效果也就几种。设置div宽度高度为0px，设置border为solid设置boder-width:为固定数值，最后设置border颜色。

.triangle{
    width: 40px;
    height: 40px;
    border: 20px solid;
    border-color: red blue orange yellow;
}
.triangle1{
    width: 0;
    height: 0;
    border: 20px solid;
    border-color: red transparent transparent transparent;
}

参考demo  

总结

在书写css时，我们应该考虑我们对接数据时书写js，这样有目的是书写css会在你对接数据的时候书写js事半功倍。依旧是那就话能用css处理的何必动用js呢？