模块化CSS设计(一) - 图标
前言：
最近半年多的时间里我都在参与TAPD项目的设计与前端开发。之所以把设计和前端开发一起承担主要是考虑到一种较为理想的设计流程，在进行设觉设计 的同时把Html、CSS的实现都考虑进去，这样无论是设计还是代码都是统一的设计理念和风格，便于维护和后续开发。后来发现TAPD的规模远大于自己所 想，交互研究、视觉设计、代码设计每一部分都是一份庞大的工作，每个页面的设计与实现都没有太多的时间仔细琢磨…还好后期英明的Boss把设觉与交互 设计部分交给了其他同事，我才得以对前端代码仔细研究，用了一个月的时间把所有Html与CSS进行重构。 本系列文章将跟大家分享我在TAPD项目上关于CSS架构设计的一些心得，譬如命名、灵活性等，不会涉及太多CSS技巧。 由于是想到什么就写什么，各章节之间没有什么必然的联系，希望大家看后有能有所收获。m(_ _)m - by ceil 2009/5/11
模块化CSS设计(一) －－－ 图标
index_img: https://cdn.jsdelivr.net/gh/ceilwoo/ceilwoo.github.io@latest/uploads/2009/05/mc_icon_01.png
categories: 编程
一般来说页面上的图标会用下边的两种形式撰写：
前者：直接插入图标的图片，好处是该按钮是inline-block，可以很方便的插入到页面任何地方。譬如说放到一段文字的中间。 [caption id=”attachment_359” align=”alignnone” width=”308” caption=”Example_01”]
[/caption] 后者：用CSS背景定位的把图标显示出来，并且把Edit文字隐去，相比前者降低了表现与逻辑的耦合性，更好的Html语义化。不过为了让图标有高度和宽度，一般情况会 把加上display:block，然后用background-image把图标放进去。那么弊端也是显而易见的，假设我需要把一个 图标插入到一句话的中间，那么由于display:block的存在会直接导致图标与其他文字换行显示。 [caption id=”attachment_360” align=”alignnone” width=”181” caption=”Example_02”]
[/caption] 综合两者的优点，我在TAPD中是这么定义一个图标的:
[caption id=”attachment_363” align=”alignnone” width=”415” caption=”CSS”]
[/caption] 这样TAPD的图标的不但具有形式的灵活性，同时减少耦合性、更好SEO、更好的HTML语义化…etc (因为要兼顾IE6/7/8、Firefox、Safari、Chrome中display:inline-block的实现，所以迫不得已要额外加一个标签用于将文字隐藏。) 按照yahoo的rules for high performance web sites的原则，应当减少Client与Server端间的HTTP请求次数。 我还用到CSS Sprite，将多张图标图片组装成单独的一张图片，用background-position显示不同的图标 [caption id=”attachment_366” align=”alignnone” width=”160” caption=”CSS Sprite”]
[/caption] 也许有人会问：
这么写不会更简单么？并且可以减少html和CSS代码？何必要写成Edit 其实我坚持在标签里写文字一方面是基于SEO的考虑，另外还考虑到一种情况，假设突然有一天我们的客户觉得编辑按钮图标太糟糕了！要求直接直接用文字。那么我稍微修改一下CSS文件便可以巧妙的把原来的图标变成一个文字链接了。又或者是客户由于某些原因访问不了TAPD的CSS文件，标签里没有文字的会变得一片空白，无法使用。 [caption id=”attachment_367” align=”alignnone” width=”409” caption=”Example_04”]
[/caption] 另外由于IE6对透明背景的PNG图片支持不好，所以大部分不规则图标我都是用gif格式。但是有时候gif的256色不能满足设计师的设计要求(设计师A：俺的作品多姿多彩，256色怎么够用！！)。 所以在CSS sprite的时候我是合成了两张图片，一张对色彩要求不高并且需要透明背景的GIF图片和一张对色彩要求高的PNG图片。