目前最流行的CSS开发框架技术当属OOCSS,尽管还有其他类似技术(如BEM)。这些方法试图对CSS采用面向对象的编程原则。样式语言与面向对象的设计原则在概念之间存在一定的问题。欠缺经验的人员可能不会注意到这些微妙的东西。拥有一个编写和管理CSS的方法比什么都要更好。一些开发实践不利于语义化质量和长期的可维护性。讨论一些被提倡的“CSS框架方法”问题。如何更好的解决这些问题。

语义化在计算机科学中只有两硬东西,缓存失效和命名的事件。

当编写HTML,有三种主要的方式表达内容、Web界面或应用程序的语义化:内容使用的元素类型制作的模板;使用ID用来识别一个独特的,单个元素;用类名来分类一组元素。

最重要的是让前端开发人员通过一个CSS框架技术来解决一个网站中重复的CSS代码是首要的事情。

(1)<div class="box-standard box-special"> Here is a special box! </div> 通过这种方式在模板中添加两个类名用来减少重复的代码是可取的,同时这两个类名也传达了特定的语义.

这里开发人员真正需要一个“混合”和"扩展",这些在各种CSS预处理器中都有,比如LESS或者Sass.

个关于mixin在Scss语法中的简单示例: px; , ; } div.news { @include news-item(blue); } div.breaking { @include news-item(red); font-weight: bold; } class="breaking"> Here is a breaking news item! </div>

改变mixin的样式风格总是通过div.breaking来实现,并且尽可能的与模板不耦合在一起。在CSS中能够定义mixin就是他一直以来 想要的特性(这功能最终在预处理器中实现。),如果你想成为一个专业的CSS开发人员,你没有什么好理由不使用CSS预处理程序。

在一味的追求“模块化”。这样避免在CSS中有重复的代码,不过转移到模板中,导致的副作用就是模板和样式的紧耦合性。

(2)另一个目标是提供高性能。这取决天很多因素,如客户端访问一个网页的类型,他们的连接速度和内容是否有被缓存,还有其他一些因素等等。在最基本的级别上有三种东西最明显的影响CSS性能:(所需的HTTP请求数 缓存状态 文档大小).

前两个考虑的范围可以采用CSS框架方法,而第三个是通过类名来解决重用:其目的是,通过声明尽可能少的样式越少,CSS文件就越可能的小。

CSS开发框架技术OOCSS编写和管理CSS的方法的更多相关文章

  1. CSS Hack技术详解,支持IE 6-11、Chrome、FireFox、Safari、Opera 6-11、Chrome、FireFox、Safari、Opera6-11、Chrome、FireFox、Safari、Opera6-11、Chrome、FireFox、Safari、Opera

    转自: http://www.365mini.com/page/css-hack-ie-chrome-firefox-safari-opera.htm 当前网络时代,各种各样的网页向我们展示着丰富多彩 ...

  2. 如何提升我的HTML&CSS技术,编写有结构的代码

    前言 之前写了四篇HTML和CSS的知识点,也相当于是一个知识点汇总.有需要的可以收藏,平时开发过程中应该会遇到这些点,到时候再查看这些博客可能更容易理解.从这篇开始更多的介绍开发过程经常让人头痛的前 ...

  3. Animo.js :一款管理 CSS 动画的强大的小工具

    Animo.js 是一个功能强大的小工具,用于管理 CSS 动画.它的特色功能包括像堆栈动画,创建跨浏览器的模糊,设置动画完成的回调等等.Animo 还包括惊人的 animate.css,为您提供了近 ...

  4. 如何写好CSS?(OOCSS\DRY\SMACSS)

    我现在面对的CSS基本上就是一个三头六臂的怪物,一点不夸张,因为真的是三头六臂,同一个样式在同一个element上作用了好几遍,而同一个样式又分散在4,5个class上,优先级有很多层.可以看得出这个 ...

  5. Web前端技术研究:Css hack技术---令人沮丧的技术

    我最近想好好整理下csshack技术,但是结果很沮丧,下面我将我最初写的笔记和大家分享下. 我在单位整理的研究笔记: 不同的浏览器对某些CSS代码解析会存在一定的差异,因此就会导致不同浏览器下给用户展 ...

  6. 利用CSS预处理技术实现项目换肤功能(less css + asp.net mvc4.0 bundle)

    一.背景 在越来越重视用户体验的今天,换肤功能也慢慢被重视起来.一个web系统用户可以选择一个自己喜欢的系统主题,在用户眼里还是会多少加点分的.我们很开心的是easyui v1.3.4有自带defau ...

  7. 6种编写HTML和CSS的最有效的方法

    感谢HTML5和CSS3,以及JavaScript,前端开发者有了大大的用武之地.大家都在用很多的工具和技术来武装自己,以加快前段的开发. 本文分享了6中最有效的方法,希望能提供你的效率,为你节约时间 ...

  8. 好程序员web前端分享值得参考的css理论:OOCSS、SMACSS与BEM

    好程序员web前端分享值得参考的css理论:OOCSS.SMACSS与BEM 最近在The Sass Way里看到了Modular CSS typography一文,发现文章在开头部分就提到了OOCS ...

  9. 用DIV+CSS切割多背景合并图片 CSS Sprites 技术

    很久之前就在互联网网站和一些js插件中见过这种技术的应用,当时觉得很麻烦,就没有用,也没有去深究. 近段时间一直在做前台的一些东西,涉及到很多div+css的问题.这个东东我又碰到了,所以我花了点时间 ...

随机推荐

  1. 解决https证书验证不通过的问题

    1.报错信息 java.security.cert.CertificateException: No name matching api.weibo.com found; nested excepti ...

  2. gulp自动化压缩合并、加版本号解决方案

    虽然网上有很多的 gulp 构建文章,但是很多都已经随着 gulp 插件的更新无法运行了.因此,我写了这个比较简单的构建方案. 如果还不熟悉 gulp 的插件,可以阅读上一篇文章:精通gulp常用插件 ...

  3. Laptop Ubuntu16.04/14.04 安装Nvidia显卡驱动

    笔记本型号 机械革命(MECHREVO)深海泰坦X6Ti-S(黑曜金)15.6英寸 CPU型号 i5-7300HQ 内存 8G 硬盘容量 128SSD+1T机械硬盘 显卡 GeForce GTX 10 ...

  4. ThinkPhp框架的数据库操作(查询)

    TP框架有一套自己的数据库操作的代码,包括数据库的增.删.改.查.本文主要讲解TP框架的数据库查询操作. 找到入口文件的控制器: 我这里的入口文件是Show文件夹下的控制器. 打开Login控制器. ...

  5. Servlet中过滤器的执行流程

  6. 学习一点Markdown的基本知识

    本文于2017年3月18日首发于LinkedIn,请参考链接 这个世界的进步是由一些"懒"的人推动的.今天讲的这个Markdown,其实也是因为一批厌倦了HTML的各种标签的语法, ...

  7. mysql新建数据库时的collation选择(转)

    转自别处的文章.末尾附原文链接 mysql的collation大致的意思就是字符序.首先字符本来是不分大小的,那么对字符的>, = , < 操作就需要有个字符序的规则.collation做 ...

  8. ps-抠图

    1-    图层区—复制背景图层            防止原图修改失败后无法还原 2-    工具栏——磁性套索工具                    可以有效的对色彩边线较为明显的图片进行抠图 ...

  9. 菜鸟Scrum敏捷实践系列(一)用户故事概念

    菜鸟Scrum敏捷实践系列索引 菜鸟Scrum敏捷实践系列(一)用户故事概念 菜鸟Scrum敏捷实践系列(二)用户故事验收 菜鸟Scrum敏捷实践系列(三)用户故事的组织---功能架构的规划 敏捷开发 ...

  10. android使用TextView实现跑马灯的效果(1)

    android使用TextView实现跑马灯的效果 1.activity_main.xml <?xml version="1.0" encoding="utf-8& ...