• 新媒体会馆第十三期:自然灾害时期的网络谣言应对与正向传播研讨会 2019-06-14
  • 出境游代购?先了解海关税那些事 2019-06-14
  • 银保监会:4家险企偿付能力不达标 2019-06-12
  • 机场周边严查违规网约车 2019-06-10
  • 香港航空得罪赌王儿子 社交媒体究竟该在舆情管理中扮演什么角色? 2019-05-29
  • 科学家教人工智能诊断脑癌 2019-05-29
  • 晋世绘——黄河新闻网 2019-05-06
  • 什么是阶级?阶级是不同经济地位和政治地位所构成的等级差别(原创首发) 2019-05-04
  • 看改革开放40年:交通篇——从双腿丈量到抬脚上车 2019-05-02
  • 2018陕西高考数学试题分析:注重基础知识 突出思维能力 2019-05-02
  • 海淀5家企业获第四届中关村质量管理奖 2019-04-27
  • 人民日报评论员:和世界共发展 与世界同分享 2019-04-03
  • 江西:建立高校统战工作重点目标管理考核机制 2019-04-03
  • 解决争端根本办法是建立机制 而不是利用社会舆论取得某种优势(原创首发) 2019-03-28
  • 陕西国资经营公司来访省国资运营公司 2019-03-28
  • 新型SEO思维就是从一个全新的层次上提升seo优化的水平,达到网络信息最佳化的展示效果!
    山西十一选五遗漏号 > 网站制作 > css教程 > 资深Web前端开发工程师教你如何优化CSS框架

    11选5日赚100绝密:资深Web前端开发工程师教你如何优化CSS框架

    时间:2014-01-23   文章来源:马海祥博客   访问次数:

    山西十一选五遗漏号 www.6am8.com 随着网络的发展,企业网站和个人网站已经变的很普遍了,搭建网站是技术也变的越来越智能化了,很多人也逐步的开始使用CSS框架进行快速建站。编写css也是一样,从最初只是定义文字颜色、内容排版,到现在定义所有的表现。css框架也渐渐被重视了,因为大家都认识到:从具象的表现中抽出抽象的??槔粗馗词褂?,是减少用户下载、方便团队及个人开发最重要的手段。

    当然对于一些大型的项目,我们可能会很难照搬某些框架直接使用的,因为直接使用会带来一些限制或者冗余的问题。但在CSS框架已经日趋成熟的今天,在我们设计项目架构、规范的时候,当前市面上一些优秀的框架也可以给我们提供很多可借鉴的地方。下面我们就借助马海祥博客的平台教你如何优化CSS框架。

    资深Web前端开发工程师教你如何优化CSS框架-马海祥博客

    一、CSS框架是什么?

    CSS框架是一系列CSS文件的集合体,包含了基本的元素重置,页面排版、网格布局、表单样式、通用规则、简单组件、以及样式重置等代码块,其目的就是用于简化web前端开发的工作,提高工作效率,降低工作成本进行快速建站。

    1、CSS框架的优点

    (1)、提高开发效率。

    (2)、规范名称定义,便于维护。

    (3)、规范项目开发流程。

    (4)、css代码更清晰、简单。html代码更合理。

    (5)、大规模项目中可以减少用户下载。

    2、CSS框架的弊端

    (1)、学习成本提高。你需要了解整个框架,需要阅读框架的文档。

    (2)、css框架对于一个小项目等页面来说很臃肿??蚣苤锌赡苡写蟛糠帜阌貌坏降拇?。

    (3)、可能会无法帮助你的技术提高。太依赖框架,以至于很难排除bug。包括框架中本身就带的bug。

    (4)、选择自己需要的框架与开发框架都很痛苦。写到后面发现越来越不灵活,越来越臃肿。

    二、目录组织

    在目录组织的分析上我们参考了Bootstrap, Blueprint, Yui, Yaml四个框架的组织方式,如下图所示:

    资深Web前端开发工程师教你如何优化CSS框架-马海祥博客

    当使用一个框架时,我们一般会把所需框架本身的样式链到页面中,然后在它的基础上进行修改。所以框架本身所带的样式可以理解为基础样式。即我们平时所说的全局样式+组件样式。

    资深Web前端开发工程师教你如何优化CSS框架-马海祥博客

    有上图我们可以看到,在目录架构上4个框架基本都是遵循基本样式+用户定义扩展样式的常规方式进行组织。

    然而,如果按Bootstrap做法的话,可能会出现把不常用组件样式也包含在全局样式中一并引入,如果把组件也写在全局CSS中,最好确保该组件出现频率较高才引入,避免不必要的带宽浪费。

    对于针对低版本浏览器所写的hack,对它的处理方式,Blueprint和Yaml都是使用单独引入hack文件的形式进行处理,马海祥也曾尝试过这样的做法。

    总的来说,马海祥觉得这种方式的好处是可以避免给高级浏览器带来冗余代码,而且通过条件判断引入CSS也不会给高级浏览器带来额外的请求。

    这种方式比较适用于,高低级浏览器本来就刻意设计成有较大差别的情况下,即hack比较多的时候才使用。不然就为了十来行hack而多引入一个文件的话似乎也不太可取。

    三、CSS规范

    1、前缀

    框架中公用??槎加星白?,分别有以下3个思想:

    (1)、Yaml, Yui :无论如何都是统一的标识开头,再加上改??槊?。

    (2)、Bootstrap:直接??槊?,这方式需要定义关键字。公用??槭莃utton都以btn – 开头, image则以img-开头。

    (3)、Nec:单字母开头来标识组件。

    资深Web前端开发工程师教你如何优化CSS框架-马海祥博客2、类的划分

    类的划分方式在框架中主要有2种标准,分别是:组件为粒度和属性为粒度。

    资深Web前端开发工程师教你如何优化CSS框架-马海祥博客

    (1)、组件为粒度:把组件的所有样式封装在一个类名中,调用类名即可使用该组件。

    (2)、属性为粒度:需要属性的时候,调用对应类名拼装。

    在我们日常项目中,以属性对类名进行划分比较少见,因为一直遵循的都是“结构、样式、行为”分离的原则,力求降低三者的耦合度。

    然而马海祥觉得以这种方式划分在一些特定情况下也不是完全不可取的。

    例如对于一些元素的隐藏,如果没提供相关的类名的话,在js开发阶段开发就会直接内联style在对应的元素上(这将会触发 repaint/reflow),所以更好的方式是和js开发约定一个类名触发显示、隐藏的动作,在这种情况下,给 display: none 划分一个特定的类名,供给开发调用就会显得很实用了。

    所以,更重要的是我们对所在的实际情况进行分析,并给出最佳的解决方案。

    3、组件类名组合方式

    以马海祥博客现有的资料了解到组件的样式,基本都是基础类名+扩展类名的套路来进行组合的变化。

    但在选择符方面可以有3种方式,目前最多框架使用的是:多类选择,通过修改html的类名组合,实现还原。

    以按钮样式的实现为例,如下图所示:

    资深Web前端开发工程师教你如何优化CSS框架-马海祥博客

    这里采用的都是常规的组合方式,在此我就不再一一赘述。

    4、高级CSS选择器

    在对Bootstrap进行分析的过程中,发现Bootstrap定义了一系列的icon,这些icon的类名全部都是以icon-为前缀。

    而在CSS中,Bootstrap用到了子串匹配属性选择器。

    [class^="icon-"]

    马海祥觉得使用这个的好处是,对于icon类的标签,我们再也不需要对其加一个对于icon的公用类名,只需要类名是以icon-开头就可以匹配所有icon ,省了一个类名。

    使用这种方式可以降低一定的成本,但是只在IE7+浏览器才适用,如果要使用该类选择器的话请考虑是否需要兼容IE6。

    虽然IE6不支持,但是高级CSS选择器的确十分吸引,并且可用于移动端,所以在马海祥博客上特此提一下。

    四、CSS框架的图形

    资深Web前端开发工程师教你如何优化CSS框架-马海祥博客

    在参考的CSS框架中,它们会提供一些简单的图形元素, 但是实现的方式也有彼此不同之处。

    但是共同点是,现今较新的框架,对于一些简单的效果,都会使用CSS3实现一些简单的渐变,对低版本IE进行优雅降级。

    五、CSS框架的应用方式

    在参考实例是怎样使用这些框架的方式上,基本和我们平时项目使用方式一致。

    在应用方式上,一般有两种方式。

    1、对于以组件为粒度的样式:

    按照组件的html结构来拼合自己的页面???,再辅助添加自定义的类名来控制其个性化定义。

    2、对于以属性为粒度的样式:

    按所需要的样式对应类名进行拼接。

    下面可以看几个简单的例子:

    (1)、以组件为粒度:

    对于组件的覆盖,采取常规的自定义类名覆盖样式,此处就不再一一赘述了,具体信息可通过马海祥博客其它文章来了解。

    (2)、以属性为粒度:

    资深Web前端开发工程师教你如何优化CSS框架-马海祥博客

    由上图可以看出,若需要样式是属性以粒度,即把对应类名调入即可,但是在实际项目中,这种方式由于灵活度不够,并且没有做到结构与样式分离,实际项目中比较少见这种用法。

    而对于功能性的动作,例如显示、隐藏元素,可以灵活使用这种方式,把所需样式写到一个特定类名中供给js调用,避免直接写入style导致reflow/repaint。

    六、如何优化CSS框架结构

    1、对于目录组织

    目录组织——可以考虑结合Bootstrap与Yaml/Blueprint的思想。

    (1)、把常用的基础样式压缩合成一个文件。

    (2)、把不必现组件样式抽离成单独 CSS,按需加载。

    【优化点】:减少了单个global_min文件的大小。

    【权衡点】:需要考虑由此可能导致的请求数过多问题。

    hack——根据实际情况,可考虑把针对IE6的hack文件单独分出来。

    【优化点】:便于对低级浏览器的大型差异化处理,并且减少对于高级浏览器的冗余代码。

    2、对于CSS规范:

    CSS前缀——可考虑尝试Nec的方式,约定“单字母_xxx”为公用样式的标识,取消单一的公用前缀,通过以不同字母作为顶级前缀,对公用??榻谢?。

    【优化点】:减免了“公用前缀_组件前缀_组件名”的多级前缀,通过以类名格式作为标识,代替了原来公用前缀的作用。

    【权衡点】:仍需按项目实际情况考虑。

    类的划分——可考虑约定统一几个功能性的类名(以属性为粒度的类名),例如元素隐藏的类名,供给js调用。

    【优化点】:减免让开发直接写 style 内联 CSS,造成页面的 reflow/repaint。

    高级 CSS 选择器——在对移动端页面进行重构时可以考虑使用更高级的 CSS 选择器。

    例:[class^=”icon”],:first-child,:nth-child(n)….

    【优化点】:相比于传统的方法,节省类名。

    3、对于图形:

    考虑与设计师约定,视觉效果在可接受范围内,部分效果使用CSS3实现,对低级浏览器实现优雅降级。

    【优化点】:大量减少图片的使用,节省带宽以及请求数。

    马海祥博客点评:

    随着新技术的不断涌现,越来越多优秀的CSS框架呈现在我们的眼前,对于前端开发工程师来说,我们不但要学会这些新技术的应用,更要从这些新技术中提取精华,进行细节优化,才是促使我们永远走在行业的最前沿。

    本文为山西十一选五遗漏号原创文章,如想转载,请注明原文网址摘自于//www.6am8.com/css/393.html,注明出处;否则,禁止转载;谢谢配合!

    相关热词搜索: Web前端开发 Web前端 Web工程师 CSS框架 前端工程师

    上一篇:CSS常用代码使用技巧大全
    下一篇:CSS无图片技术的实现方法有哪些?

    今日话题更多>

    SEO研究院 更多 >>

  • 新媒体会馆第十三期:自然灾害时期的网络谣言应对与正向传播研讨会 2019-06-14
  • 出境游代购?先了解海关税那些事 2019-06-14
  • 银保监会:4家险企偿付能力不达标 2019-06-12
  • 机场周边严查违规网约车 2019-06-10
  • 香港航空得罪赌王儿子 社交媒体究竟该在舆情管理中扮演什么角色? 2019-05-29
  • 科学家教人工智能诊断脑癌 2019-05-29
  • 晋世绘——黄河新闻网 2019-05-06
  • 什么是阶级?阶级是不同经济地位和政治地位所构成的等级差别(原创首发) 2019-05-04
  • 看改革开放40年:交通篇——从双腿丈量到抬脚上车 2019-05-02
  • 2018陕西高考数学试题分析:注重基础知识 突出思维能力 2019-05-02
  • 海淀5家企业获第四届中关村质量管理奖 2019-04-27
  • 人民日报评论员:和世界共发展 与世界同分享 2019-04-03
  • 江西:建立高校统战工作重点目标管理考核机制 2019-04-03
  • 解决争端根本办法是建立机制 而不是利用社会舆论取得某种优势(原创首发) 2019-03-28
  • 陕西国资经营公司来访省国资运营公司 2019-03-28
  • 15选5开奖结果 北京11选5价格是多少钱 河南快3综合走势图 快乐时时彩是全国开奖 蓝月亮单双中特 内蒙古十一选五走势图 北单奖金计算器500彩票 超级大乐透开奖结果 买彩票最官方的地方 广东彩票36选7走势图 北京时时彩现场开奖直播 ag真人 香港赛马会透码公司 新疆25选7开奖公告 香港六合彩现场开奖006677