CSS教程之面向对象的CSS:OOCSS

2016-02-20 00:04 8 1 收藏

有一种朋友不在生活里,却在生命力;有一种陪伴不在身边,却在心间。图老师即在大家的生活中又在身边。这么贴心的服务你感受到了吗?话不多说下面就和大家分享CSS教程之面向对象的CSS:OOCSS吧。

【 tulaoshi.com - Web开发 】

你如何为成千上万的用户和页面提供CSS? 这是Nicole Sullivan在她的在丹佛的Web Directions North 大会上的幻灯片中尝试回答的问题。得益于面向对象的CSS (OOCSS),这个想法从社区收集到了大量的反馈。

OOCSS显然已经不仅仅是一个工具了,它还是一种思考的方式。根据这个观念可以有很多优势,主要来说有:

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)它可以让你写更快的、可维护的、基于标准的前端代码。 它在CSS中预先加入了一些必须的元素,这样即便是初学者也可以参与写出漂亮的网站。

OOCSS 基于两个主要原理:

分离结构和表现; 分离容器和内容。

建议花些时间看一看面向对象的CSS的幻灯。总共有64页,绝对值得一看。

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

Object Oriented CSSView more documents from Nicole Sullivan.

PS:神飞之前就有考虑将此幻灯翻译成中文,但是作者不允许下载,所以大家就将就着看吧先,另外考虑翻译一些相关的文章来更多的解释OOCSS。

PS2,貌似国内也有个人做了一个OOCSS,意思也是面向对象的CSS,不过和这个不是同一个。

来源:http://www.tulaoshi.com/n/20160220/1631201.html

延伸阅读
标签: Web开发
CSS组合 你不必重复有相同属性的多个选择符,你只要用英文逗号(,)隔开选择符就可以了。 比如,你有如下的代码: h2 { color: red; } .22333 { color: red; } .22333com { color: red; } 则你可以这样写: h2,.22333,.22333com { color: red; } 使用组合,你可以一次定义多个CSS,为你节省很多字节和时间。 CSS嵌套 ...
标签: Web开发
让你的样式完美兼容各大浏览器,这个方案主要是用来解决Safari的,Opear是在测试的时候顺带试了一下,结果发现竟然也行,所以顺便也解决了。 .e {/*FF OP*/ background-color: #FF0000 } html* .e{/*Sa IE7 OP*/ background-color:#FF00FF } *+html .e{ background-color:#000000;/*OP*/ *background-color:#0000FF;/*IE7*/ } * html...
标签: Web开发
     样式表的建立要符合CSS规则,它们一般被定义成以下形式的句法: HTML标志{标志属性:属性值;标志属性:属性值;标志属性:属性值;标志属性:属性值;...} 下面我们分别讲述: .HTML标志:在上一节我们已简要地介绍了一下,有点需要注意的是,这些标志不带尖括号,如P,Div、Table等而不是P、Div以及Table...
标签: Web开发
Cascading Style Sheets: The Definitive Guide, 2nd Edition is a thorough review of all aspects of CSS2.1 and a comprehensive guide to CSS implementation. The book includes new content on positioning, lists and generated content, table layout, user interface, paged media, and more. It explores in detail each individ...
经常听见别人说面向对象的程序设计,以前在学校上课的时候,也有开面向对象程序设计这门课。可是不幸的是,这些都是以C++,甚至VC++为基础的。而更加不幸的是,多年以来我一直是一个C的使用者。在学校的时候,我主要做的是硬件上的驱动层,和底层功能层。 !-- frame contents -- !-- /frame contents -- 在工作以后,又做的是手...

经验教程

937

收藏

90
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部