Object Oriented CSS(github.com)
github.com
Object Oriented CSS
https://github.com/stubbornella/oocss/wiki
29 comments
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();
/* 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;
}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?
At least there's Less. Anyone use it, or know of a better system?
I have tried out both Less (http://lesscss.org/) and Sass (http://sass-lang.com/), but not used either in a big website. It looks like Sass is better – it is more powerful in that it supports more functions and you can optionally use an alternative, less-redundant syntax with significant whitespace and no semicolons. The 2009 post http://nex-3.com/posts/83-sass-and-less by the creator of Sass compares the two, and the two deficiencies in Sass mentioned in that post have since been fixed. From what I can tell from looking quickly at the Less website, it hasn’t really improved since I last saw it. I’m using Sass for my very simple personal website, and it works fine for me.
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.
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.
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.
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.
This would undoubtedly have a negative impact on performance, no?
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.
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.
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.
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.
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.
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.
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%
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%
CSS is aspect-oriented!
[1] http://plpatterns.com/post/482063133/every-time-you-use-css-...
[1] http://plpatterns.com/post/482063133/every-time-you-use-css-...
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?".
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 !
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 !
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.
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:
Instead of this:
<div class="span-12 loud last"></div>
.mydiv {
@import column(12, true);
@import loud;
}[deleted]
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.
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.
Edit: Scratch that, the download seems to be working now, and it contains some better documentation.
[deleted]
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.
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.
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?
How does this compare to sass? I suppose this also works as a preprocessing step, and 'compiles' to CSS?
http://j.mearie.org/post/3212514215/object-oriented-css
Someone wrote a post I agree about this.
Someone wrote a post I agree about this.
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...
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:
Anyone care to explain that one? Disabling it causes some sections of the page to overlap.
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?