*******黄色背景部分是废话，请忽略********
话说公司加上我，一共才三个前端，我从业一年多，另外两位估计都在4、5年以上，本以为可以跟他们学到些许什么，不过经过一段时间的了解之后，才发现人浮于事，他们已经被时代甩了好几条街。本以为三个人的前端可以做很多事，会有自己的工具，会有自己的思想，会有自己的风格，可惜组长······无奈啊。早前就提过辞职，碍于老大的面子，总算同意明年辞职，这段时间也一直想把自己的一些思考写出来，但是又懒得动笔。上个星期告诫自己，不管写些什么，每天都来这里写一篇日志，以示警示，也希望有善于思考的人一起交流。
想起来规划CSS是源于这半年来的纠结，项目改动频繁，多次向组长提出要好好规划，可是他依旧保留自己的外包思想（没有BS其他人的意思）—— 做完就不管了。我始终觉得一个产品的维护性比开发重要得多，这些东西总归要自己用的，就像自己的 孩子一样。可惜每次我提出的意见就被组长压下来，不接受意见，所以半年来一直给他们擦屁股。不过这更让我明白一个道理，合作就跟会思考的聪明人合作，找不会思考的人老实人干活。
废话还是少说，回归CSS吧。
CSS翻译过来叫做层叠样式表。样式这就不管了，我想说的是对层叠的理解。
层叠就像Java里面的继承与重载一样，虽然CSS里面也有继承一说，不过此继承非彼继承，CSS里面的继承是有选择性的（说法可能不准确，大意是某些会继承，某些不会继承，比如字体与边框）。
运用到层叠的时候，主要就是靠CSS的组合与子选择器。我用的时候，组合主要是用来添加属性（相当于扩展了一个接口），子选择器主要是用来覆盖属性（相当于重载一个方法）；很多人都告诉我，一个元素的CSS尽量少定宽度，起初我觉得这个很有道理，后来理解过来，才发现应该是一个子元素应该少定宽度，最好实现无宽度。让子元素随着父元素的宽度来改变。需要宽度的时候，我们就添加一个（组合）类，以实现一个扩展。沿着这个思路，我觉得不仅是宽度，padding，margin，这些影响块大小显示的都应该少规定。于是，经过层层选拔，除去width，padding，margin以后，剩下的那部分公用的，就是我的CSS基础结构，或者称作带有框架性质的抽象CSS，这里面除了基本的布局代码，其他都尽量避免使用ID，并尽量通俗化的命名。了解java的应该知道，java里面的抽象类是不能直接实例化的，显然这个抽象CSS是不能直接用的，要使用的话，必须给一个组合类或者用一个子选择器来来实例化它。
由于抽象CSS只会包含简单的公有属性，组合类的属性主要用来表达一些尺寸相关的属性，两者之间没有重叠部分，因此书写顺序并不会引起冲突。同理，子选择器的优先级肯定比抽象CSS的高，因此也可以放心的来书写。我想要达到的目的就是尽可能少的去重复代码，用可接受范围内的组合来拼出页面，实现CSS语义化的无缝迁移。
说得不清不楚，上个例子来说：
上面是当当的一个“书包”搜索的结果页面，可以看到有两个列表，怎么实现的大家因该清楚，我按照我上面说的意思照猫画虎写了
View Code 热卖商品
￥89.00特价迪士尼手表，母贝表盘全场包邮，还有三天
￥89.00特价迪士尼手表，母贝表盘全场包邮，还有三天
热卖商品
￥89.00特价迪士尼手表，母贝表盘全场包邮，还有三天
￥89.00特价迪士尼手表，母贝表盘全场包邮，还有三天
热卖商品
￥89.00特价迪士尼手表，母贝表盘全场包邮，还有三天
￥89.00特价迪士尼手表，母贝表盘全场包邮，还有三天
热点新闻
- 大减价吐血促销大减价吐血促销
- 大减价吐血促销大减价吐血促销
- 大减价吐血促销大减价吐血促销
- 大减价吐血促销大减价吐血促销
- 大减价吐血促销大减价吐血促销
MM 面包人日系休闲可爱帆布包背包书包双肩包SJ002￥89.00￥389.00
MM 面包人日系休闲可爱帆布包背包书包双肩包SJ002￥89.00￥389.00
MM 面包人日系休闲可爱帆布包背包书包双肩包SJ002￥89.00￥389.00
MM 面包人日系休闲可爱帆布包背包书包双肩包SJ002￥89.00￥389.00
MM 面包人日系休闲可爱帆布包背包书包双肩包SJ002￥89.00￥389.00
MM 面包人日系休闲可爱帆布包背包书包双肩包SJ002￥89.00￥389.00
MM 面包人日系休闲可爱帆布包背包书包双肩包SJ002￥89.00￥389.00
MM 面包人日系休闲可爱帆布包背包书包双肩包SJ002￥89.00￥389.00
效果图：
写完之后，发现还是不能明确表达我的意思。其实归根结底，还是为了CSS的重用与可控制性，同时当时我也是为了CSS的分层(把抽象CSS分到高层CSS文件去)，可惜被组长的“一个CSS搞到死"的思想扼杀了。
剥掉各种绚丽的JS效果，所有的网页大体都差不多，所以退一步说，一个网站的同一系列的页面，应该也是差不多的，这样就可以把组合的数量与页面的大小控制到一个最佳的范围。话说回来，一个页面用于CSS的ID过多，不是设计有问题，就是CSS代码有问题，id作用JS的钩子才是最适合的。
后来回想一下，我这个想法还是有些地方没有考虑到，回头再完善一下。