技术的发展往往会带来相应的思维方式上的转变，这样才能相辅相成，发挥新技术的潜力，如果还是使用以前的思维模式，怎么说呢，有着劳斯莱斯加着92#汽油在跑的感觉。
传统的实现，包括现在移动端几乎所有的实现套路都是下面这样的，无论是标签还是按钮，都是先设定一个基础类名，写下基本样式，然后不同的颜色重新命名一个状态类名，覆盖默认的边框色或者背景色或者文字颜色，是什么颜色就写什么颜色。
但，实际上，如果采用基于color重构UI组件的策略，则可能会有意想不到的裨益……
“CSS相关”目录存档
基于CSS color属性的静态UI组件重构策略
2016年11月18日，星期五CSS content换行实现字符点点点loading效果
2016年11月13日，星期日CSS content字符生成配合CSS3 animation可以各类字符loading效果实现，一起过来看看眼界，学习学习新的实现思路吧~~
CSS unicode-range特定字符使用font-face自定义字体
2016年11月12日，星期六一看名称，很多小伙伴可能认为是个什么生僻的东西，实际上，这玩意只是名字怪怪的，功能关键时刻还是很管用的。
unicode-range是一个CSS属性，一般和@font-face规则一起使用。在自定义字体的时候，可以指定某些字符使用该字体，其他字符依然使用默认的或者其他的字体。这种特性在某些场景非常有用，也可以用来实现一些特殊的效果。
本文有详尽文字阐述，必要的源代码展示，精彩的实例页面和签到好处的效果截图以及多个字符处理相关的工具露脸，总之希望本文的内容能够对您的学习有所帮助。
巧用浏览器CSS属性值的不兼容向下兼容hack技巧
2016年10月25日，星期二CSS3中有很多好的特性，例如box-shadow盒阴影，但是，唯一的问题是IE8浏览器不支持，如果是对外的PC站点，则IE8浏览器不可不顾，尤其一些受众广泛的网站。
怎么办呢？我的做法往往是这样，IE9+浏览器使用box-shadow阴影，而IE7，IE8浏览器使用border线框。
我们一般采用一些CSS hack技巧，例如使用:root伪类，从功能上满足了我们的开发需求，但提高了我们的CSS权重，很容易增加我们CSS代码的复杂度，那有没有更好的实现呢？
深入CSS ::first-letter伪元素及其实例等
2016年09月30日，星期五首先，::first-letter本身兼容性非常好，然而，细细体味，会发现，虽然::first-letter兼容性很好，浏览器很早就支持，但是我们实际项目用得并不多，那是因为，我们可以通过嵌套span标签的方式，实现更为广泛更灵活的样式控制。
但是，实际开发场景千千万，总会遇到HTML结构不能改动，或者改动成本很高的的情况，此时::first-letter等就非常有用，而且多半扮演英雄或者救星的角色……
从height:100%不支持聊聊CSS中的“死循环”
2016年09月16日，星期五大家应该都知道，如果元素没有格式化的高度值，子元素的height百分比高度是不起作用的，常见的就是height:100%无效，而宽度就没有此问题，所以，新人经常会提出的一个问题是：“为何我的div设置了height:100%却没有效果？”
不知道大家有没有思考过这样一个问题。
然后，有同行就提出了这么一个看似很合理的解释，就是，“假如父元素height:auto且没有其他格式化高度，子元素支持height:100%，则很可能会出现高度死循环”。
看似合理，实际上这种解释是表面的，错误的……
聊聊CSS世界中的margin-box
2016年09月16日，星期五盒尺寸由4个盒子组成，分别是content box, padding box, border box, margin box。这个和盒模型中的几个盒子其实是对应的。但是，对于的CSS关键字中却没有margin-box，唯独缺了margin-box，这是为什么呢？
-webkit-box-reflect属性简介及元素镜像倒影实现
2016年08月14日，星期日玻璃，水面会有倒影，有时候我们在web中模拟一些效果，或者实现一些质感的时候，也是需要投影效果的。那我们该如何实现呢？本文从-webkit-box-reflect入手，按照浏览器，依次介绍各种投影效果的实现，很多demo，很多截图很多源代码展示，希望本文的内容能够对您的学习有所帮助！
Safari 3D transform变换z-index层级渲染异常的研究
2016年08月7日，星期日Safari被戏称为新时代的IE6，就是因为其有各种各种奇怪的渲染问题，或明显的渲染bug, 而这些bug都是IE浏览器不会犯的，着实让人头疼。
而本文这里要展示的3D变换影响层级渲染也是Safari浏览器专有的问题，不妨进来看看，说不定下次遇到类似问题就知道是怎么回事，该怎么解决了~~ 
我的应用
我的应用