Object Oriented CSS

https://github.com/stubbornella/oocss/wiki

by michaelfairley • 15 years ago

45 25 15 years ago

ghempton• 15 years ago

Would be really nice to see some actual code right up front. It's hard to grok exactly what this is right off the bat.

torme2• 15 years ago

Im curious as to how this works, but there doesnt seem to be any code examples and the download link seems non-existent. Can someone explain how this is used?

Edit: Scratch that, the download seems to be working now, and it contains some better documentation.

Groxx4• 15 years ago

Demo: http://waltschmidt.com/v2/

Link is available on the FAQ wiki page - it should really be on the readme.

edit: I don't think I like it... some details as to why:

  grid.css
  .line:after, .lastUnit:after {
    clear: both;
    content: " x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x ";
    display: block;
    font-size: xx-large;
    height: 0 !important;
    line-height: 0;
    overflow: hidden;
    visibility: hidden;
  }

Anyone care to explain that one? Disabling it causes some sections of the page to overlap.

  grid.css
  .size1of1 {float: none;}
  .size1of2 {width: 50%;}
  .size1of3 {width: 33.3333%;}
  ... etc
  
  content.css
  .f105 {font-size: 105%;}
  .p0 {padding: 0;}
  .p15 {padding: 15px;}
  .pt0 {padding-top: 0;}
  .pt25 {padding-top: 25px;}
  .pl0 {padding-left: 0;}
  .pl15 {padding-left: 15px;}
  ... etc

They've achieved "object oriented" by moving the styles from the CSS to the class attribute. ie, you might as well write `style="padding:0"`, it's the same thing. No doubt HTML-veterans who never really got the whole CSS thing would like it, it's very nearly equivalent to using tables for layout, but with floats instead of <td>s.

That said, I have not used it, or any similar CSS frameworks. Anyone who has care to comment on usability / reusability?

ceslami• 15 years ago

This would undoubtedly have a negative impact on performance, no?

Groxx4• 15 years ago

I don't know... few classes in the CSS but tons of classes in the attributes vs tons of classes in the CSS but few classes in the attributes. I somewhat doubt it minimizes layout calculation much, many styles are still being applied to many DOM nodes. Memory for those classes, maybe, but I doubt lookup costs very much compared to other parts of rendering a page.

Though I would be interested in seeing some profiling data demonstrating one way or the other. Even if it's relatively transient data, as it relies heavily on the rendering code.

torme2• 15 years ago

She has a blog post explaining the x's here:

http://www.stubbornella.org/content/2010/12/09/the-hacktasti...

Edit: I also agree with your sentiment. This seems to move away from what CSS classes are intended for, and gives things naming conventions that are tied directly to their internal CSS code instead of to their semantic meaning on the page. That said, I haven't used it either, so maybe it's way better this way, but something doesn't sit right with me.

michaelfairley• 15 years ago

I think the point is that structure and style should be decoupled, i.e. the way something looks (color, fonts, borders, etc.) should be defined separately from the way something is shaped.

Groxx4• 15 years ago

I entirely agree they should be decoupled; so why are they being combined by having you write what's essentially inline CSS in your HTML? I thought the point of CSS was to do away with that, because of how inflexible it was, and to move to a more declarative setup.

toolate• 15 years ago

If this is object oriented then his approach can best be likened to multiple inheritance. Because CSS doesn't offer any kind of native inheritence he's forced to redefine each and every class for each instance. This is the equivalent of defining code like:

    var foo = new Animal Brown Quadruped Barking();

Even if styles could be inherited, this seems to be taking the wrong approach. Most of use realise that classes should be used to denote identity, and not behaviour (or in this case, styling). CSS preprocessors seem to fix the same problem in a much nicer way.

    /* Define classes used in HTML */
    .sidebar {
      @include bordered-box;
    }

    #special-offer {
      @include bordered-box;
      position: absolute;
      top: 0;
      right: 0;  
    }
     
    /* Define theme information */
    @mixin bordered-box {
      h3 {
        background: red;
        color: white;
      }
      border: 1px solid red;
    }

Groxx4• 15 years ago

That multiple-inheritance comparison as you showed it is just about perfect, thanks! And yes, preprocessors make a ridiculous amount of sense. That mixins and variables aren't part of CSS seems almost like an oversight.

At least there's Less. Anyone use it, or know of a better system?

sayemm• 15 years ago

Good book to check out on this is "Pro CSS and HTML Design Patterns" - http://www.amazon.com/Pro-CSS-HTML-Design-Patterns/dp/159059...

The author uses OO-based css examples all throughout the book, it was my first time reading about it and thought it was pretty cool. You could read through the descriptions on Amazon to get the general idea.

Silhouette• 15 years ago

There are few things in the software development world that are more annoying than buzzwords.

One of them is people who completely misuse buzzwords in an attempt to seem more relevant/knowledgeable/important than they really are.

It is not often that I wish I could actively downvote an article on HN, but today I do.

DTrejo• 15 years ago

CSS is aspect-oriented!

[1] http://plpatterns.com/post/482063133/every-time-you-use-css-...

cloudhead• 15 years ago

It gets to me too. It's what happens when a non-programmer uses programming terminology to describe something. The goal is to confuse us, and make us think "what am I missing here?".

howardr• 15 years ago

I do agree with the buzzword comment, but her pattern, however it is named, is a good one. We have been using at uShip.com for about 20 months.

It is also worth noting that facebook contracted her to help them reduce their out-of-control CSS. I don't remember her exact numbers, but I know she cut down the size down by >50%

rimantas2• 15 years ago

How much did she increase the weight of HTML? CSS file can be downloaded once cached and never bothered again (if expires is set correctly). Bunch of classes attributes in your HTML will travel down the line every single time you request a page.

voidfiles• 15 years ago

It wasn't an attempt to use buzzwords, I think it's probably something more akin to cargo culture then blatant misuse.

However if the naive understanding of objects is that you define a base object, and then extend, or orverride that base object then I think this fits the bill.

tibolan• 15 years ago

This a great framework, but you need to use it as it has to be !

I love the grid without overflow:hidden, bring by the "X X X X X..." on a :after. More of a framework, OOCSS supply a philosophy: reuse, reuse and reuse.

The way I understand and I use the Oriented Object concept in CSS, is to provide "graphical" behavior to DOM element: ie: a <div> can extend the shadow behavior with one class and the red border with another. It permit to keep the CSS short, highly maintanable and to make the CMS more flexible, by giving more options to remix a block.

But the risk using this framework is to multiply className on a element, this fact have to be known, not to fall on a trap with double sized html !

The bases of OOCSS: - the template: <div class="page"> is the wrapper you can add the 'liquid' class to make your design fluid

- the grid: line / unit sizeXonY or lastUnit, the sizeXonY give the width of the 'cell', lastUnit permit the last <div> of a line to take the left place.

line contains unit, no margin or padding on unit (Groxx , to keep the percentage true (4 x25% = 100% vs 4x(25% + 10px (ie.margin)) > 100%)

- the block : see http://oocss.org/module.html but to be concise, the mod structure is bullet proof to insert corner, shadow on a block, without CSS3.

- fews plugins (not always useful) to supply solution to main CSS trick.

You can have more info here: http://oocss.org/ or in looking the demo in the git repository.

And a last thing, the resume of Nicole Sullivan (Stubbornella) give her credibility (to me): W3C, Yahoo!, Facebook... She's also the co-creator of http://www.smushit.com/ysmush.it/, the image size burner by Yahoo!

Hope it could help you to go deeper in this framework,

Keep goin' on Nicole !

rimantas2• 15 years ago

I hate OOCSS even more than grid frameworks, because it takes that horrible idea even further. It throws the whole idea of separating structure and presentation and throws it out of the window. Seriously, if one is so desperate to keeps CSS organized, then do like it was already advised here: use Compass or whatever tool which let's you define mix-ins.

dahlia• 15 years ago

http://j.mearie.org/post/3212514215/object-oriented-css

Someone wrote a post I agree about this.

jarin• 15 years ago

I've never been a big fan of the "throw in a bunch of classes" approach to CSS frameworks (e.g. this, Blueprint, etc). I prefer Compass' mix-in approach instead, since it maintains the separation between content and presentation.

Instead of this:

  <div class="span-12 loud last"></div>

You do something more like this in your SCSS:

  .mydiv {
    @import column(12, true);
    @import loud;
  }

wladimir• 15 years ago

Nice to see that people are working on making CSS better, in its bare state its awful to read, write and maintain. And reuse is almost impossible, it's the classic write only code.

How does this compare to sass? I suppose this also works as a preprocessing step, and 'compiles' to CSS?

siika2000• 15 years ago

I hate everything that is marketed as OO, and I hate CSS, now I don't know whether these two should cancel each other out or not...

Object Oriented CSS

Related Stories