HTML组件化CSS方面的思考

在做一个列表页面的时候，根据设计图编写的HTML结构如下

    <div class="link-item-group">
        <div class="link-item"></div>
        <div class="link-item"></div>
        <div class="link-item"></div>
    </div>
    <div class="link-item">
    </div>

之前写样式，我会由上而下的去想，即把 link-item 当做了 link-item-group 的一部分，这样书写出来的样式虽然达到了设计稿的要求，但是灵活性不够，
如果其他的地方用到，可能需要修改的地方会非常多。换一种思路就是一步一步拆分HTML结构，从下往上的思考，例如上面的例子 书写link-item的样式的格式只关注
它自己的样式，不用关注它相对与其它元素的关系。如果是多个 link-item 成了一组，可以通过在外层包裹一层 link-item-group ，在 link-item-group下去定义
link-item的特殊样式。而 link-item 单独存在的时候相对于其它元素的位置关系，可以通过其它的类去控制，例如全局定义了的 m-t。

其实 bootstrap 框架到处都充斥着这一思想，但是之前用的时候并没有去想它为什么要这样做，现在看来真是很高明。