目前最流行的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. 在Signalr的Hub中写方法实现与安卓的数据交互

    简介: 实现数据实时刷新:SignalR 后台服务:.NET/WebAPI 为了减轻web的压力,将接口中接收数据的方法写到SignalR的Hub中 在此放一小段代码给自己加深下印象,博主有点健忘.. ...

  2. c++文件读取(一)---输入类使用和查找当前程序路径

    鉴于公司人员流动大,设计一个小的日志定位器,首先要读取日志文件 用输入输出流类操作文件比c的stdio更安全和容易,当然任何此类观点都是对大牛除外 首先是查找当前文件路径,如果用GetCurrentD ...

  3. 关于label和input对齐的那些事

    input文本和label对齐 默认状态下,也就是下面这样, 文字和input是居中的. <div> <label>我是中国人</label> <input ...

  4. 网络安全实验室 注入关通关writeup

    URL:http://hackinglab.cn 注入关  [1] 最简单的SQL注入username = admin' or ''='password随便什么都可以直接可以登录 [2] 熟悉注入环境 ...

  5. 每天一个Linux命令 3

    Linux grep命令详解: grep(global search regular expression(RE) and print out the line,全面搜索正则表达式并把行打印出来)是一 ...

  6. springMVC中文乱码问题解决

    1:表单提交controller获得中文参数后乱码解决方案 注意:  jsp页面编码设置为UTF-8 form表单提交方式为必须为post,get方式下面spring编码过滤器不起效果 <%@  ...

  7. 去掉标题栏的方法(使用requestWindowFeature(Window.FEATURE_NO_TITLE);为什么失效)

    使用requestWindowFeature(Window.FEATURE_NO_TITLE)隐藏标题栏失效的原因,可能是activity继承的是AppCompatActivity.下面详细介绍了使用 ...

  8. JavaWeb之Servlet总结

    今天上班居然迟到了,昨天失眠了,看完吐槽大会实在不知道做些什么,刚好朋友给我发了两个JavaWeb的练习项目,自己就又研究了下,三四点才睡,可能周日白天睡的太多了,早上醒来已经九点多了,立马刷牙洗脸头 ...

  9. (23)IO之打印流 PrintStream & Printwriter

    PrintStream PrintStream可以接受文件和其他字节输出流,所以打印流是对普通字节输出流的增强,其中定义了很多的重载的print()和println(),方便输出各种类型的数据. Pr ...

  10. 适用MySQL Migration Toolkit 1.0 将oracle迁移到mysql中遇到的问题

    这里主要说一下我在适用中碰到的问题,主要过程参考 http://www.cnblogs.com/duwenlei/p/3520759.html. 首先启动MySQLMigrationTool.exe ...