zoukankan      html  css  js  c++  java
  • 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很有必要,一个网站往往都是主调色啥的都是统一的,定义全局,如果下次想换颜色也方便,如果不单独提取出来,维护可想而知。

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

  • 相关阅读:
    Python读写Excel文件和正则表达式
    R Language Learn Notes
    Electron小记
    Unity商店下载的文件保存路径?
    Unity LineRenderer制作画版
    unity图形圆形展开
    [转]资深CTO:关于技术团队打造与管理的10问10答
    unity游戏在ios11上不显示泰语解决办法
    jQuery火箭图标返回顶部代码
    jQuery火箭图标返回顶部代码
  • 原文地址:https://www.cnblogs.com/pssp/p/5813976.html
Copyright © 2011-2022 走看看