模块化CSS——在CSS中引入面向对象编程思想
如何划分模块——单一职责
模块化可以让代码高度重用，显著提高开发效率。关于模块化，比较成熟的是编程领域的“类”。在面向对象编程方式中，“类”是个非常核心的概念，可以说面向对象思想的基础就是“类”。关于模块化，“类”有很多成熟的技巧，例如封装、多用组合少用继承原则等。 CSS的模块化是个有趣的话题，它是个新的领域，很多人都有自己的见解。下面笔者谈谈自己的理解——借鉴编程中的“类”，将面向对象的编程思想引入到CSS的模块化里。
从视觉上进行划分，样式和功能相对独立且稳定的一部分就可以视为模块。举个例子说明，对于图1所示的设计图，我们该如何划分模块呢？
很明显，除了第三列，前两列的上下两部分从视觉上来看结构相同。因此可以将设计图按图2所示的四种模块来编写代码。每个模块都要完整包含自己区域的内容，相同类型的模块可以重用。
但仔细观察，会发现模块l和模块2有相似的部分，模块3和模块4也有相似的部分，这些相似的部分分别在两个模块里都写了一遍。 一方面，增加了冗余的代码量，另一方面如果需要修改相似部分的代码，两个模块都需要修改，增加了修改的成本。
我们可以将这些相似的部分提取出来，再进一一步拆分成更小的模块。我们可以将设计图拆成6个模块，如图3所示。如此一来，每个模块都相对独立，和其他模块没有重复的地方，模块的重用率提高了。
图4中框出的部分如果需要修改，按4种模块拆分的方式就需要在模块1和模块2中分别修改，而按6种模块拆分的话，只需要修改模块4就可以了。可见拆分成6个模块可以提高可维护性，方便修改。
至此，我们可以归纳出拆分模块的第一个技巧：模块与模块之间尽量不要包含相同的部分，如果有相同部分，应将它们提取出来，拆分成一个独立的模块。
按6种模块拆分的方式已经足够好了吗？虽然模块与模块之间已经不再有相同部分了，每个模块都相对独立，但模块1和模块2包含的结构比较复杂，如果需要添加如下的模块会怎么样呢？
图5中的设计是不是和图1很像呢？我们能不能直接使用图3中拆分的模块来拆分图5呢？答案是不行！虽然图5中的设计与图3中的模块1和模块2很像，但并不一样。图3中的模块1和模块2除了标题和边框之外，还包含其他内容。
将图3中的模块1和模块2进一步拆分，得到如图6所示的8个模块，其中的模块1和模块2就可以匹配图5中的设计了，如图7所示。
按照6种模块来拆分，其中模块1和模块2会因为结构复杂，而难以在相似的设计中重用。按照8种模块来拆分，模块的结构更加简单，能重用在相似的设计中。我们在拆分模块时，应将模块拆得尽可能简单，以提高弹性。模块功能越简单其重用性越高，但数量也会相应增加，增加了维护难度。所以，拆分模块时应该在“数量少”和“结构简单”之间取一个最合适的平衡点。
这就是拆分模块的第二个技巧：模块应在保证数量尽可能少的原则下，做到尽可能简单，以提高重用性。
在面向对象编程中也有相似的思想，设计类的时候，为了保证重用性需遵守“单一职责”原则，一般情况下，类的功能应该相对简单稳定，一个类只具有一个职责。一个功能超复杂的拥有多个职责的大类，其重用性远不如一群职责单一的简单小类。