Object Oriented CSS (original) (raw)

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.

Introduction to Object Oriented CSS aimed at high performance web applications.

Emphasizes respect for designers, clean code, and the relationship between consistent design and site performance.

Introduction of a notable quote reflecting the challenges in JavaScript coding practices.

Challenges in CSS management, including increasing file sizes, lack of code reuse, and fragile code.

CSS size and complexity increase proportionally with site expansion, leading to goal conflicts.

Desirable characteristics for CSS: modularity, lightweight, fast, and maintainable, advocating Object Oriented CSS.

Core principles: separating structure and skin, and separating container from content.

Top ten practices including creating a component library, using semantic styles, and minimizing selectors.

Identifying nine pitfalls in CSS practices, emphasizing on location dependence and redundancy issues.

Promotes creating reusable components likened to 'legos' for diverse page creation.

Addresses breaking dependency between container modules and their respective content objects.

Constructing HTML from component libraries to minimize additional CSS.

Highlights reusable site components like headings, lists, and buttons for consistent designs.

Ensures headings and lists maintain consistency and semantic relevance across the site.

Illustration of media objects and their structure for improved clarity and reusability.

Encourages separating structure from style, enhancing modularity in CSS.

Benefits of reusing CSS elements leading to performance improvements without additional costs.

Process of designing pages using pre-defined components, ensuring efficient design workflows.

Discusses pitfalls of redundancy in CSS modules to avoid confusion and inconsistency.

Advocates for consistency in semantic styles to reduce confusion and enhance readability.

Provides examples of inconsistent tab styles and module similarities to highlight the need for uniformity.

Demonstrates strategies for effectively mixing content objects and containers in design.

Promotes creating modules with transparent internal structures for better usability.

Warns against pitfalls such as variable backgrounds and the importance of avoiding specific element definitions.

Encourages flexible design principles regarding width, height, and grid system usage.

Highlights the importance of grids for controlling width and consistency in web design.

Focus on educating designers and engineers on Object Oriented CSS methodologies.

Desires for CSS enhancements such as extending objects, improving cascade impact by class order, and nested modules.

Acknowledges photo credits used in the presentation and provides contact information for further discussion.