前面的话

  本文将从DRY、currentColor、inherit和合理使用简写这几方面来详细介绍CSS编码技巧

DRY

  DRY,即don`t repeat yourself,尽量减少代码重复

  在软件开发中,保持代码的DRY和可维护性是最大的挑战之一,而这句话对CSS也是适用的。在实践中,代码可维护性的最大要素是尽量减少改动时要编辑的地方

  灵活的CSS通常更容易扩展。在写出基础样式之后,只用极少的代码就可以扩展出不同的变体,因为仅需覆盖一些变量就可以了

  下面这段代码在可维护性方面存在一些问题

<style>
div{
width:100px;
padding:6px 16px;
border:1px solid #446d88;
background:#58a linear-gradient(#77aebb,#58a);
border-radius:4px;
box-shadow:0 1px 5px gray;
color:white;
text-shadow:0 -1px 1px #335166;
font-size:20px
line-height 30px;
}
</style>
<div>YES</div>

  效果如下

  下面来对上面糟糕的代码一一修复

  1、如果决定改变字号,就得同时调整行高,因为这两个属性都写成了绝对值。当某些值相互依赖时,它们的相互关系要用代码表达出来

font-size:20px;
line-height:1.5;

  2、如果把这些长度值都改成em单位,那这些效果的值就可以都变成可缩放的了,而且是依赖字号进行缩放

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

  3、颜色是另一个重要的变数。如果要改变颜色,可能需要覆盖四条声明(border-color、background、box-shadow和text-shadow)

  其实只要把半透明的黑色或白色叠加在主色调上,即可产生主色调的亮色和暗色变体,这样就能简单地化解这个难题了

padding:.3em .8em;
border:1px solid rgba(0,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,0.5);
color:white;
text-shadow:0 -.05em .05em rgba(0,0,0,0.5);
font-size:125%;
line-height:1.5;

  现在只需要覆盖background-color属性,就可以得到不同颜色版本的按钮了 

.no{background-color: #c00;}
.ok{background-color: #6b0;}

【代码易维护vs代码量少】

  有时候,代码易维护和代码量少不可兼得。比如,为一个元素添加一道10px宽的边框,但左侧不加边框

border-width : 10px 10px 10px 0;

  只要这一条声明就可以搞定了,但如果日后要改动边框的宽度,需要同时改三个地方。如果把它拆成两条声明的话,改起来就容易多了,而且可读性或许更好一些

border-width: 1px;
border-left-width: 0;

currentColor

  在CSS3中,得到了一个特殊的颜色关键字currentColor,它是从SVG那里借鉴来的。这个关键字并没有绑定到一个固定的颜色值,而是一直被解析为color。实际上,这个特性让它成为了CSS中有史以来的第一个变量。虽然功能很有限,但它真的是个变量

  举个例子,让所有的水平分割线自动与文本的颜色保持一致。有了currentcolor之后,只需要这样写

hr{background:currentColor;}

继承

  inherit可以用在任何CSS属性中,而且它总是绑定到父元素的计算值(对伪元素来说,则会取生成该伪元素的宿主元素)

  举例来说,要把表单元素的字体设定为与页面的其他部分相同,并不需要重复指定字体瞩性,只需利用inherit的特性即可

input,select,button{font:inherit;}

  与此类似,要把超链接的颜色设定为页面中其他文本相同,也是用inherit

a{color:inherit;}

合理使用简写

  以下两行CSS代码并不是等价的

background : rebeccapurple
background-color : rebeccapurple

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

background: url(tr.png) no-repeat top right / 2em 2em,
url(br.png) no-repeat bottom right / 2em 2em,
url(b1.png) no-repeat bottom left / 2em 2em;

  可以简写为

background : ur1(tr.png) top right,
url(br.png) bottom right,
url(b1.png) bottom left;
background-size : 2em 2em;
background-repeat : no-repeat;

CSS编码技巧的更多相关文章

  1. [css 揭秘]:CSS编码技巧

    CSS编码技巧 我的github地址:https://github.com/FannieGirl/ifannie 喜欢的给我一个星吧 尽量减少代码重复 尽量减少改动时需要编辑的地方 当某些值相互依赖时 ...

  2. CSS hack技巧

    CSS hack技巧一览,原文来自CSDN freshlover的博客专栏<史上最全CSS Hack方式一览> 什么是CSS hack 由于不同厂商的流览器或某浏览器的不同版本(如IE6- ...

  3. 你所不知道的 CSS 阴影技巧与细节 滚动视差?CSS 不在话下 神奇的选择器 :focus-within 当角色转换为面试官之后 NPOI 教程 - 3.2 打印相关设置 前端XSS相关整理 委托入门案例

    你所不知道的 CSS 阴影技巧与细节   关于 CSS 阴影,之前已经有写过一篇,box-shadow 与 filter:drop-shadow 详解及奇技淫巧,介绍了一些关于 box-shadow  ...

  4. css小技巧(1)

    1.-webkit-overflow-scrolling: touch; 解决ios滑动时无缓冲问题 2.::-webkit-scrollbar 设置ios滑动时是否显示滚动条 3.::selecti ...

  5. CSS 代码技巧与维护 ★ Mozilla Hacks – the Web developer blog

    原文链接:https://hacks.mozilla.org/2016/05/css-coding-techniques/ 译文链接 :http://www.zcfy.cc/article/css-c ...

  6. css编码规范

    css编码规范 https://segmentfault.com/a/1190000002460968 常用样式测试工具 W3C CSS validator:http://jigsaw.w3.org/ ...

  7. 2天驾驭DIV+CSS (技巧篇)(转)

     这是去年看到的一片文章,感觉在我的学习中,有不少的影响.于是把它分享给想很快了解css的兄弟们.本文是技巧篇. 基础篇[知识一] “DIV+CSS” 的叫法是不准确的[知识二] “DIV+CSS” ...

  8. 你所不知道的 CSS 滤镜技巧与细节

    承接上一篇你所不知道的 CSS 动画技巧与细节,本文主要介绍 CSS 滤镜的不常用用法,希望能给读者带来一些干货! OK,下面直接进入正文.本文所描述的滤镜,指的是 CSS3 出来后的滤镜,不是 IE ...

  9. HTML编码规范、CSS编码规范

    HTML编码规范 IE 兼容模式 IE 支持通过特定的 标签来确定绘制当前页面所应该采用的 IE 版本.除非有强烈的特殊需求,否则最好是设置为 edge mode,从而通知 IE 采用其所支持的最新的 ...

随机推荐

  1. 完整版百度地图点击列表定位到对应位置并有交互动画效果demo

    1.前言 将地图嵌入到项目中的需求很多,好吧,我一般都是用的百度地图.那么今天就主要写一个完整的demo.展示一个列表,点击列表的任一内容,在地图上定位到该位置,并有动画效果.来来来,直接上demo  ...

  2. Node.js 入门:Express + Mongoose 基础使用

    前言 Express 是基于 Node.js 平台的 web 应用开发框架,在学习了 Node.js 的基础知识后,可以使用 Express 框架来搭建一个 web 应用,实现对数据库的增删查改. 数 ...

  3. 面向对象设计——抽象工厂(Abstract Factory)模式

    定义 提供一个创建一系列相关或者相互依赖对象的接口,而无需指定它们具体的类.抽象工厂允许客户使用抽象的接口来创建一组相关的产品,而不需要知道或关心实际产出的具体产品是什么.这样一来,客户就能从具体的产 ...

  4. 微信客户端+微信公众平台+新浪云SAE+Arduino+WS100(控制LED)

    第一步:准备 1.智能手机微信客户端或微信电脑版 2.注册微信公众平台 https://mp.weixin.qq.com 3.注册新浪账号 http://www.sinacloud.com 4.拥有一 ...

  5. 纯JS实现像素逐渐显示

    就是对于新手的我,以前从来没有做过对像素进行操作的实例.于是把资料书找了出来,实现了这个功能,比较简单,大神勿喷.下面是效果图,因为重在思路,效果就简陋一些. 其实就是简单的用JS实现将左上角的矩形随 ...

  6. NYOJ--水池数目

    //NYOJ--水池数目 #include<iostream> #include<cstring> }; using namespace std; void dfs(int,i ...

  7. Data truncation: Data too long for column 'gender' at row 1 出现的原因

    创建数据库的代码如下: create database day15 ; use day15 ; create table customer( id varchar(100) primary key, ...

  8. 弹性布局详解——5个div让你学会弹性布局

      前  言 JRedu 在网页制作过程中,布局是我们最重要的一个环节.可以说布局的好坏直接影响到整个网页的成败!布局成,则事半功倍:布局败,则事倍功半. 随着移动互联的到来,响应式网站风靡.这也就兴 ...

  9. Python 3.X安装配置

    0x01 安装Python 目前,Python有两个版本,一个是2.x版,一个是3.x版,这两个版本是不兼容的. 本教程安装的是python-3.6.1-amd64版本. Python官网:https ...

  10. Java 脚本引擎

    脚本引擎,就是一个编程语言的解释器,它的功能是解释执行用户的程序文本,将它译成计算机能执行的机器代码,完成一系列的功能. Java脚本引擎简单地说就是指Java提供的一组兼容操作各种脚本语言的的API ...