Nicole Sullivan
commented on
What is Object Oriented CSS?All of the code examples are available on the open source project. Better to get the source there because sometimes (for brevity) I highlight on the slide only the bit I’m talking about.
http://wiki.github.com/stubbornella/oocss
Cheers,
Nicole7 months ago
Nicole Sullivan
commented on
Object Oriented CSS@guest52ea4b9 The cleanest solution is to use no browser specific code. This is more important than how we include it when we absolutely must.
The most important difference between adding an additional class for IE versus _ is that your second rule is stronger than your first.
That means that in IE, the second rule will overwrite any similar rules in objects that extend "news". Say for example you had "sports", "politics", and "celebrity" classes that extended "news". Your selectors should usually be the same strength, the cascade then allows the one that is later in the CSS file to win. In your example, IE specific hacks would always win over extended objects... and you would need to overwrite those with even more hacks. Hacks beget hacks beget hacks.
_ really is the cleanest choice. It isn’t valid, but it is better on a lot of other counts.
BTW, be careful with classes stuck together, different browsers treat that differently.
Wow, rereading this I realize I need some sleep. :) Hope it makes sense.
Nicole9 months ago
Nicole Sullivan
commented on
Object Oriented CSS@guest YUI chose those names in order to namespace the classes and modules. YUI names are very unlikely to exist in your code, so you can implement the YUI libraries on an existing site. Doing the same with mine might break things. For example, if you already have classes like "line" and "unit".9 months ago
Nicole Sullivan
commented on
Object Oriented CSSMy code for OO CSS grids and templates is available open source on github. http://wiki.github.com/stubbornella/oocss9 months ago
Nicole Sullivan
commented on
Object Oriented CSS@guest410f68 Someone once said to me that designers were not capable of understanding modulo, which is why nth CSS selectors have a more complicated almost algebraic syntax. My assumption is always that if someone didn’t understand something, I haven’t explained it well enough. We should go for the graceful solution and let education take care of the understanding piece.
@featureBlend Haha, oops. I didn’t let your comment through because it was too complementary. I assumed it was spam. Sorry! ;)9 months ago
Nicole Sullivan
commented on
Object Oriented CSS@guestb9319c They were against anything that would make CSS resemble a programming language; extends, variables, margin-left:margin-right... I think the tide is turning now.9 months ago
Nicole Sullivan
commented on
Object Oriented CSS@guest578569, the method was developed to write scalable multinational websites. Basically I tried everything the wrong way first. The eventual solution happened to be OO, but it wasn’t the initial goal.9 months ago
Nicole Sullivan
commented on
Object Oriented CSS@guest474c1d3 overflow:hidden (for the lastUnit) provides additional functionality. The final block has no width applied, but it behaves like a float, except it takes the rest of the space available on that line. It absorbs the sub-pixel rounding differences between Safari, Chrome, and FF.
For lines it would be possible to use another method, like content after, but I thought I should keep it simple and use the same method for the whole thing.9 months ago
Nicole Sullivan
commented on
Object Oriented CSS@guest4b52727e There will be Video care of Yahoo! Video and podcasts care of Web Directions North. I’ll definitely post both when they become available.10 months ago
Nicole Sullivan
commented on
Object Oriented CSS@guest8985 In simple cases, yes. There are a few problems with this approach.
1. The amount of CSS you write increases more than it should, which is bad for performance.
2. Code for a given object isn’t grouped together in the file, which is bad for maintenance.
3. It only works on the simplest selector strings. In my example .saleModule would extend .module, but it would also extend ul li .module. Your CSS would quickly become complicated if you tried to do this with your method. Essentially, everywhere you referenced any module you would also have to reference all modules that might extend it.
The goal is to write sites when we don’t know exactly what will be built on top or what creative ways people will have for extending or recombining our base objects.10 months ago
Nicole Sullivan
commented on
Object Oriented CSSYou know, it is actually a funny story, one I don’t remember. My mother told me that when I was five, my school switched to phonetic spelling. She said I came home from kindergarden frustrated because my teachers insisted I "sound it out", despite the obvious incompatibility of that approach with English.
I said, "that’s it, I’m never spelling again!" She taped up spelling words all over the house (e.g. refrigerator, door, etc.) to dissuade me. Though I wouldn’t earn the moniker Stubbornella for another couple of decades, I never spelled well again.
_Constructive_ criticism regarding spelling is very much appreciated (e.g. This word on that slide is incorrect, should be "foo"). Unfortunately, if the comment is less detailed, it is useless to me. I’m handicapped by my internal five-year-old. ;)10 months ago
Nicole Sullivan
commented on
Object Oriented CSS@jboutelle I think that is the choice a lot of sites have made, out of necessity, just to keep different components sandboxed from loopy cascade interactions.
Writing modular, object oriented CSS means that removing code is relatively simple, you just have to ask yourself ’is this module still used on the site?’. Maybe this even makes sense as a part of the build system or CMS.10 months ago
Nicole Sullivan
commented on
Design Fast WebsitesHere’s the video I mentioned:
Nicole Sullivan: "Design Fast Websites" @ Yahoo! Video11 months ago
Nicole Sullivan
commented on
Design Fast Websites@guest1dacd I’m always suspicious of stats too! I quoted sources for this presentation on the YUI Theater blog. Check the comments section. There is also a video of me presenting the same information. I give a lot more detail, etc.
http://yuiblog.com/blog/2008/12/23/video-sullivan/11 months ago
Nicole Sullivan
commented on
Pourquoi la performance?Le video du meme presentation. Video of the same presentation.
Eric Daspet & Nicole Sullivan - Performance Web côté clientUploaded by parisweb2 years ago
Comments