Comments on: OOCSS + SASS = Fewer Classes On Your Elements

By: Jurij Burkanov

Jurij Burkanov — Thu, 28 Jul 2011 14:38:09 +0000

Hi. Somehow I’ve missed all the OOCSS story, so I developed a parallel philosophy – for my project. My way is simular to OOCSS, but not exactly. I also divide structure from elements (to be able to position blocks on pages independly). The thing is, that I use “namespaces” – they are just a chain of class names in BODY, representing navigational path, just to be able to speak to the .element_x on one page different, than to the same .element_x on the other page. I pack namespaces into variables and use in SASS like that:

in my _variables.sass partial I write:
$picturesTemplate: “.bigproject.our_products.product_x.product_x_pictures”

in my partial _picturesHeader.sass, that describes this particular element:
body
&#{$picturesTemplate}
.element_x

Doing so you can have both “library” for typical .element_x styles as well as be able to write alteration easily. If I have to differenciate between many nearly–the-same elements on one page (what is very rarely), I can alway simply put one more level to the selector and use descending selection. Or, if the elements are too different, just handle them as different elements and give them different names.

Sorry for the grammar – English is not my strength :)

By: Michael Howell

Michael Howell — Thu, 30 Jun 2011 00:23:03 +0000

Stupid WordPress stripping my HTML.

I wanted the first one to have:

…

And the second to have:

…

By: Michael Howell

Michael Howell — Thu, 30 Jun 2011 00:20:46 +0000

How about reversing the diagram? Instead of having subclasses “inheriting” the base class, having the base class “willing” the styles to the subclass?

For example, instead of this CSS and HTML:
.media { … }
.comment { … }
…
…

Have this?:
.media, .comment, .menuitem { … }
.comment { … }
…
…

By: Dale Sande

Dale Sande — Mon, 11 Apr 2011 18:54:51 +0000

Semantic CSS and OOCSS, dogmatically, will never live together in harmony. It is clearly one or the other. Following the OOCSS model you will quickly start creating a library of non-semantic css ‘widgets’ that you apply to your markup.

Being a preacher of building a project styleguide, I was OOCSS before OOCSS was a thing. But now becoming a more experienced Ruby developer, I am coming to the same conclusions as you are with the coupling of OOCSS and SASS. In fact, I can’t see any other way of doing it.

A great example. I am working on a project where I have aside bubbles for additional information. Going with OOCSS I would need to have a class of something like “more_information” appended to both to cover the simular UI cases. Then to adjust for the delta between the two, I then would add the class of ‘call_to_action’ and ‘white_papers’.

But using SASS, I can simply use the single semantic class and then using the similar UI as a mixin within SASS, I can reuse that style without copying and pasting.

So in essence, I guess what we are saying here is in principal the same thing, build re-useable elements within your CSS and have a way to easily re-use that code.

I guess you could say, OOSASS?

By: hugh

hugh — Sun, 20 Mar 2011 13:10:53 +0000

Perhaps it’s no coincidence that semantic and pedantic rhyme. Yes, it is a good idea to name classes where possible in a way that describes their content and role. But semantic markup is surely trumped by efficient CSS… A little more markup can mean much, much less CSS.

Faster development time and faster download times are prizes that are worth having at the expense of pedantic markup and if somebody says it’s not semantic, I think the correct response is to shrug the shoulders.

By: Lance Otis

Lance Otis — Tue, 15 Mar 2011 06:40:49 +0000

Extend a class? The approach suggested in OOCSS is to change the (HTML) markup.
The downside: changing every html page every time you want to extend the class differently. ???

By: OOCSS: Reutilizando al máximo los CSS @ hdennison.com : Blog profesional de Harold Dennison

Sat, 11 Sep 2010 22:05:59 +0000

[...] que no soy el único con esta mentalidad, y se pueden encontrar por ahí algunos apuntes sobre como combinar OOCSS con SASS y técnicas similares para poder minimizar este “problema”, pero aún no me he puesto a [...]

By: bburcham

bburcham — Wed, 12 Aug 2009 20:02:42 +0000

I like Blueprint a lot Sam. As for Compass, I've been leaning away from it (yet another language). Instead I'm using good old ERB templates to gain dynamism in my stylesheets. See Dynamic CSS Goop.

By: Sam

Sam — Wed, 12 Aug 2009 08:46:16 +0000

Whilst I really like some of the concepts introduced by OOCSS, I shared your reservations about using so many classes in the markup. We’re currently using the Compass interpretation of Blueprint on a new project and I find it extremely helpful – although the initial learning curve can be difficult, as the extra layers of abstraction means you have to approach debugging somewhat differently.

By: Clay McIlrath

Clay McIlrath — Mon, 29 Jun 2009 18:32:48 +0000

Semantics and OOCSS will never mix. OOCSS definitely has some great advantages and I already apply some of these concepts already to extend classes.

ex: .sidebar { … } .sidebar.left { float: left; }

But as you can see from my example here, I am mixing two conflicting concepts. Semantics say i should define all my styles related to sidebar WITHIN sidebar, but OOCSS says i should make my classes extend by using multiple classes.

So where’s the middle ground? A little bit of everything. Too much OOCSS and you’ll quickly be infected with classitis.. too much semantics and you’ll quickly have 30k of styles.

In my opinion, put semantics FIRST and keep it flexible with extended classes especially with floating and widths.