*******黄色背景部分是废话，请忽略********
话说公司加上我，一共才三个前端，我从业一年多，另外两位估计都在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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css">
/* RESET */
html{ height: 100%;}
body{ height: 100%; line-height: 1.5;}
body,input,select,textarea{ font-size: 12px; font-family: "\5b8b\4f53" sans-serif;}
body,p,dl,dd,ul,ol,h1, h2, h3, h4, h5, h6,form{ margin: 0; }
ul,ol{ padding-left: 0; list-style-type: none;}
img{ border: 0; }
a{ text-decoration: none; color: #1A66B3;}
a:hover{ text-decoration: underline; color: #1A66B3;}
.fix {*zoom: 1}
.fix:after {display: block;content: "$";height: 0;clear: both;overflow: hidden;visibility: hidden}
</style>
<style type="text/css">
/* 基本布局 */
#container{ 960px; margin: 0 auto;}
#main{ display: inline; float: right; 760px; }
#side{ display: inline; float: left; 190px;}
.dis{ color: #9C9C9C; text-decoration: line-through;}
</style>
<style type="text/css">
/* 列表的公用CSS */
.data_list li{ padding: 8px;}
.data_list li:hover{ background: #faf0e6;}
.data_list .img{ display: block; background: #7fffd4;}
.data_list .summary{ margin-top: 8px;}
.data_list .summary .title{ display: block; }
.data_list .summary .price{ display: block; margin-top: 8px;}
.data_list .summary .price strong{ color: #C30; font:normal 18px Arial;}
</style>
<style type="text/css">
.grid li{ display: inline; float: left; }
.grid .img{ height: 200px; }
.list .img{ height: 150px; }
</style>
<style type="text/css">
.block{ margin-bottom: 8px;}
.block .hd { margin-top: 1px; padding:5px 8px; border: 1px solid #d4d4d4; }
.block .hd h3{ color: #fff;}
.block .bd { border: 1px solid #d4d4d4; border-top: 0; }
.h_1{ background: #8b008b;}
.h_2{ background: #006400;}
.h_3{ background: #adff2f;}
</style>
<style type="text/css">
.data_1 li{ 200px; margin-left: 27px; font-size: 14px;}
.data_2 li{ padding: 10px;}
.data_2 .price{ text-align: center;}
.data_3{ padding: 0 5px;}
.data_3 li{ 350px;}
.data_3 li .img{ float: left; 100px; height: 100px;}
.data_3 li .summary{ margin-left: 108px;}
.text_list { padding: 8px;}
.text_list li{ line-height: 24px;}
</style>
</head>
<body>
<div id="wrap">
<div id="container">
<div id="side">
<div class="block">
<div class="hd h_1">
<h3>热卖商品</h3>
</div>
<div class="bd">
<ul class="data_list list data_2">
<li>
<a class="img" href="#"></a>
<p class="summary"><span class="price"><strong>￥89.00</strong></span><a class="title" href="#">特价迪士尼手表，母贝表盘全场包邮，还有三天</a></p>
</li>
<li>
<a class="img" href="#"></a>
<p class="summary"><span class="price"><strong>￥89.00</strong></span><a class="title" href="#">特价迪士尼手表，母贝表盘全场包邮，还有三天</a></p>
</li>
</ul>
</div>
</div>
<div class="block">
<div class="hd h_2">
<h3>热卖商品</h3>
</div>
<div class="bd">
<ul class="data_list list data_2">
<li>
<a class="img" href="#"></a>
<p class="summary"><span class="price"><strong>￥89.00</strong></span><a class="title" href="#">特价迪士尼手表，母贝表盘全场包邮，还有三天</a></p>
</li>
<li>
<a class="img" href="#"></a>
<p class="summary"><span class="price"><strong>￥89.00</strong></span><a class="title" href="#">特价迪士尼手表，母贝表盘全场包邮，还有三天</a></p>
</li>
</ul>
</div>
</div>
<div class="block">
<div class="hd h_3">
<h3>热卖商品</h3>
</div>
<div class="bd">
<ul class="data_list list data_2">
<li>
<a class="img" href="#"></a>
<p class="summary"><span class="price"><strong>￥89.00</strong></span><a class="title" href="#">特价迪士尼手表，母贝表盘全场包邮，还有三天</a></p>
</li>
<li>
<a class="img" href="#"></a>
<p class="summary"><span class="price"><strong>￥89.00</strong></span><a class="title" href="#">特价迪士尼手表，母贝表盘全场包邮，还有三天</a></p>
</li>
</ul>
</div>
</div>
<div class="block">
<div class="hd h_1">
<h3>热点新闻</h3>
</div>
<div class="bd">
<ul class="text_list">
<li>大减价吐血促销大减价吐血促销</li>
<li>大减价吐血促销大减价吐血促销</li>
<li>大减价吐血促销大减价吐血促销</li>
<li>大减价吐血促销大减价吐血促销</li>
<li>大减价吐血促销大减价吐血促销</li>
</ul>
</div>
</div>
</div>
<div id="main">
<ul class="fix data_list grid data_1">
<li>
<a class="img" href="#"></a>
<p class="summary"><a class="title" href="#">MM 面包人日系休闲可爱帆布包背包书包双肩包SJ002</a><span class="price"><strong>￥89.00</strong><em class="dis">￥389.00</em></span></p>
</li>
<li>
<a class="img" href="#"></a>
<p class="summary"><a class="title" href="#">MM 面包人日系休闲可爱帆布包背包书包双肩包SJ002</a><span class="price"><strong>￥89.00</strong><em class="dis">￥389.00</em></span></p>
</li>
<li>
<a class="img" href="#"></a>
<p class="summary"><a class="title" href="#">MM 面包人日系休闲可爱帆布包背包书包双肩包SJ002</a><span class="price"><strong>￥89.00</strong><em class="dis">￥389.00</em></span></p>
</li>
<li>
<a class="img" href="#"></a>
<p class="summary"><a class="title" href="#">MM 面包人日系休闲可爱帆布包背包书包双肩包SJ002</a><span class="price"><strong>￥89.00</strong><em class="dis">￥389.00</em></span></p>
</li>
</ul>
<hr />
<ul class="fix data_list grid data_3">
<li>
<a class="img" href="#"></a>
<p class="summary"><a class="title" href="#">MM 面包人日系休闲可爱帆布包背包书包双肩包SJ002</a><span class="price"><strong>￥89.00</strong><em class="dis">￥389.00</em></span></p>
</li>
<li>
<a class="img" href="#"></a>
<p class="summary"><a class="title" href="#">MM 面包人日系休闲可爱帆布包背包书包双肩包SJ002</a><span class="price"><strong>￥89.00</strong><em class="dis">￥389.00</em></span></p>
</li>
<li>
<a class="img" href="#"></a>
<p class="summary"><a class="title" href="#">MM 面包人日系休闲可爱帆布包背包书包双肩包SJ002</a><span class="price"><strong>￥89.00</strong><em class="dis">￥389.00</em></span></p>
</li>
<li>
<a class="img" href="#"></a>
<p class="summary"><a class="title" href="#">MM 面包人日系休闲可爱帆布包背包书包双肩包SJ002</a><span class="price"><strong>￥89.00</strong><em class="dis">￥389.00</em></span></p>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
效果图：
写完之后，发现还是不能明确表达我的意思。其实归根结底，还是为了CSS的重用与可控制性，同时当时我也是为了CSS的分层(把抽象CSS分到高层CSS文件去)，可惜被组长的“一个CSS搞到死"的思想扼杀了。
剥掉各种绚丽的JS效果，所有的网页大体都差不多，所以退一步说，一个网站的同一系列的页面，应该也是差不多的，这样就可以把组合的数量与页面的大小控制到一个最佳的范围。话说回来，一个页面用于CSS的ID过多，不是设计有问题，就是CSS代码有问题，id作用JS的钩子才是最适合的。
后来回想一下，我这个想法还是有些地方没有考虑到，回头再完善一下。