最高效的CSS往往存在隐患

[uxsi]

<style type="text/css"> .demo_area{} .demo_area p{letter-spacing:12px;} .demo_box{display:inline-block;width:100px;height:100px;background-color:#F1F1F1;text-align:center;letter-spacing:normal;} .demo_box.red{background-color:#F7C6C7;} .demo_box.blue{background-color:#C7DEF8;} </style>

default boxred boxblue box

针对上面效果的解决方案，一般是对demo_box进行抽象，然后派生出red和blue等其它box，再结合代码效率什么的，得出的所谓最有效率的方案：

.demo_box{... background-color:#F1F1F1; ...}
.red{bcakground-color:#F7C6C7;}
.blue{bcakground-color:#C7DEF8;}

但是，最高效的方案却不一定是最安全的，如果把.demobox从第一行移至第三行，结果将变成：

<style> .demo_box{background-color:#F1F1F1;} </style>

default boxred boxblue box

没想到最高效的代码竟然如此脆弱。所以有时候不要太纠结，差不多了就行了。