首页 > > 网页制作 > css >

CSS揭秘（1）编码技巧——DRY

2018-06-24 01:47:25来源：未知阅读 ()

1.DRY——（Don't repeat yourself ）尽量减少改动时要编辑的地方是代码可维护的最大要素之一。

2.实例：

 1 .content button{
 2             padding: 6px 16px;
 3             border: 1px solid #446d88;
 4             background:#58a linear-gradient(#77a0bb,#58a);
 5             border-radius:4px;
 6             box-shadow:0 1px 5px gray;
 7             color: white;
 8             text-shadow: 0 -1px 1px #335166;
 9             font-size:20px;
10             line-height:30px;
11             
12         }

以上CSS样式是对一个button进行样式的定义，存在以下几个问题：

（1）当我们想让按钮更大时，可以改变font-size 属性，通过改变字体来让按钮变大，但是相应的，行高 line-height 也需要改变。（行高=字体大小*1.5）

（2）font-size 定义为绝对长度值，当我们把父级的字号加大时，相应的子元素的字号也需要变大，才会协调。（所以将font-size改为百分比或是em单位比较好。）

（3）相应的，当要放大一个按钮时，padding ，border-radius等属性的尺寸也需要变化。（所以将尺寸改为百分比或是em单位比较好。）

（4）这里要注意的事，有些尺寸不需要改变的，eg：border的1px边框，是不必随着按钮的变大而加粗的，所以还是绝对长度。

（5）background:#58a linear-gradient(#77a0bb,#58a);——可以把半透明的黑色或是白色叠加在主色调上，即可以产生主色调的亮色和暗色变体。

通过以上思考，作者将代码修改如下：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title>Test01</title>
 5     <meta charset="utf-8">
 6     <style type="text/css">
 7         .content{
 8             width: 600px;
 9             height: 600px;
10             margin: 100px auto;
11             border:1px solid pink;
12         }
13         .content button{
14             padding:.3em .8em;
15             border:1px solid rgba(0,0,0,.1);
16             background:#58a linear-gradient(hsla(0,0%,100%,.2),transparent);
17             font-size: 125%;
18             border-radius: .2em;
19             box-shadow: 0 .05em .25em rgba(0,0,0,.5);
20             color: white;
21             text-shadow: 0 -.05em .05em rgba(0,0,0,.5);
22 
23         }
24         .content .b2{
25             font-size: 200%;
26             background-color: red;
27         }
28     </style>
29 </head>
30 <body>
31     <div class="content">
32         <button class="b1">Yes!</button>
33         <button class="b2">Yes!</button>
34     </div>
35 </body>
36 </html>