WEB前端 CSS使用时的技巧

公司开发前端工具知乎|web前端开发季度总结

css中多用组合, 少用继承

代码片段 1

<!DOCTYPE html>
<head>
    <meta charset=”utf-8″ />
    <title>组合与继承</title>
    <style>
        .numberList1 {
            border: 1px solid #ccc;
            padding: 10px
        }
        .numberList1 li {
            height: 20px;
            line-height: 20px;
            font-size: 12px;
        }
        .numberList2 {
            border: 1px solid #ccc;
            padding: 10px
        }
        .numberList2 li {
            height: 20px;
            line-height: 20px;
            font-size: 16px;
        }
        .numberList3 {
            border: 1px solid #ccc;
            padding: 10px
        }
        .numberList1 li {
            height: 20px;
            line-height: 20px;
            font-size: 12px;
            color: red;
        }
    </style>
</head>
<body>
    <ul class=”numberList1″>
        <li>111111111111</li>
        <li>222222222222</li>
        <li>333333333333</li>
    </ul>
    <ul class=”numberList2″>
        <li>444444444444</li>
        <li>555555555555</li>
        <li>666666666666</li>
    </ul>
    <ul class=”numberList3″>
        <li>777777777777</li>
        <li>888888888888</li>
        <li>999999999999</li>
    </ul>
</body>
</html>

可以改成
代码片段 2

<!DOCTYPE html>
<head>
    <meta charset=”utf-8″ />
    <title>组合与继承</title>
    <style>
        .numberList {
            border: 1px solid #ccc;
            padding: 10px
        }
        .numberList li {
            line-height: 20px;
            height: 20px;
        }
        .f12 {
            font-size: 12px;
        }
        .f16 {
            font-size: 16px;
        }
        .red {
            color: red;
        }
    </style>
</head>
<body>
    <ul class=”numberList f12″>
        <li>111111111111</li>
        <li>222222222222</li>
        <li>333333333333</li>
    </ul>
    <ul class=”numberList f16″>
        <li>444444444444</li>
        <li>555555555555</li>
        <li>666666666666</li>
    </ul>
    <ul class=”numberList red f12″>
        <li>777777777777</li>
        <li>888888888888</li>
        <li>999999999999</li>
    </ul>
    <ul class=”numberList red f16″>
        <li>777777777777</li>
        <li>888888888888</li>
        <li>999999999999</li>
    </ul>
    </p>
    <p>
</body>
</html>

通过这样对样式的分解, 使用各个样式的组合,可以增强代码的扩展性
就可以写出 <ul class=”numberList red f16″></ul>这样新的样式

微信前端开发怎么入手|微信平台开发前端和后端|微信公众号前端开发js

» 本文来自:前端开发者 » 《WEB前端 CSS使用时的技巧》
» 本文链接地址:https://www.rokub.com/5238.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!