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

  1. Open source project on github (GIT is having some DNS issues, be patient)
  2. Follow along with the slides on slideshare
  3. 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!

Comments

53 responses to “Object Oriented CSS video on YDN”

  1. Fabien Avatar
    Fabien

    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.

  2. […] Stubbornella » Blog Archive » Object Oriented CSS video on YDN […]

  3. JOS Avatar
    JOS

    Congratulations! n_n

  4. Nicole Avatar
    Nicole

    @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.

  5. Rik Avatar

    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.

  6. Daniel Glazman Avatar
    Daniel Glazman

    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

  7. Nicole Avatar
    Nicole

    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

  8. Daniel Glazman Avatar
    Daniel Glazman

    Aaaah thanks for the link Nicole !

  9. Maurice Avatar
    Maurice

    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”.

  10. […] 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 […]

  11. Gabriel de Kadt Avatar

    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”

  12. Johan Avatar
    Johan

    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

  13. Nathan Youngman Avatar

    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.

  14. Gabriel de Kadt Avatar

    @Eddie: THANKS! Sommer – with an ‘o’. D’oh.

  15. Helen Avatar

    I was curious about the rounded corner’s too and found them here: http://www.lesliesommer.com/wdw07/html/

  16. […] 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. […]

  17. Narfotic Avatar
    Narfotic

    Hmm, been coding css for a month now and allready figured this out on my own, sorta…

    Loved this presentation though…

  18. Hans Avatar

    Nice presentation, more knowledge how to maintain web development projects. Thank You!

  19. Will Kemp Avatar

    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.

  20. Tom Bannister Avatar

    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?

  21. Lim Avatar

    Thanks for the awesome presentation!

  22. […] /** * relevant links | 看不到请自行“无界” */ [1] Object Oriented CSS video on YDN […]

  23. Marco Conti Avatar

    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

  24. Samuel Mburu Avatar

    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

  25. pippilu Avatar
    pippilu

    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 🙂

    1. Nicole Avatar
      Nicole

      Yes, follow the link to download it directly on the YDN site.

  26. Mark Avatar
    Mark

    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

  27. Murray Nuttall Avatar
    Murray Nuttall

    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.

  28. […] 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. […]

  29. […] 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 […]

  30. […] Ben Nadel posted a very good article about Nicole Sullivan’s video “Object Oriented CSS”. […]

  31. Dan Avatar

    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?

    1. Nicole Avatar
      Nicole

      @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

  32. Robert Avatar

    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

  33. Josh Avatar
    Josh

    This is fantastic on so many levels. Thank you!

  34. Peter Kahoun Avatar

    I didn’t quite get the PNG-8 rounded corners trick. Could you provide an example of page where it’s used? Thanks…

  35. Shaleen Shah Avatar

    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.

  36. Clemens Avatar
    Clemens

    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.

  37. Jonas Avatar

    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…

  38. Jonas Avatar

    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.

  39. […] por Nicole Sullivan (@stubbornella), especialista em performance de front-end, durante o Web Directions South 2009. De lá para cá ela amadureceu o conceito e desenvolveu um framework para exemplificar os […]

  40. idesignedit Avatar

    Hi Nicole I am really intrigued to download your project via github although there seems to be nothing their URL: http://github.com/stubbornella/oocss/downloads , is there somewhere I can have access to this? I worked for a newspaper company around 6 months ago of around 300 titles we worked on a similar principle to OOCSS if not the same this is why I am so intrigued, we had different modules for the areas of the site like vote, weather that the editors could drag and drop into any area of the site (drag and drop functionality) we had multiple structural layouts and multiple skins for the editors to chose all the modules had to be scalable and 100% width due to the structural changes. I started with a very similar approach to OOCSS treating each module independently as they had to work with all skins and structure. Great presentation is not an easy subject/concept to grasp…. Kind Regards Matt

  41. Paul Gillartd Avatar

    @Gabriel

    “But where do I find Leslie Summers’ “really elegant” rounded corner box solution?”

    Hi Gabriel, I think the spelling of her last name had something to do with your search going awry. This might be the page / solution that Nicole spoke about:

    http://www.lesliesommer.com/wdw07/html/

    Cheers
    Paul

  42. […] videoIn: BlogBy:JohnMarch 27, 2009 Leave a response At Web Directions North, the highly tal­ented Nicole Sullivan debuted her “OOCSS” con­cept, to much inter­est. Yahoo Developer Network video recorded a num­ber of the ses­sions, […]

  43. […] to becoming a hairy maintenance nightmare. I recommend following Nicole Sullivan's "OOCSS" approach, which structures CSS objects to be […]

  44. Brett Widmann Avatar

    This is really cool. Thanks for such an informative vid!

  45. Jason Rundell Avatar

    I wish I could write this comment in a rounded-corner box

  46. […] and one based on the OOCSS concept. If you haven’t heard of OOCSS, I strongly suggest you watch Nicole Sullivan’s presentation. There is loads of great information and is very practical on large scale […]

  47. […] standards-based front end code. It adds much needed predictability to the way CSS is Handled. This Tutorial Video explains everything in detail. As Nicole Stated on GitHub, a social network for […]

  48. […] CSS their CSS naming convention is totally out of wack.  While this is going on the direction of Object Orientated CSS (OOCSS), forget about trying to stay semantic, so there was little to no help in my answer there. […]

  49. What is the best way to maintain large CSS projects?…

    When projects expands, so does the CSS. And gradually you have huge CSS that is a complete mess to work with. Nicole Sullivan has created a development methodology for CSS called Object Oriented CSS. OOCSS framework revolves around two simple principle…