Object Oriented CSS video on YDN
Yahoo! Developer Network has released a video of my Object Oriented CSS talk at Web Directions North just in time for Ada Lovelace day. I’ve also been included in a feature on Women in Technology. I’m absolutely flattered to be included among these fantastic technical women. Wow.
Object Oriented CSS: for high performance websites and web applications.
Find out more about object oriented css
- Open source project on github (GIT is having some DNS issues, be patient)
- Follow along with the slides on slideshare
- Join the OOCSS google group
Thanks to Havi, Julie, Ricky, Yahoo! Developer Network, and the whole Web Directions North team for their hard work putting this together!
March 24th, 2009 at 12:57 am
I’ve not seen the video yet, but please, forget about video players without a fullscreen button !
Luckily there’s a download link on the yahoo.net page.
March 24th, 2009 at 1:25 am
[...] Stubbornella » Blog Archive » Object Oriented CSS video on YDN [...]
March 24th, 2009 at 1:45 pm
Congratulations! n_n
March 24th, 2009 at 5:10 pm
@Fabien I guess you found the high res version of the oocss video available for download from YDN. I’m pretty sure my embed code allowed full screen mode, but I guess it didn’t work properly.
@JOS Thanks.
March 25th, 2009 at 2:27 pm
This is really really interesting ! I enjoyed the video and the principles a lot. Now I need to go deeper to understand the whole thing and see more examples.
I also enjoy how this is a good base for learning CSS. This could be used by teachers and inspire them. They could teach CSS as they teach algorithmic. And we need writings about that.
Congratulations.
March 27th, 2009 at 12:03 am
Nicole, access to the video is _extremely_ difficult ; I tried from three different sites with 12Megabits++ bandwidth and the stream is cut all the time with a video player that does not let easily stop, buffer and play. Could you please post that video or a more reliable site ? Thanks!
Daniel Glazman, W3C CSS WG Co-chair
March 27th, 2009 at 11:23 am
Hi Daniel,
Sorry you’re having trouble watching the video. I actually don’t have a copy of it… Did you try downloading the high res version and watching it locally?
http://us.dl1.yimg.com/download.yahoo.com/dl/ydn/nicolesullivan.m4v
Nicole
March 27th, 2009 at 2:47 pm
Aaaah thanks for the link Nicole !
March 28th, 2009 at 1:10 pm
Thanks for this presentation.
I liked the way you defended CSS: after all, both JavaScript and CSS have their flaws.
I have one regret however: I was expecting to here a little less about CSS in general and a little more about your “baby”.
March 28th, 2009 at 3:44 pm
[...] Your Elements Stubbornella you have captivated me. I am now watching Nicole Sullivan’s Object Oriented CSS talk for the second time. The OOCSS framework is a terse but ambitious thing in the tradition of YUI [...]
April 13th, 2009 at 6:05 am
Hi Nicole,
Great video and thanks for sharing. Second time I found your site via Laura Carlson’s
[webdev] Web Design Update newsletter. You are great!
I had to watch the OOCSS video a couple of times (not too quick – me) to realise why I was having trouble with the concept. Somewhere along The One True CSS Way education I understod the cascade as the only way to craft a site; all you need it a very few strategic IDs: adding others and classes was evil. Thank you for showing me the error of these ways.
I’ve still not seen you’re whole spiel through (kids and flaky connections mostly to blame) but am dying to know out if you set rounded corners once – independent of width – without adding that extra Opera-bug-squashing-inner-div…
BTW thanks for reminding me of Cederholm’s mountaintop corners – didn’t like the idea when I first came across it but now I know about the PNG8/24 trick. But where do I find Leslie Summers’ “really elegant” rounded corner box solution? Google is not my friend today…
class=”dimissed”
May 8th, 2009 at 11:38 pm
Hi Nicole,
Great presentation! Keep up the great work!!!
I have a couple of questions after fooling around with your grids.
Why did you have to introduce a new grid framework? Is the yui-grids not enough to use as a base for your oop-css thoughts? Is it because of optimization reasons or are you not a fan of how the yui-grids works?
I am confused when I look att the blocks_UML image, in which you mix yui-grids with your own framework?
How does everything fit together, how are you using it?
You are also mixing camel case and hyphen naming conventions and you’re using some presentational names, are you doing this just to make it easier for us to understand or do you have any other reason?
Thanks again!
/Johan
May 21st, 2009 at 3:10 pm
Nicole, thanks for presenting a different way to dice things that should prove far more manageable down the road. I certainly need to learn more about this “grids” stuff that everyone’s talking about.
Btw, got here by way of a recommendation on Jeff Croft’s blog.
May 26th, 2009 at 1:36 pm
@Gabriel de Kadt : http://www.lesliesommer.com/wdw07/html/
June 11th, 2009 at 12:44 am
@Eddie: THANKS! Sommer – with an ‘o’. D’oh.
June 12th, 2009 at 7:52 am
I was curious about the rounded corner’s too and found them here: http://www.lesliesommer.com/wdw07/html/
June 15th, 2009 at 11:47 pm
[...] One prominent voice in this arena is Nicole Sullivan, who has developed a methodology called Object Oriented CSS (OOCSS). She outlined this approach to writing CSS at Web Directions North 2009, and the 48-minute video is available. [...]
June 16th, 2009 at 10:46 am
Hmm, been coding css for a month now and allready figured this out on my own, sorta…
Loved this presentation though…
June 16th, 2009 at 6:18 pm
Nice presentation, more knowledge how to maintain web development projects. Thank You!
June 17th, 2009 at 12:03 am
Excellent talk! It’s given me some very useful food for thought. I’m going to have a go at putting some of these ideas in to practice in my next project.
June 17th, 2009 at 3:19 am
Awesome presentation and very timely as this is the sort of practice I’ve been seeking. Thank you!! Are there any notes available associated with you presentation ie: your UML diagram, links etc?
June 17th, 2009 at 4:34 am
Thanks for the awesome presentation!
June 17th, 2009 at 8:03 am
[...] /** * relevant links | 看不到请自行“无界” */ [1] Object Oriented CSS video on YDN [...]
June 18th, 2009 at 9:28 am
Thank you so much not just for the video but for the whole idea of “object oriented CSS”.
When I read the article on the Sitepoint newsletter (which eventually brought me to your video) the work I have been trying to do so far suddenly jelled in my mind. What a fantastic idea.
I may have missed it, but where can I learn more? Where can I find practical examples of this fantastic code?
I work with Joomla, Wordpress, Drupal and other CMS or Blogs and since they tend to always write the same HTML given the same input, this style of CSS is a perfect marriage for those scripts. yet, if you look at what is available, everyone reinvents the wheel every time, me included.
I have been trying for about a year to build a reusable library of CSS “Objects” (I just didn’t know what to call them) but when your next mortgage payment depends on delivering web sites quickly, you tend to jump from project to project and never have time to really work on something like that. We solitary CSS jockeys have to rely n those like you that can invest time in research. Not unlike Doctors I suppose.
Thank you again
June 18th, 2009 at 2:40 pm
I loved the presentation, I’ve worked on a large website and OOCSS is a must otherwise you have one or many CSS files thousands of lines long replicating functionality. Great resource, keep up the good work.
Thanks for posting,
Samuel K. Mburu
June 19th, 2009 at 1:51 am
Hello Nicole,
I’m interested in watching the video, but I have a very slow connection and can’t watch it on streaming without buffering. Is there a website or link to download it, or where it is posted with buffering?
Thanks
June 19th, 2009 at 9:29 pm
Nicole.. thanks soo much for this excellent presentation… you really hit the spot where the concept crystalized nicely … Im one of those frustrated designers and I really appreciate you expanding on the learning process .. can you recommend a good resource for beginners to learn CSS the correct way… preferably on Video.
Thank you again.
Mark
June 21st, 2009 at 9:08 am
Yes, follow the link to download it directly on the YDN site.
July 2nd, 2009 at 6:25 pm
I have just completed a project called Common Components. Over 6 weeks the designer trickled me new screen to markup. The situation was not ideal, and I can no longer bare to look at the html and css. Unfortunately I have only just discovered your video about OOCSS, it would have saved me both past and future headaches.
For me, this is as important as reading Andy Clarke’s Transcending CSS, in fact it may be what I’ve been trying to transcend to.
I have been thinking of modular css for some time but couldn’t begin to describe it. You’ve made it crystal clear.
Thanks.
July 3rd, 2009 at 5:48 am
[...] Object Oriented CSS (OOCSS) has recently made some buzz in the web industry and for very good reasons. It’s the kind of thing I go: why didn’t I think about this? As a CSS architect, I’m very enchanted to learn something new in the subject, all thanks to Nicole Sullivan at Yahoo. [...]
July 5th, 2009 at 8:22 pm
[...] may be outing myself in the nerdiest way, but I really enjoyed Nicole Sullivan’s talk at Web Directions North on Object Oriented CSS. I don’t think anyone I know would be interested in a conversation about strategies in making [...]
July 8th, 2009 at 10:02 am
[...] Ben Nadel posted a very good article about Nicole Sullivan’s video “Object Oriented CSS”. [...]
July 10th, 2009 at 10:11 pm
I really like this, Is there any actual documentation? I suppose for the seasoned WebDev it’s all pretty easy but how about some decent explanations of how to put it all together, like skinning and using the mods etc? or am I missing something?
July 11th, 2009 at 11:16 pm
@Dan – It isn’t easy, even for seasoned web devs. Getting the architecture right is always challenging.
I’d check out my example implementation on Github. It is an open source project based on OOCSS ideas:
http://wiki.github.com/stubbornella/oocss
There is also a Google Group:
http://groups.google.com/group/object-oriented-css
August 4th, 2009 at 10:13 am
I love your philosophy on development, it really is just excellent!
It’s so excellent to see CSS being taken so seriously and pushing development techniques forward with it. excellent!
Rob
August 6th, 2009 at 6:39 am
This is fantastic on so many levels. Thank you!
September 2nd, 2009 at 7:12 am
I didn’t quite get the PNG-8 rounded corners trick. Could you provide an example of page where it’s used? Thanks…
September 17th, 2009 at 9:43 pm
Hi Nicole,
I really like your OOCSS philosophy, and would love to implement it in our upcoming projects.Thanks for your great work and publishing the information to help developers get started.
Hope I can find some good Freelance coders who understand this well and can help us implement it in our next project.
October 15th, 2009 at 1:29 am
Hi nicole,
I´m from Germany and I´m trying to get specialised in css. Your Philosophy help us, the newbies, to learn it better and use it better. I´ll try to learn oocss but I´m not sure, if many people will knew, what we did, when we learned this.
But that doesn´t matter. I hope that you will keep doing this and that you can post some tutorials or something like that.
I´m very Sorry for my bad english, I´m just 17-years-old.
Hope to read you again.
October 26th, 2009 at 1:07 pm
First off, great presentation. Clearly there is a way to standardize css a bit and make certain aspects and code blocks reusable. I’ve tried out and really looked at a lot of css frameworks, but truthfully, have seen things that I really like (so far, love jquery’s ui framework) and some things that I don’t.
I think the main thing that annoys me are the “position based” class naming rather then naming a class according to context or even function.
Example: Blueprint uses:
Append-10, prepend-20 (or something like that)
You uses “unit size1of2″ – grid blocks sized to measurements…. This still seems kinda sloppy and unreadable to me…
Don’t get me wrong, I see why you are doing it, and can see the logic, it just still seems non semantic…
October 26th, 2009 at 1:11 pm
I wish one can edit a previous comment. It almost seems like you are simply trying to re-emulate a table, without using tables. The whole things seems tablesk.
(class=”line”)
(class = “unit”)
just a thought anyway.
November 12th, 2009 at 3:16 pm
[...] Links: das Video Github [...]