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

  • 相关阅读:
    Java Web(八) MVC和三层架构
    Java Web(九) 用户管理系统
    Java Web(十一) 分页功能的实现
    hibernate(四) 双向多对多映射关系
    合并两个排序的链表
    反转链表
    链表中倒数第k个结点
    堆排序
    计算机网络常见面试题
    字节对齐原则
  • 原文地址:https://www.cnblogs.com/xiaozweb/p/5279678.html
Copyright © 2011-2022 走看看