从需求出发

　　分

　　我们刚开始学习写字的时候，是不会去考虑，写出来的某句话好不好，文章结构合适不合适，因为我们是意识不到的。写代码也一样，刚开始，我们只是去定义规则，能用对了属性，语法正确，把页面实现出来了，就好。慢慢地，就会发现，页面也是有结构的，我们按照页面的结构去组织代码，会不会更好？比如，分成头部、导航、侧边栏、banner区、主内容区、底部等。

　　然而这样貌似还是不够，因为还有一些东西，复用度是很高的，又不好把它归为任何一个固有模块，比如：面包屑、分页、弹窗等，它们不适合被放到某一个固有模块的代码中，就可以单独的分出一段专属的css和js，或许，这就是组件化的由来~

　　拆

　　在分了之后，我们的代码看起来已经比之前好很多了，组织清晰，维护性大幅提高，但是，好像还是不够，我们会发现另外一些东西，很细小，但复用度也很高，它们同样不适合被放到模块中去，比如，边框、背景、图标、字体、边距、布局方式等等。如果我们在每个需要它们的地方，都定义一次，它们会被重复很多次，显然，这背离好的实践，会造成代码冗余和维护困难。所以，我们需要“拆”。拆过之后会怎样？我们想在哪里用可以直接加，需要改的时候统一改。

　　排

　　经过了“分”、“拆”，我们的代码结构已经十分清晰，各个内容模块，功能模块，UI模块都乖巧的等待召唤，那么还差什么？是的，还差有序的组织，分类清晰之后，还需要排列有序，从不同纬度去考量，我们总能精益求精。举个栗子，我们可能会看到像这样：

@import "mod_reset.css";

@import "ico_sprite.css";

@import "mod_btns.css";

@import "header.css";

@import "mod_tab.css";

@import "footer.css";

　　我们将不同的部分按照一定的顺序去摆放，能让我们的代码看起来更加有序，易于维护，同时，有利于进行继承或层叠覆盖。不要小看这一步，看似可有可无，实际要求比较高的统筹规划能力，可以减少冗余代码和快速定位问题位置等。

网页设计