zoukankan      html  css  js  c++  java
  • CSS也需要重构

    最初接触到的CSS面向对象,是项目里的CSS超过8千行,缺乏约束和管理,在近期或不远的将来,有迫切的要求需要重构。CSS面向对象和模块化。

    CSS代码遇到的问题:

        重用性差,看着一个CSS的名称,很难说出哪些模块可能引用到了它,这个CSS是用作网页的哪些部分的;

        结果谁也不敢修改和删除,后面的样式只能往上面堆积;

        怕CSS重名,s1、s2、t1、t2这样的命名开始出现了,这无异于饮鸩止渴,没有人知道这些样式是做什么的;

        于是,CSS越来越大了;

        做高保真的美工和业务开发人员思路是完全不同的,我们看到各种风格的CSS定义和命名;

        有时候,也会遇到CSS冲突的问题,这一切,还是归结为那一句话:复杂是一切软件问题的根源。

    CSS重构的原则:

        纵向模块化:由大到小建立CSS模块文件,比如:公用 -> 门户 -> 频道 -> 栏目 -> 内容;

        横向模块化:适用于一些独立性高的组件,比如播放器模块、弹出层模块;

        提供指导性CSS:例如,准备几套list类型展示的样式,把整个系统中的list展示全部收拢到这一处来,未来皮肤的更换、比较和修改,相当程度上便利了美工;

        CSS的拇指原则:如果同一功能区域的两个样式很相近,只保留一个!

        框架(栏目)用网格来控制宽度,而内容控制高度,当页面上由若干个栏目组成,每个栏目的宽度可以固定或者被频道按比例固定,但是高度需要取决于内容。

    CSS本身是支持继承和模块化的,另外在HTML页面上,也可以比较容易地做到样式和扩展样式的使用。

  • 相关阅读:
    js获取数组,对象的真实长度
    http和https区别
    react调用setstate后发生了什么
    for in for of foreach及map的区别
    事件委托(事件代理)
    CSS隐藏元素的几种方法
    react一些扩展
    [软件构造]异常的捕获与自定义
    [软件构造]可能是笔记总结吧
    计算机系统大作业
  • 原文地址:https://www.cnblogs.com/luyuan/p/3919541.html
Copyright © 2011-2022 走看看