CSS编码技巧
前面的话
本文将从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编码技巧的更多相关文章
- [css 揭秘]:CSS编码技巧
CSS编码技巧 我的github地址:https://github.com/FannieGirl/ifannie 喜欢的给我一个星吧 尽量减少代码重复 尽量减少改动时需要编辑的地方 当某些值相互依赖时 ...
- CSS hack技巧
CSS hack技巧一览,原文来自CSDN freshlover的博客专栏<史上最全CSS Hack方式一览> 什么是CSS hack 由于不同厂商的流览器或某浏览器的不同版本(如IE6- ...
- 你所不知道的 CSS 阴影技巧与细节 滚动视差?CSS 不在话下 神奇的选择器 :focus-within 当角色转换为面试官之后 NPOI 教程 - 3.2 打印相关设置 前端XSS相关整理 委托入门案例
你所不知道的 CSS 阴影技巧与细节 关于 CSS 阴影,之前已经有写过一篇,box-shadow 与 filter:drop-shadow 详解及奇技淫巧,介绍了一些关于 box-shadow ...
- css小技巧(1)
1.-webkit-overflow-scrolling: touch; 解决ios滑动时无缓冲问题 2.::-webkit-scrollbar 设置ios滑动时是否显示滚动条 3.::selecti ...
- CSS 代码技巧与维护 ★ Mozilla Hacks – the Web developer blog
原文链接:https://hacks.mozilla.org/2016/05/css-coding-techniques/ 译文链接 :http://www.zcfy.cc/article/css-c ...
- css编码规范
css编码规范 https://segmentfault.com/a/1190000002460968 常用样式测试工具 W3C CSS validator:http://jigsaw.w3.org/ ...
- 2天驾驭DIV+CSS (技巧篇)(转)
这是去年看到的一片文章,感觉在我的学习中,有不少的影响.于是把它分享给想很快了解css的兄弟们.本文是技巧篇. 基础篇[知识一] “DIV+CSS” 的叫法是不准确的[知识二] “DIV+CSS” ...
- 你所不知道的 CSS 滤镜技巧与细节
承接上一篇你所不知道的 CSS 动画技巧与细节,本文主要介绍 CSS 滤镜的不常用用法,希望能给读者带来一些干货! OK,下面直接进入正文.本文所描述的滤镜,指的是 CSS3 出来后的滤镜,不是 IE ...
- HTML编码规范、CSS编码规范
HTML编码规范 IE 兼容模式 IE 支持通过特定的 标签来确定绘制当前页面所应该采用的 IE 版本.除非有强烈的特殊需求,否则最好是设置为 edge mode,从而通知 IE 采用其所支持的最新的 ...
随机推荐
- maven快速上手
1.maven安装 首先下载apache-maven-3.3.3-bin.zip(版本可以自己根据自己想要的下载). 解压后如下: 接下来配置系统环境变量: 到此,maven安装好了,接下来输入 ...
- 基于Hexo搭建博客并部署到Github Pages
基于Hexo搭建博客并部署到Github Pages 之前在简书上写东西,觉得自己还是太浮躁.本来打算用Flask自己写一个,以为是微框架就比较简单,naive.HTML.CSS.JS等都要学啊,我几 ...
- Java基础之接口与抽象类及多态、内部类
final关键字 被其修饰的类,不能被继承. 被其修饰的方法,不能被覆盖. 被其修饰的变量,是一个常量,不能被修改,所以定义时必须初始化(和C++的const类似). 一般有final,会搭配stat ...
- [补档]暑假集训D3总结
考试 集训第一次考试,然而- - 总共四道题,两道打了DFS,一道暴力,一道~~输出样例~~乱搞,都是泪啊- - 目前只改了三道,回头改完那道题再上题解吧- - T2 [Poi2010]Monot ...
- 36. leetcode 415. Add Strings
415. Add Strings Given two non-negative integers num1 and num2 represented as string, return the sum ...
- 抵制克苏恩[Lydsy2017年4月月赛]
题目描述 小Q同学现在沉迷炉石传说不能自拔.他发现一张名为克苏恩的牌很不公平.如果你不玩炉石传说,不必担心,小Q同学会告诉你所有相关的细节.炉石传说是这样的一个游戏,每个玩家拥有一个 30 点血量的英 ...
- Hadoop入门第二篇-MapReduce学习
mapreduce是一种计算模型,是google的一篇论文向全世界介绍了MapReduce.MapReduce其实可以可以用多种语言编写Map或Reduce程序,因为hadoop是java写的,所以通 ...
- ORA-01031:insufficient privileges解决方法
今天刚创建的数据库,用sys身份登录的时候提示 ORA-01031:insufficient privileges !郁闷了,肯定是先百度一波···然后设置当前用户权限.用Administator用户 ...
- 如何发布自己的开源框架到CocoaPods【转】
在开发过程中,经常会使用到第三框架,我们通过一个pod install命令,很方便的就将第三方框架加到我们自己的项目中. 如果我们也想将自己写的组件或库开源出去,让别人也可以通过pod install ...
- MySQL xtrabackup之--databases 勿手贱
xtrabackup备份单库时,必须指定--databases,但是如果将databases写成了database,那么xtrabackup备份的就是整个数据库,以下是 uuid = 397ae42e ...