css编码技巧【css揭秘读书笔记】

289 查看

最近在看《css揭秘》,于是写了文章来作笔记,除此以外还会补充一些自己遇到的笔试题。希望大家都有所收获。

css编码技巧

尽量减少代码重复

在实践中,代码可维护性的最大要素是尽量减少改动时要编辑的地方
举例说明

padding:6px 12px;
border: 1px solid #446d88;
background: #58a 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;

以上的代码有什么问题呢?

  1. 如果需要改变字号,那么同时需要调整行高。
    【当某些值相互依赖时,应该把它们的相互关系用代码表达出来】

  2. 如果将父级的字号加大,则不得不修改每一处使用绝对值作为字体尺寸的样式。

  3. 需要确定哪些效果是应该跟着变大变小,哪些效果是保持不变的

  4. 产生主色调的亮色和暗色变体,其实可以使用将半透明的黑色或白色叠加在主色调上。
    background: #58a linear-gradient(hsla(0,0%,100%,.2),transparent);
    //作者建议使用HSLA而不是RGBA来产生半透明的白色。因为它的字符长度更短,重复率更低。

那么经过修改后的代码如下:

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

关于使用rem还是em还是百分比,需要根据具体情况来决定。

【插播笔试题】

Q:line-height:1.5 与line-height:150%的差别?

  • line-height:1.5 是根据自身元素的font-size进行计算。

  • line-height:150% 是根据父元素继承而来的font-size进行计算。

Q:rem,em,px的差别

  • rem css3新增单位。rem为元素设定字体大小时,相对的只是HTML根元素。【IE8以下不支持】

  • em 相对于父元素的字体大小。

  • px 像素px是相对于显示器屏幕分辨率而言的
    px,em,rem的转换工具

继续回到css编码技巧。

  1. 有时候,代码易维护和代码量少不可兼得。

    例如,为元素添加一个10px宽的边框,但左侧不加边框
    border-width: 10px 10px 10px 0;
    但若以后需要改动边框的宽度,需要同时改3个地方。那么以下这种方式可能更好。
    border-width: 10px;
    border-left: 0;

  2. currentColor【IE9+支持】

    例如,我们想让所有的水平分割线元素自动与文本颜色保持一致,只需要这样写。
    hr { background: currentColor;}
    border和box-shadow默认的颜色就是当前的文字颜色,也就是类似currentColor。currentColor本身就是很多颜色属性的初始值,例如border-color、outline-color、text-shadow和box-shadow的颜色。【iOS Safari浏览器下(iOS8)下,currentColor有一些bug,例如伪元素hover时候,background:currentColor的背景色不会跟着变化。关于currentColor其他信息可查看张鑫旭博客,currentColor-CSS3超高校级好用CSS关键字

  3. 继承 inherit

    例如,在创建提示框时,可能希望小箭头能自动继承背景和边框的样式。就可以这样做。
    .callout:before {

       //其他代码
       background: inherit;
       border: inherit;

    }

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

视觉上的错觉在任何形式的视觉设计中都普遍存在。如果希望四边的内边距看起来基本一致,需要减少顶部和底部的内边距。

关于响应式网页设计

作者提出了一些建议,可能可以避免不必要的媒体查询

  1. 使用百分比长度来取代固定长度,如果做不到,尝试使用与视口相关的单位(vw,vh,vmin,vmax),它们的值解析为视口宽度与高度的百分比。

  2. 当需要在较大分辨率得到固定宽度时,使用max-width

  3. 不要忘记为替换元素(例如img,object,video,iframe等)设置一个max-width,值为100%

  4. 假设背景图片需要完整的铺满一个容器,可以使用background-size:cover。【在移动网页中通过css把一张大图缩小显示往往不太明智】

  5. 当图片或其他元素以行列式进行布局,让视口的宽度来决定列的数量。可以使用弹性盒布局(Flexbox)或者display:inline-box加上文本折行行为。

  6. 在使用多列文本时,指定column-width而不是column-count,这样可以在较小的屏幕上自动显示为单列布局。
    【尽量实现弹性可伸缩的布局,并在媒体查询的各个断点区间内制定相应尺寸】

合理使用缩写

如果要明确地去覆盖某个具体展开式属性并保留其他相关样式,则需要用展开式属性。

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;
            
//如果只为某个属性提供一个值,那么它会扩散并应用到列表中的每一项。
//在简写时,使用一个斜杠(/)作为分隔,是为了消除歧义。

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