首页手记如何写出可维护的css？

如何写出可维护的css？

标签：

Html/CSS CSS3

慢一点

首先，我在这里向大家推荐一本书《css secret》

因为本篇文章就是从这本书里搬过来的

最后，是可维护性的基本要素

尽量减少改动时要编辑的地方

愉快的开始

好，先上代码：

html

<div class="box">
    <input class="btn" type="button" value="YES!" >
</div>

css

.btn {
        padding: 6px 16px;
        border: 1px solid #446d88;
        background: #59a linear-gradient(#77a0bb, #58a);
        border-radius: 4px;
        box-shadow: 0 1px 5px gray;
        color: white;
        text-shadow: 0 -1px 1px #335166;
        font-size: 20px;
        line-height: 30px;
    }

这里呢，我们绘制了一个按钮

假如，当然，假如的情况有很多。
我就是觉得这个按钮太小，小到都看不到阴影在哪儿
那怎么办呢
好办啊
把按钮变大不就好了
的确是个好办法
但是你有没有考虑过
要想等比例变大按钮，至少要修改

padding
border-radius
box-shadow
text-shadow
font-size
line-height

我的天啊
然而，更可怕的是你还要一点点调试各个属性值
那么
我们有没有另外一种，只通过一行代码来实现自动修改其他五个属性的写法呢

聪明的你，可能已经想到一个计量单位

em

对，相对值

这是改进的css代码

.btn {
        padding: .4em 1em;
        border: 1px solid #446d88;
        background: #59a linear-gradient(#77a0bb, #58a);
        border-radius: .25em;
        box-shadow: 0 .06em .3em gray;
        color: white;
        text-shadow: 0 -.06em .06em #335166;
        font-size: 1.25em;
        line-height: 1.5;
    }

关于em

em有如下特点：
1. em的值并不是固定的
2. em会继承父级元素的字体大小

所有浏览器的默认字体都是16px
根据me值的计算公式
1 ÷ 父元素的font-size × 需要转换的像素值 = em值
得出
1px=0.0625em
这里，我们可简化em的换算值，但不推荐这样做，因为会影响px的实际值和那些不完全以em作为布局的页面
css
.box{
font-size:62.5%;
}
/*      在父元素上把px和em的换算变为 1px=0.1em
别忘了，em会承父级元素的字体大小      */

.btn {
padding: .6em 1.6em;
border: 1px solid #446d88;
background: #59a linear-gradient(#77a0bb, #58a);
border-radius: .4em;
box-shadow: 0 .1em .5em gray;
color: white;
text-shadow: 0 -.1em .1em #335166;
font-size: 2em;
line-height: 1.5;
}

好了，这样你就可以，与所欲为的比例放大按钮了

一行代码

font-size: 10em;

超大按钮

更加愉快的继续

不过，让按钮放大不是我们唯一要做的事情，这并不是最重要的
还有颜色
如果，我想一个红色的按钮，一个黄色的按钮
不考虑相对于主体色的亮色和暗色的搭配的情况下
一想到
又要亲自操刀，修改

boder-color
background
linear-gradient
box-shadow
text-shadow

你一定又开始头疼了
如何愉快的继续下去呢

这里需要一些小小技巧
并且还考虑到了相对于主体色的亮色和暗色的搭配
利用，透明
只要把半透明的黑色或白色叠加到主色调上，就会产生主色调的亮色和暗色的变体

二次改进的css代码

.btn {
        padding: .4em 1em;
        border: 1px solid rgba(0,0,0,.1);
        background: #59a linear-gradient(rgba(255,255,255,0.1), transparent );
        border-radius: .25em;
        box-shadow: 0 .06em .3em gray;
        color: white;
        text-shadow: 0 -.06em .06em #335166;
        font-size:10em;
        line-height: 1.5;
    }

现在，依旧，一行代码