基于OOCSS与NEC方案开发Web前端研究.pdfVIP

… … … … … … … … ’ ’ ’ ‘… … 。 ’ … 实用第一／智慧密集 … 基于OOCSS与NEC方案开发Web前端研究 李艺志。陈员义 (江西师范高等专科学校数学与信息技术学院，江西 鹰潭335000) 摘 要：详细介绍了面向对象的CSS基本概念：类及实例、封装、继承，在实践中OOCSS推荐做法。同时，结合 OOCSS阐述网易NECCSS框架的技术要点，详细探讨Web前端工程师在把Web效果设计图转换成 HTML5+CSS3 Web前端过程中，采用网易NECCSS框架和 OOCSS，使得构建的Web前端HTML标签更加语义化，加强了代码的 可重用性、提升了渲染效率、增强了网站一致性，并且减少CSS代码体积及缩短开发周期。并使现有的CSS代码易 维护等特点。 关键词：面向对象；OOCSS原则；页面；Web前端；封装；继承；NEC方案；框架 1 引言 ． box—sale{font—size：14p×；fIoat：left：) 对于一名优秀的Web前端工程师，如何在众多的Web前 divclass=“boxbox—sale”…／div 端框架中选择到适合自己的框架 ，不但要在实践中不断总结， 2．2 OOCSS的原则 而且一定要尽量理解每一种框架的理念及精髓。同时，要与 引用 OOCSS之父 NicoleSullivan话来说 ， 面向对象的 CSS有两个原则：： 时俱进不断更新理念。 (1)结构和皮肤相分离。这个规则就是将结构和皮肤分 2 面向对象的CSS 别交给两个 class来控制。如下代码： 2．1 基本理念 divclass=b“oxs-fc 任何基于面向对象思想书写代码方式，其 目标是尽一切可 能提高代码的可复用性。OOCSS也是一样，讲究复用，并最终 bclass=”f—tl“／b 可以更快更高效地书写样式，不但可以减小CSS体积、提升渲 染效率、增强网站一致性 ，而且方便 日后的添加和维护。 ／div 在书写 CSS代码时借鉴 OOP思想，但不要把OOCSS和 其中类．box主要处理用于展现 目的的小元素 (OOCSS中 OOP的特性做一对一的绝对比较。先简单、扼要地介绍 OOC— 的b标签)的位置、浏览器bug和所有比较复杂的问题 。而 ss中要使用面向对象的一些概念。 类．s—fc主要处理 比较简单 的问题 。如 color、border、back． (1)类与实例：类与对象将页面可重用元素抽象成一个 ground—image等等。 类．用class加以描述，而与其对应的HTML则可看成是此类 (2)容器和内容相分离，即解除容器和内容之间的依赖 的一个实例。如下代码：