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.
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.
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?
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.
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.
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.
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?
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.
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.
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?".
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%
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.
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.
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,
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.
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/). This is what you're talking about, right?
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?
29 comments
[ 3.0 ms ] story [ 77.0 ms ] threadEdit: Scratch that, the download seems to be working now, and it contains some better documentation.
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?
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.
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.
At least there's Less. Anyone use it, or know of a better system?
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.
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.
[1] http://plpatterns.com/post/482063133/every-time-you-use-css-...
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%
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 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 !
Someone wrote a post I agree about this.
Instead of this:
You do something more like this in your SCSS:How does this compare to sass? I suppose this also works as a preprocessing step, and 'compiles' to CSS?