OOCSS

OOCSS vs. OOSCSS

在这篇文章中我主要想给大家阐述在使用Sass来编写CSS和OOCSS两者之间的差异。在开始之前,我想在大家对定义语义化和演示(视觉)类名之间的差异有所了解。

OOCSS: Media & Flag Object

这一切都始于媒体对象(Media Object)。其实就是Nicole写的一个CSS代码片段,这个代码片段是常用来阐述OOCSS的最佳示例。这篇文章能让你对媒体对象更佳的熟悉与了解,如果对媒体对象一点都不了解,建议你先点击这里了解一二

CSS分层

随着CSS的发展,使用CSS有语义化的命名约定和CSS层的分离,将有助于它的可扩展性,性能的提高和代码的组织管理。在我前面的文章中讨论很多关于CSS的问题都可以通过使用一个适当的CSS策略来避免。在这篇文章里,我将着重于讨论使用一种方法或者一个命名规则所带来的好处。这里有很多可供使用的前端方法和命名规则,每个都有自己的优缺点。在几乎所有的案例中CSS被分割成更易于管理的代码“块”。CSS的这种分割方式定义了每一种方法。

CSS, Sass, SCSS, Compass, Less,BEM, SMACSS, OOCSS, ACSS, CCSS, WTFSS?

大家都说CSS学和写都简单,那么写了多年CSS的同学是否有静下来思考过,自己写CSS是有较为系统的和具有一定规范的,而不是草率的写CSS。另外就是自己写的CSS在团队中,别的同学是否能看到代码就知道您写的是什么?如果没有,那不仿看看这里提到的一些概念与思想,比如:Sass 、SCSS、LESS、BEM、SMACSS、OOCSS、ACSS和CCSS等。这里列出的,你听说过、了解过或已在运用的有几个。如果是第一次听说他们,不仿进入相关小节,了解他们是什么?

使用Sass来写OOCSS

自从2008年Nicole Sullivan提出Object-Oriented CSS(OOCSS)以来。它就成为一个领先的模块系统,用来组织你的CSS代码方式之一。

OOCSS不同于其他组织CSS代码方法,比如SMACSS或者BEM。通过将CSS代码和结构分离让你的模块可重用。事实上,我也通常将SMACSS与OOCSS混为一谈。其实John W. LongThe Sass Way上面写了很多篇有关于CSS模块化的教程

崇拜CSS

公认的拥有一个编写和管理CSS的方法比什么都要更好。尽管如此,一些开发人员的实践是不利于语义化质量和长期的可维护性。我们要讨论一些被提倡的"CSS框架方法”的问题和作为Web开发人员,我们如何可以更好的解决这些问题。今天最流行的CSS开发框架技术当属OOCSS,尽管还有其他类似的技术存在,如BEM。这些方法试图对CSS采用面向对象的编程原则。尽管样式语言和面向对象的软件设计原则在概念之间存在一定的问题,这些微妙的东西对于一个欠缺经验的开发人员来说可能不会立即显现出来。最令人不安的是,这些方法已经可以广泛的看到博客给其冠以"最佳实践"的评价。“abscence”的证据来阐述使用这些方法的好处——选择高流量网站只是一小部分——这反应了我的观点,他们代表了一种误导和盲目的崇拜

写CSS最好方法:OOCSS+Sass

OOCSS非常棒。但在HTML标签中有很多不具语义化的类名也并不可怕。而在HTML标签上的类名会改变就是一件很有趣的事情。如果你把OOCSS和Sass结合在一起,你会得到两个优势:CSS模块不臃肿和HTML维持不变。

OOCSS+Sass

Krasimir Tsonev在《Starting to Write CSS》(中文版本,请点击这里)让你领略了CSS其实也是有思想的,也很有意思的。虽然介绍的各种思想都很强大,但始终没有离开CSS的层面,而CSS却又是非常的脆弱。那么有没有办法,能否结合文中多个思想在一起。你思考过吗?如果你还没有思考并不要紧,今天我们一起跟随Takeshi Takatsudo写的PPT来领略一下OOCSS与Sass的结合。

在这篇文章,主要以两个按钮的制作,来探讨OOCSS的思想以及如何结合Sass更完美的实现。或者说,通过按钮的制作,一起探讨在Sass中如何使用OOCSS的思想。希望大家喜欢。

开始编写CSS

你是否还在觉得CSS很简单,你是否还在学得CSSer不是程序员?如果你阅读了这篇文章,你就会觉得CSS不在简单,CSSer也不在是一个页面仔,他也可以算程序员。因为今天的CSS不在是昨天那样的CSS,他引进了很多设计思想,比如CSS预处理器、CSS对像(OOCSS)、SMACSS、Atomic设计和OrganicCSS等,你是不是从来没有听过这些名词,如果是那么我们一起跟随的《Starting to Write CSS》来做一个短暂的旅行,让我们重新认识一回CSS,让你知道CSSer也是非常有价值的,有思想的。

CSS团队精神:CSS最佳实践团队开发

你有过多少次接手别人开发过的项目,却发现作者的代码思路一团糟吗?或是你跟几个团队成员合作开发,他们每个人都有自己书写代码的方式吗?或是你重新回顾你多年前开发的项目,不记得当初是怎么想的?

我总是遇到这种事情。事实上,我最近在修复供应商提供facepalm-inducing的css上花费了将近300个小时。这300个小时,使我充满了挫败感,不仅是因为我自己,还有我的团队成员的原因。而且他占用了本应该花费在新项目上的宝贵时间和资源

如果供应商在他的css中已经遵循了一些基本的指导方针。那么将会为他节省宝贵的时间和金钱,更不用说我会已更好的状态去对待他。在本文中,你将学习书写CSS的最佳实践来帮助你避免不一致和冗余;实际上,这样制定标准,简化了团队开发的工作。

页面

返回顶部