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
框架到处都充斥着这一思想,但是之前用的时候并没有去想它为什么要这样做,现在看来真是很高明。