广州web培训
达内广州五羊中心

18087159764

热门课程

a标签的伪类样式规划,减少多余代码

  • 时间:2016-08-30
  • 发布:广州前端开发培训
  • 来源:helloweb

a标签有link, visited, hover, active这几个常用的伪类用于定义不同状态.这些伪类意思明确,使用简单,看起来不会存在什么问题,而实际上他们的使用顺序,是否应该使用都需要考虑清楚.

a标签在网页中无所不在,而且样式复用性很高.一般来说,一个网站上的链接形式是比较统一的,所以作为reset或者基本的a标签CSS定义十分重要.

a标签伪类的lvha顺序

为了解决伪类状态覆盖的问题,网上建议开发者书写a标签样式如下:

a:link {color:#FF0000;} /*没访问过的链接样式*/

a:visited {color:#00FF00;} /*访问过的链接样式*/

a:hover {color:#FF00FF;} /*鼠标进入链接区域的链接样式*/

a:active {color:#0000FF;} /*点击链接时的链接样式*/

相信很多开发者都看了这段称为lvha (love & hate)的书写顺序建议,我看了很多网站在全站通用的CSS里已经也是这么写的.除了样式上有特殊需要,我不建议这样来定义a链接的样式,尤其是在通用样式中.

a标签lvha存在的问题

lvha的写法从逻辑上没有问题,而事实上这种写法是过度设计,为代码维护带来很多额外的维护成本.

假设全局通用CSS中已经按lvha定义样式,而页面中一些链接即便被访问过,要求跟没访问过的样式一致,开发便需要重写visited样式;如果某些链接颜色跟通用样式不一样,基本上要重写所有链接伪类的样式,代码量大,也相当麻烦.

下面是一段过度设计的示例代码摘要.

a:link{color:#06C;text-decoration:none;}

a:visited{color:#969;text-decotation:none;}

a:hover{color:#F90;text-decoration:underline;}

.normal a:link,

.normal a:visited{color:#666;}

.normal a:hover{color:#000;}

有什么问题相信大家看看就知道了,几乎所有对链接的重新定义,都需要将a链接对应的个伪类的样式重写一遍.

a标签样式规划建议

为什么会出现上述的写法?我猜这是因为设计库中存在一套对文本和链接的完整的设计规范,编写代码的人认为可以通过通用的样式一劳永逸,而这可能弄巧反拙.

a标签设计

link和hover状态的链接样式通用性很高,但visited样式仅在搜索页面的商品标题,帮助中心的问题链接等少部分列表的主要链接上才会使用.所以完全有理由将它们分开处理.

在通用CSS中只定义a和a:hover样式,需要使用a:visited样式时再做定义.则前面那段CSS可以定义如下:

a{color:#06C;text-decoration:none;}

a:hover{color:#F90;text-decoration:underline;}

.normal a{color:#666;}

.normal a:hover{color:#000;}

.list a:visied{color:#969;}

从代码可以看到,一般的链接样式修改,只需要顾及到a和a:hover,而其他状态仅在使用的时候进行定义.因为前者常有,后者少用,所以维护量是非常小的.

后话

过度设计无所不在,三年前我刚入职写过一段商品价格的CSS定义,对货币,价钱,单位以及各种场景都做了看起来完美的定义,但现在看来这是我做的最错误的一件事情,因为强定义导致样式覆盖的代码量大.而随着网站的发展,这些修改和重写必将越来越多.

当我们希望有一套CSS架构解决掉所有页面外观需求,甚至出现如: size-35, margin-left-10这样的class,过度设计就开始了...

上一篇:使用css制作斜角水平菜单导航
下一篇:JS实现自动倒计时30秒后按钮才可用(两种场景)

亚马逊要做智慧服务器

广州web培训:iPhone X前置耳机扬声器有杂音

余额宝年底规模增长高招

达内广州html5培训:苹果iOS11更新系统升级

选择城市和中心
贵州省

广西省

海南省