可维护css,如何写出可维护的css？

慢一点

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

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

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

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

愉快的开始

好，先上代码：

html

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;

}

现在，依旧，一行代码

background: red

大红的按钮

愉快的结束吧

至此，我想大家对如何写出可维护的css有自己独特的理解。

分析代码，找出相关联系

尝试设计模式

css代码组件/模块化

使用具有编程思想的sass，less

多了解，优秀设计者的开源项目(GitHub 码云)

多思考