css
css
轻设计withCss精灵
何为轻设计：
在开始之前先需要明确下何为轻设计。这里并不想给轻设计下一个专业的定义，只是归纳了大家对轻设计所应具有的特性的理解。
具有灵敏的可交互元素：页面上的链接、文本框、按钮等可交互元素能灵敏地响应操作并即时反馈。
轻便的流程和提示，不打断用户的当前任务：一项任务尽量用少而清晰的步骤去完成，提示和临时任务尽量不中断用户主任务，不要让用户做不必要的确认和操作。
不干扰用户的注意力：用户是来使用产品和服务的，而不是来欣赏精美的设计，如果使用过程中会因为设计元素分散注意力那么可能是设计太重了。试着少用些无用的装饰和细节。
css口诀
今天标准之路的一个交流群一个朋友发了一个这样的口诀，我感觉很好，发出来分享~
在进行CSS网页布局时遇到BUG，请认真阅读以下内容，非常容易记忆的，不知道哪位高人把CSS BUG编成了顺口溜了！看看好不好记住呢？
一、IE边框若显若无，须注意，定是高度设置已忘记；
二、浮动产生有缘故，若要父层包含住，紧跟浮动要清除，容器自然显其中；
三、三像素文本慢移不必慌，高度设置帮你忙；
四、兼容各个浏览须注意，默认设置行高可能是杀手；
五、独立清除浮动须铭记，行高设无，高设零，设计效果兼浏览；
六、学布局须思路，路随布局原理自然直，轻松驾驭html，流水布局少hack，代码清爽，兼容好，友好引擎喜欢迎。
七、所有标签皆有源，只是默认各不同，span是无极，无极生两仪—内联和块级，img较特殊，但也遵法理，其他只是改造各不同，一个*号全归原，层叠样式理须多练习，万物皆规律。
八、图片链接排版须小心，图片链接文字链接若对齐，padding和vertical-align:middle要设定，虽差微细倒无妨。
九、IE浮动双边距，请用display：inline拘。
十、列表横向排版，列表代码须紧靠，空隙自消须铭记。
CSS书写标准及最佳实践
CSS用来定义网站的用户界面，并实现页面展现与内容的分离。CSS在几乎所有的网站都会用到，下面让我们花些精力来确保你的CSS书写的是否标准、合理。这些提示对CSS初学者同样会有很大的帮助。
- 样式表索引样式表头部索引定义可以帮助你和其它人弄清楚该样式表文件的相关信息，它一般是一段格式化的CSS注释文本。
- 给出该css文件作者的相关信息
- 定义站点的布局（几栏，静态布局/动态布局）
- 记录文件版本号（利于多作者协作及将来更新）
样式表索引
推荐一些所谓的CSS的“顶级”技巧
在一行内声明CSS对比下面两个：
h2 {font-size:18px; border:1px solid blue; color:#000; background-color:#FFF;}
h2 {
font-size:18px;
border:1px solid blue;
color:#000;
background-color:#FFF;
}
第二种看起来的确格式化，但是不会在阅读上有任何帮助。写在一行内可以让你更快的找到需要的部分。
以前我也是写成类似第二种方式，但是逐渐发现就像文章说的一样，没多大用。一行看起来又爽快又省地方还能让文件更小。
css优化-如何优化css文件
做为网页设计者还是非常在意网站的交互速度的，这不仅直接关系到用户体验，也在一定程度上影像到网站的整体收录。我们都知道，Web网站可用性的关键指标是速度，更确切地说，是页面能以多快的速度出现在访问者的浏览器窗口里。我们力求努力做到让自己的网站速度更快一些，常常要做的是去优化站点里每一个图像文件，但是你知道吗，css文件也是需要优化的。对css文件进行优化不仅能够增强css的可读性，而且还能大幅度的减小css文件的大小，从而缩短了加载时间。
我在前面的文章中曾经介绍过许多使用的在线优化css的网站，这些工具能够很好的对css文件进行批量格式化，使得css文件的可读性与css文件的大小成反比。也就是说优化后的代码将完全是混乱的，可读性非常差，但是体积很小。不利于后期的维护。
其实优化CSS文件非常简单，只要我们在网站完成之后把CSS文件做下规整，在编写的时候注意下一些比较常用的缩写方法，养成良好的习惯，你也可以让你的CSS文件做到真正的优化。