• OOCSS入门学习


      对于面向对象大家肯定都有多多少少的了解,这里所说的OOCSS就是说面向对象的CSS,得说明的是OOCSS并不是一门新语言也不是什么库,而是一种概念和javascript面向对象一样。

    可能你这样写过CSS代码

    #box>.item{
      margin:10px;
      float:left;
      text-align:center;
    }

    但如果另外一处的HTML结构和这个一模一样,那你是不是又得写一次css代码,这些多少有些不合理。

    其实我们完全可以解决这个问题,如果我们写成这样。

    .item{
      margin:10px;
      float:left;
      text-align:center;
    }

    是不是下次直接复制一下class就可以了,这样多简单。

    当然这只是其中的一个问题,有时我们并没有那么幸运,往往HTML结构都不会一模一样,但是很多情况下都差不多,只是一部分太个性,但也不是没有办法的,我们可以这样。

    //公共
    .item{
      margin:10px;
      float:left;
    }

    //1
    .set{
      color:red;
      text-align:center;
    }

    //2
    .unset{
      color:blue;
    }

    如果你对面向对象编程熟悉的话,我相信你很快就理解了。

    有时我们还会缩小到更细的颗粒,我相信你已经使用过了。

    .t_red_color{color:red;}
    .t_blue_color{color:blue;}

    有时定义全局CSS很有必要,一个网站往往都是主调色啥的都是统一的,定义全局,如果下次想换颜色也方便,如果不单独提取出来,维护可想而知。

    当然这里你可以把名字起的更好一些。

  • 相关阅读:
    JAVA日报
    JAVA日报
    JAVA日报
    JAVA日报
    JAVA日报
    JAVA日报
    JAVA日报
    剑指 Offer 20. 表示数值的字符串
    剑指 Offer 51. 数组中的逆序对
    剑指 Offer 21. 调整数组顺序使奇数位于偶数前面
  • 原文地址:https://www.cnblogs.com/pssp/p/5813976.html
Copyright © 2020-2023  润新知