Object Oriented CSS
1,097 likes286,284 views
This document discusses Object Oriented CSS (OOCSS) principles and best practices for creating high-performance web applications. Key principles include separating structure and skin, as well as content and container, to promote modularity and reuse of code. It also outlines common pitfalls and emphasizes the importance of consistent semantic styles for efficient CSS development.
Editor's Notes
- #2: Introductions - Nicole Sullivan, worked at yahoo, specialist in scalable high performance websites.
- #5: After which he said that “CSS is broken” Very common to say that CSS is broken when it is misunderstood. Emerging frameworks are a sign that CSS is broken. Java developers -- Math class TRANSITION On the other hand, I honestly do believe we are doing it wrong.
- #6: couple years coding in the basement by yourself before you are remotely useful. Profession needs to accomodate entry level, mid level, and architect level developers. Frankly, I’m tired of writing rounded corner boxes. I’ve done it 1000 times already. What I want is a system that allows newbies to do that part so I can focus on the architect level challenges.
- #7: New (different) html pages should be able to be built without modifying the CSS.
- #8: And for good reason. Currently there is no consistency or predictability.
- #9: Perfectly accessible or high performance website, and then the first newbie to touch it, ruins it. Our code should be robust enough that newbies can contribute while maintaining the standards we’ve set.
- #12: yoga, balance metaphor
- #13: “Once upon a time...” pages to modules to objects
- #22: If we build new HTML pages from a component library, new pages won’t require new css. So what goes into a component library. First up, content objects.
- #23: Anything else that should be consistent site-wide.
- #26: media, media extended, wrap Open editable zone
- #28: presentational elements
- #38: function created to return area that occasionally returns the diameter instead.
- #52: not because you can’t do it everyone in this room could position something to the left and something else to the right. Also because, when working with beginners, they need not to figure out a brand new system with each module.
- #60: If ducati and saleMod both specify border, and the rules are the same strength, ducati should “win” as it is the last class specified.
- #61: Support for child element selectors would solve this, but would increase the length of the rules. E > F