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 采用其所支持的最新的 ...
随机推荐
- 完整版百度地图点击列表定位到对应位置并有交互动画效果demo
1.前言 将地图嵌入到项目中的需求很多,好吧,我一般都是用的百度地图.那么今天就主要写一个完整的demo.展示一个列表,点击列表的任一内容,在地图上定位到该位置,并有动画效果.来来来,直接上demo ...
- Node.js 入门:Express + Mongoose 基础使用
前言 Express 是基于 Node.js 平台的 web 应用开发框架,在学习了 Node.js 的基础知识后,可以使用 Express 框架来搭建一个 web 应用,实现对数据库的增删查改. 数 ...
- 面向对象设计——抽象工厂(Abstract Factory)模式
定义 提供一个创建一系列相关或者相互依赖对象的接口,而无需指定它们具体的类.抽象工厂允许客户使用抽象的接口来创建一组相关的产品,而不需要知道或关心实际产出的具体产品是什么.这样一来,客户就能从具体的产 ...
- 微信客户端+微信公众平台+新浪云SAE+Arduino+WS100(控制LED)
第一步:准备 1.智能手机微信客户端或微信电脑版 2.注册微信公众平台 https://mp.weixin.qq.com 3.注册新浪账号 http://www.sinacloud.com 4.拥有一 ...
- 纯JS实现像素逐渐显示
就是对于新手的我,以前从来没有做过对像素进行操作的实例.于是把资料书找了出来,实现了这个功能,比较简单,大神勿喷.下面是效果图,因为重在思路,效果就简陋一些. 其实就是简单的用JS实现将左上角的矩形随 ...
- NYOJ--水池数目
//NYOJ--水池数目 #include<iostream> #include<cstring> }; using namespace std; void dfs(int,i ...
- Data truncation: Data too long for column 'gender' at row 1 出现的原因
创建数据库的代码如下: create database day15 ; use day15 ; create table customer( id varchar(100) primary key, ...
- 弹性布局详解——5个div让你学会弹性布局
前 言 JRedu 在网页制作过程中,布局是我们最重要的一个环节.可以说布局的好坏直接影响到整个网页的成败!布局成,则事半功倍:布局败,则事倍功半. 随着移动互联的到来,响应式网站风靡.这也就兴 ...
- Python 3.X安装配置
0x01 安装Python 目前,Python有两个版本,一个是2.x版,一个是3.x版,这两个版本是不兼容的. 本教程安装的是python-3.6.1-amd64版本. Python官网:https ...
- Java 脚本引擎
脚本引擎,就是一个编程语言的解释器,它的功能是解释执行用户的程序文本,将它译成计算机能执行的机器代码,完成一系列的功能. Java脚本引擎简单地说就是指Java提供的一组兼容操作各种脚本语言的的API ...