用css实现下面的效果图。
方案一
<style type="text/css"> .myList1 { border: 1px solid #333; padding: 10px; } .myList1 li { height: 20px; line-height: 20px; font-size: 12px; } .myList2 { border: 1px solid #333; padding: 10px; } .myList2 li { height: 20px; line-height: 20px; font-size: 16px; } .myList3 { border: 1px solid #333; padding: 10px; } .myList3 li { height: 20px; line-height: 20px; font-size: 12px; color: red; } </style> <ul class="myList1"> <li>aaaaaaaaa</li> <li>bbbbbbbbb</li> <li>ccccccccc</li> </ul> <ul class="myList2"> <li>ddddddddd</li> <li>eeeeeeeee</li> <li>fffffffff</li> </ul> <ul class="myList3"> <li>ggggggggg</li> <li>hhhhhhhhh</li> <li>jjjjjjjjj</li> </ul>
方案一可以实现我们想要的效果，但它非常冗余，myList1，myList2，myList3的css设置相同，‘myList1 li’、‘myList2 li’、‘myList2 li’有部分css一致。我们需要对它们进行改进。
方案二
<style type="text/css"> .myList1, .myList2, .myList3 { border: 1px solid #333; padding: 10px; } .myList1 li, .myList2 li, .myList3 li { height: 20px; line-height: 20px; font-size: 12px; } .myList2 li { font-size: 16px; } .myList3 li { color: red; } </style> <ul class="myList1"> <li>aaaaaaaaa</li> <li>bbbbbbbbb</li> <li>ccccccccc</li> </ul> <ul class="myList2"> <li>ddddddddd</li> <li>eeeeeeeee</li> <li>fffffffff</li> </ul> <ul class="myList3"> <li>ggggggggg</li> <li>hhhhhhhhh</li> <li>jjjjjjjjj</li> </ul>
方案二和方案一思路相同，仍将模块视为完全不同彼此独立的三个类，只是对css代码做了精简工作。去除了代码冗余。
方案三
<style type="text/css"> .myList { margin-bottom: 10px; width: 300px; } .f12 { font-size: 12px; } .f16 { font-size: 16px; } .red { color: red; } .myList { border: 1px solid #333; padding: 10px; } .myList li { height: 20px; line-height: 20px; } </style> <ul class="myList f12"> <li>aaaaaaaaa</li> <li>bbbbbbbbb</li> <li>ccccccccc</li> </ul> <ul class="myList f16"> <li>ddddddddd</li> <li>eeeeeeeee</li> <li>fffffffff</li> </ul> <ul class="myList f12 red"> <li>ggggggggg</li> <li>hhhhhhhhh</li> <li>jjjjjjjjj</li> </ul>
方案三换了新思路，提取了更多的粒度更小类，通过类的组合实现设计图的效果。
方案二和方案三看似都是不错的解决方案，其中方案二的优势是调用简单，一个模块只需要挂一个类；方案三调用稍微麻烦，但也有效控制了冗余，代码精简。
看起来方案二和方案三都不错，但如果想实现下图的效果，又会如何呢？
需求更改
按照方案二的思路，我们需要再定义一个新的类myList4.代码清单如下:
<style type="text/css"> .myList1, .myList2, .myList3, .myList4 { border: 1px solid #333; padding: 10px; } .myList1 li, .myList2 li, .myList3 li { height: 20px; line-height: 20px; font-size: 12px; } .myList2 li { font-size: 16px; } .myList3 li { color: red; } .myList4 li { font-size: 16px; color: red; } </style> <ul class="myList1"> <li>aaaaaaaaa</li> <li>bbbbbbbbb</li> <li>ccccccccc</li> </ul> <ul class="myList2"> <li>ddddddddd</li> <li>eeeeeeeee</li> <li>fffffffff</li> </ul> <ul class="myList3"> <li>ggggggggg</li> <li>hhhhhhhhh</li> <li>jjjjjjjjj</li> </ul> <ul class="myList4"> <li>LLLLLLLLL</li> <li>MMMMMMMMM</li> <li>NNNNNNNNN</li> </ul>
按照方案三的思路，我们无需扩展新的类，只需要在HTML的标签的class里将之前定义的类重新组合即可。
<style type="text/css"> .f12 { font-size: 12px; } .f16 { font-size: 16px; } .red { color: red; } .myList { border: 1px solid #333; padding: 10px; } .myList li { height: 20px; line-height: 20px; } </style> </head> <body> <ul class="myList f12"> <li>aaaaaaaaa</li> <li>bbbbbbbbb</li> <li>ccccccccc</li> </ul> <ul class="myList f16"> <li>ddddddddd</li> <li>eeeeeeeee</li> <li>fffffffff</li> </ul> <ul class="myList f12 red"> <li>ggggggggg</li> <li>hhhhhhhhh</li> <li>jjjjjjjjj</li> </ul> <ul class="myList f16 red"> <li>LLLLLLLLL</li> <li>MMMMMMMMM</li> <li>NNNNNNNNN</li> </ul>
多用组合，少用继承
方案三借鉴了编程领域的组合的思想，将方案二中复杂的myList1、myList2、myList3等类拆分成了几个相对简单的类，其中相对稳定的部分拆分成myList类，而可能变化的部分拆成了f12类、f16类和red类。通过类的组合，很容易实现类的扩展，避免产生类爆炸。
知识延伸，面向对象编程
在面向对象中有类似上面的情况:继承和组合。
继承的思路是将一个复杂且包含变化的类，拆分成几个复杂但稳定的子类。首先明确一个抽象的父类，父类有着几乎所有的方法和属性。但使用继承的话，任何一点小的变化也需要重新定义一个类，很容易引起类的爆炸式增长，产生一大堆有着细微不同的子类。
组合的思路是将一个复杂的类分成容易产生变化的部分和相对稳定的部分，将容易变化的部分拆分出去，每一种可能的变化设计成一个个单独的类，而相对稳定部分设计成一个主体类，这样，将一个复杂的类拆分成几个简单的类，类之间没有继承关系，这遵循了面向对象设计的“单一职责”原则。将那些容易变化的类的实例赋值给主体类作为一个属性，这样就实现了类的组合。用组合方式，可以大大减少类的数量。
后记，这是我看过解释继承和组合最容易理解的说法，没有学过面对对象概念的同学可能有些地方不明白。
来源:Web前端开发修炼之道