Download to read offline
Uploaded byKelley Howell
An introduction to Object Oriented CSS
The document discusses Object Oriented CSS (OOCSS) as presented by Nicole Sullivan, emphasizing the importance of building scalable and maintainable web applications. Key principles include creating reusable modules, separating structure and style, and designing components for flexibility and accessibility. The author critiques common CSS practices and advocates for a more systematic, modular approach to enhance efficiency and performance.
More Related Content
Similar to An introduction to Object Oriented CSS
An introduction to Object Oriented CSS
- 1. Kelley Walker, DominionEnterprises
- 2. Object Oriented CSS adistillation of Nicole Sullivan’s approach to building large, scalable, high traffic sites and applications
- 3. Kelley Walker, DominionEnterprises OOCSS the Sullivan Way Who is Nicole Sullivan? www.stubbornella.org Yahoo: scalability and focus on page speed Full Six: a French firm experiencing a severe shortage of senior level UI developers, but plenty of graphic designers
- 4. Kelley Walker, DominionEnterprises Definitions Modular: combinable, reusable, extensible Light: one to many relationship between CSS and potential layouts Fast: Minimal HTTP requests and minimal size Future-proof: maintainable, semantic, standards-oriented, easy to redesign, prepared for future browsers Adaptable: respectful of UX design and marketing restraints Accessible: SEO, screen readers, variety of user agents, users with disabilities (especially as the population ages), and assistive technologies
- 5. Kelley Walker, DominionEnterprises Lego Land Object oriented
- 6. Kelley Walker, DominionEnterprises 1. Immature 2. Fragile 3. Re-use is Rare What’s Wrong with CSS?
- 7. Kelley Walker, DominionEnterprises Sullivan’s Complaints 1) Coders are writing modules that are too clever. 2) Can’t pull a module and use it elsewhere because code is dependent on that location.
- 8. Kelley Walker, DominionEnterprises Questions 1. Is the code really too clever? 2. Is it possibly because she’s speaking from a position of working with large organizations -- which don’t typically allow time to write re-usable code? 3. In smaller agencies, might code re-use be more likely because building entire sites with more frequency? 4. OTOH, maybe agency environments might also encourage tendency to try out new tricks – which could mean you are not re-purposing when possible?
- 9. Kelley Walker, DominionEnterprises CSS Doesn’t Suck (We’re just doing it wrong) The way to do it right is to use Object Oriented approaches to building modules, pages, and entire Web sites.
- 10. Kelley Walker, DominionEnterprises What is Object Oriented CSS? What does the “object” in object-oriented mean? An object exemplifies – is an exemplar of – a class. A dog with a hat |= object
- 11. Kelley Walker, DominionEnterprises •Dog with a hat •Dog with a bone •Man with a bone
- 12. Kelley Walker, DominionEnterprises Each of those images constitutes a module, not an object. The objects are the man and the bone. Do we mean this? Or this? What about a man eating fish?
- 13. Kelley Walker, DominionEnterprises OOCCS: Two Characteristics 1). Separation of structure and skin Create basic layouts – like wireframes – then skin the layout. 2). Separation of container and content Create module containers, then fill with content objects: Header, footer, titles, paragraphs, images, captions, etc.
- 14. Kelley Walker, DominionEnterprises Used to focus here: ul{…} ul li{…} ul li a{…} But, the architecture lives here: ul{…} ul li{…} ul li a{…}
- 15. Kelley Walker, DominionEnterprises Objects are Lego-like components that can be mixed and matched to build modules, pages, Web sites.
- 16. Kelley Walker, DominionEnterprises This is a module HEADING Title Goes Here Description text goes here. It has the form of a paragraph and, semantically, it is a paragraph. This is an Unordered list Containing examples These are objects
- 17. Kelley Walker, DominionEnterprises OOCSS Top Ten 1. Create Component Library 2. Consistent semantic styles 3. Design modules to be transparent on the inside 4. Be flexible 5. Use grids 6. Minimize selectors 7. Separate structure and skin 8. Separate container and content 9. Use reset and font consistency style sheets (@YUI) 10.Extend objects with multiple classes
- 18. Kelley Walker, DominionEnterprises Do’s Do develop pages after all individual structural elements have been identified Do build structural legos first Do use grids: grids control width; content controls height Do abstract reusable elements Do style for exceptions Do set objects - not pages or modules Do set global defaults on content objects
- 19. Kelley Walker, DominionEnterprises Do’s This is the norm: .error{ most of the code goes here } These are exceptions: div.error{…;} p.error{…;} span.error{…;}
- 20. Kelley Walker, DominionEnterprises Don’ts Depending on the cascade is not Object Oriented CSS: h3{color:black;} .weathermodule h3 {color:red;} .nav_tabs h3{color:blue;} Instead, she argues for a global definition of heading tags: h1, .h1{…}, h2, .h2{…}, h3, .h3{…}, h4, .h4{…}, h5, .h5{…}, h6, .h6{…}
- 21. Kelley Walker, DominionEnterprises Don’ts Don’t specify elements (only if it’s an exception) div.myclass{…} instead, use: .myclass{…} Don’t use IDs - reserve for use as javascript hooks
- 22. Kelley Walker, DominionEnterprises Don’ts Don’t use height alignment in the design Bowralite marica Mahewu's nondecisiveness bisetous sexly nonurgently gutteral tingidae politei amphioxidae fibromyomectomy admiredly. Uninsolated topepo balbusard aristocraticism falcular gmelinites. Centrodorsally boghole armadilla subarborescence prederived distater deliquiate. Semicardinal subslots legative plasmode langsettle tummer preboyhood's, outma laprop hydroguret runagado, reexpression abatage's disomatic. Heteroside harten braggadocian cattlefold indiadem pathetic is todo ally porcelanic xanthophyl. Semicardinal subslots legative plasmo langsettle tummer preboyhood's, outma laprop hydroguret runagado, reexpress abatage's disomatic. Heteroside harten braggadocian cattlefold indiadem pathetic is todo ally porcelanic xanthophyl.
- 23. Kelley Walker, DominionEnterprises Semicardinal subslots legative plasmode langsettle tummer preboyhood's, outma laprop hydroguret runagado, reexpression abatage's disomatic. Heteroside harten braggadocian cattlefold indiadem pathetic is todo ally porcelanic xanthophyl. Because… when your content is dynamic…. Bowralite marica Mahewu's nondecisiveness bisetous sexly nonurgently gutteral tingidae politei amphioxidae fibromyomectomy admiredly. Uninsolated topepo balbusard aristocraticism falcular gmelinites. Centrodorsally boghole armadilla subarborescence prederived distater deliquiate. Semicardinal subslots legative plasmo langsettle tummer preboyhood's, outma laprop hydroguret runagado, reexpress abatage's disomatic. Heteroside harten braggadocian cattlefold indiadem pathetic is todo ally porcelanic xanthophyl.
- 24. Kelley Walker, DominionEnterprises Communicating Object Oriented CSS:
- 25. Kelley Walker, DominionEnterprises
Editor's Notes
- #18 Create components that can be reused anywhere within a site and between sites: navigation, forms, information modules. Name elements semantically using microformats or style- and location-independent naming conventions. Transparent on the inside Use flexible designs whenever possible Make use of grid design patterns such as the YUI Grid Library While you want to make selectors do the work, you may also need to write more mark up to maximize page speed 10. <div class=“mymodule”> should be a basic module container used repeated throughout a site. To style it up slightly differently, extend the class: <div class=“myModule weatherInfo”> or <div class = “myModule saveSearchForm”>