• CSS框架分析与网站的CSS架构


    框架(framework)是一个基本概念上的结构,用于去解决或者处理复杂的问题,是一种可复用的构架。

          我们对CSS框架这个词比较陌生,但对于JavaScript框架就比较熟悉了,比如jQuery

         但为什么js框架大红大紫而CSS框架确始终没有流行起来呢?甚至有人说“在我有限的视野里,还没见到可以真正可以称得上css框架的东东~”CSS框架没有被大众接受的一个重要原因是:

          js框架是基于逻辑的,js框架简化了逻辑中的繁琐细节,封装了存在兼容性的函数,提供了丰富的选择器、函数和插件,给开发者带来方便;

           而CSS框架是基于表现的,每个设计的风格或者同一个风格的繁简都完全不同,导致框架的可复用程度很小,比如960grids和blueprint,他们都是基于栅格的CSS框架,当设计并不是基于栅格的时候,他们就没有用武之地了。

            Elements CSS Framework只有当用户需要用到lightbox和特殊链接的时候,他才能发挥最大的作用。否则他只能提供reset.css

            YUI Grids CSS提供了一千多种布局,但是局限性依然明显,它的second-block被固定为160px,180px,300px三种,给设计制造了很大的局限性,结构嵌套过多,类名无语义,所以有人批判“与table布局无异”,呵呵,其实灵活性比table还是有很大的进步的,我记得08年的淘宝和有啊就是用的YUI Grids CSS,(淘宝2011版是无栅格的1000px宽度)但这种布局终究引起很大争议,缺陷过多,所以在YUI3中,雅虎团队去掉了grids.css,仍然保留着其他三个样式(reset,base,fonts)

    CSS框架的缺点


    综合以上的一些分析,我们总结了CSS框架的缺点

          1.嵌套过多,代码冗余,类名缺乏语义。这几乎是所有框架的通病。

          2.组件复用性少。可能一个布局要调用大量的CSS文件,而其中的大段的代码用不上。如果对有用的代码封装,封装的过程就极其麻烦,后期的可维护性也变差了

          3.学习成本高,可能需要设计师和开发人员同时学习。可是当设计师被“栅格”拴住了思想,开发人员被“框架”框住了手脚的时候,才是真正的杯具。

           我相信,以后会有一款真正的CSS框架出现,能完美解决上述问题,但是,现在还没有。有个同学甚至用js写了一个CSS框架,曲线救国,但是这个框架并不简单,执行效率如何也值得讨论。但是,

    CSS框架并非一无是处

    在网站的css架构中,我们依然要运用框架的思想架构整站CSS,几点注意事项:

          1.制订简洁而高效的reset.css

          2.功能模块的命名应该有良好语义并且全站统一

          3.Footer部分和header部分单独开发(一套或者多套)

          4.如果图标和按钮过多可以书写专门的样式icon.css和button.css

          5.在可重用、可扩展的基础上尽可能减少html代码的嵌套,以减少DOM树的渲染时间

          6.CSS选择器的层级不可过深,优化代码,减少重定义,CSS选择器的查询方式是用关键字查询keyselector,减少层级会提高查询效率;不用滤镜和CSS表达式(IE8已不支持CSS表达式)

         7.图片的合并要综合考虑服务器流量、HTTP请求数、可扩展性

         8.本地开发的html和css注释要良好(同时避免ie6注释bug)

         9.组件化开发不可划分过细,否则后期的维护量过大,良好的注释可以部分代替组件化

    佛为心,道为骨,儒为表,大度看世界; 技在手,能在身,思在脑,从容过生活; 三千年读史,不外功名利禄; 九万里悟道,终归诗酒田园;
  • 相关阅读:
    php根据时间显示刚刚,几分钟前,几小时前的实现代码
    PHP中获取当前页面的完整URL
    PhpExcel中文帮助手册|PhpExcel使用方法
    洛谷P1781 宇宙总统【排序+字符串】
    洛谷P1579 哥德巴赫猜想(升级版)【水题+素数】
    洛谷P1478 陶陶摘苹果(升级版)【水题】
    洛谷P1002 过河卒【dp】
    51Nod
    排序算法总结(C++)
    UVA1339
  • 原文地址:https://www.cnblogs.com/taofx/p/4139347.html
Copyright © 2020-2023  润新知