01--css编码技巧--css揭秘

2017-01-12 19:13:59来源:cnblogs.com作者:ShareWonderful人点击

一 尽量减少代码重复

1.按钮

#btn {    padding: .3em .8em;    border: 1px solid #446d88;    background: #58a linear-gradient(hsla(0,0%,100%,.2),transparent);    border-radius: .2em;    box-shadow: 0 .05em .25em gray;    color: white;    text-shadow: 0 -.05em .05em #335166;    font-size: 125%;    line-height: 1.5;}

 


2.代码易维护vs. 代码量少

3.currentColor 自动从文本那获取颜色值

hr {    height: .5em;    background: currentColor;}

 

3.继承 inherit
inherit 可以用在任何CSS 属性中,而且它总是绑定到父元素的计
算值(对伪元素来说,则会取生成该伪元素的宿主元素)
这个inherit 关键字对于背景色同样非常有用。举个例子,在创建提
示框的时候,你可能希望它的小箭头能够自动继承背景和边框的样式(

.callout { position: relative; }.callout::before {    content: "";    position: absolute;    top: -.4em; left: 1em;    padding: .35em;    background: inherit;    border: inherit;    border-right: 0;    border-bottom: 0;    transform: rotate(45deg);}

 

二 相信你的眼睛,而不是数字

人的眼睛并不是一台完美的输入设备。有时候精准的尺度看起来并不精
准,而我们的设计需要顺应这种偏差。举一个在视觉设计领域广为人知的例
子吧,我们的眼睛在看到一个完美垂直居中的物体时,会感觉它并不居中。
实际上,我们应该把这个物体从几何学的中心点再稍微向上挪一点,才能取
得理想的视觉效果


三 关于响应式网页设计

你添加的媒体查询越多,你的CSS代码就会变得越来越经不起折腾。
媒体查询的断点不应该由具体的设备来决定,而应该根据设计自身来决定

1.媒体查询的注意和建议:
1> 使用百分比长度来取代固定长度。如果实在做不到这一点,也应该
  尝试使用与视口相关的单位(vw、vh、vmin 和vmax),它们的值解
  析为视口宽度或高度的百分比。
2> 当你需要在较大分辨率下得到固定宽度时,使用 max-width 而不是
  width,因为它可以适应较小的分辨率,而无需使用媒体查询。
3> 不要忘记为替换元素(比如 img、object、video、iframe 等)设
  置一个max-width,值为100%。
5> 假如背景图片需要完整地铺满一个容器,不管容器的尺寸如何变化,
  background-size: cover 这个属性都可以做到。但是,我们也要时
  刻牢记——带宽并不是无限的,因此在移动网页中通过CSS 把一张
  大图缩小显示往往是不太明智的。
6> 当图片(或其他元素)以行列式进行布局时,让视口的宽度来决定
  列的数量。弹性盒布局(即Flexbox)或者display: inline-block
  加上常规的文本折行行为,都可以实现这一点。
7> 在使用多列文本时,指定 column-width(列宽)而不是指定
  column-count(列数),这样它就可以在较小的屏幕上自动显示为单
  列布局。

总的来说,我们的思路是尽最大努力实现弹性可伸缩的布局,并在媒体
查询的各个断点区间内指定相应的尺寸。


四 合理使用简写

合理使用简写
是一种良好的防卫性编码方式,可以抵御未来的风险。当然,如果我们要明
确地去覆盖某个具体的展开式属性并保留其他相关样式,那就需要用展开式
属性

#box {    background: url(tr.png) no-repeat top right / 2em 2em,    url(br.png) no-repeat bottom right / 2em 2em,    url(bl.png) no-repeat bottom left / 2em 2em;}
#box {    background: url(tr.png) top right,    url(br.png) bottom right,    url(bl.png) bottom left;    background-size: 2em 2em;    background-repeat: no-repeat;}

现在,我们只需要在一处修改,就可以改变所有的background-size
和background-repeat 了。你会发现这个技巧在本书中的使用非常普遍。


五 我应该使用预处理器吗
如果使用得当,它们在大型项目中可以让代码更加灵活
1> CSS 的文件体积和复杂度可能会失控
2> 调试难度会增加

小花絮 :
怪异的简写语法

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台