4 ms·

Object Oriented CSS

45 points by michaelfairley 16y ago

ghempton 16y 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.
torme 16y 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.
Groxx 16y ago
Demo: http://waltschmidt.com/v2/ 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 16y ago
  This would undoubtedly have a negative impact on performance, no?
  - Groxx 16y 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.
- torme 16y ago
  She has a blog post explaining the x's here: http://www.stubbornella.org/content/2010/12/09/the-hacktastic-zoom-fix/ 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 16y 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.
  - Groxx 16y 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.
- 16y ago
sayemm 16y 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/1590598040/ref=sr_1_1?ie=UTF8&s=books&qid=1297301360&sr=8-1 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.
Desireco 16y ago
this exists for a while, most people are not overly thrilled with it...
Silhouette 16y 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 16y ago
  CSS is aspect-oriented! [1] http://plpatterns.com/post/482063133/every-time-you-use-css-youre-doing-aspect-oriented http://plpatterns.com/post/482063133/every-time-you-use-css-...
- cloudhead 16y 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 16y 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%
  - rimantas 16y 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.
    - hoopadoop 16y ago
      By an insignificant amount.
- voidfiles 16y ago
deleted 16y ago
[deleted]
dahlia 16y ago
http://j.mearie.org/post/3212514215/object-oriented-css http://j.mearie.org/post/3212514215/object-oriented-css Someone wrote a post I agree about this.
jarin 16y 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; }
- deleted 16y ago
  [deleted]
- bartl 16y ago
  At first I had no idea what you're talking about, but then I accidentally stumbled across the link to Sass (http://sass-lang.com/ http://sass-lang.com/). This is what you're talking about, right?
wladimir 16y 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 16y 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...

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.

torme 16y 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.

Groxx 16y ago

Demo: http://waltschmidt.com/v2/ 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 16y ago
This would undoubtedly have a negative impact on performance, no?
- Groxx 16y 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.
torme 16y ago
She has a blog post explaining the x's here: http://www.stubbornella.org/content/2010/12/09/the-hacktastic-zoom-fix/ 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 16y 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.
- Groxx 16y 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.
16y ago

sayemm 16y 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/1590598040/ref=sr_1_1?ie=UTF8&s=books&qid=1297301360&sr=8-1 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.

Desireco 16y ago

this exists for a while, most people are not overly thrilled with it...

Silhouette 16y 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 16y ago
CSS is aspect-oriented! [1] http://plpatterns.com/post/482063133/every-time-you-use-css-youre-doing-aspect-oriented http://plpatterns.com/post/482063133/every-time-you-use-css-...
cloudhead 16y 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 16y 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%
- rimantas 16y 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.
  - hoopadoop 16y ago
    By an insignificant amount.
voidfiles 16y ago

deleted 16y ago

[deleted]

dahlia 16y ago

http://j.mearie.org/post/3212514215/object-oriented-css http://j.mearie.org/post/3212514215/object-oriented-css Someone wrote a post I agree about this.

jarin 16y 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; }

deleted 16y ago
[deleted]
bartl 16y ago
At first I had no idea what you're talking about, but then I accidentally stumbled across the link to Sass (http://sass-lang.com/ http://sass-lang.com/). This is what you're talking about, right?

wladimir 16y 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 16y 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...