Website.Technology

A directory of website technologies - submit your website

Select Page

Object-oriented CSS (OOCSS)

Listing Title:
Object-oriented CSS (OOCSS)
Listing Category:
Description:

Basically, a CSS object is a repeating visual pattern, that can be abstracted into an independent snippet of HTML, CSS, and possibly JavaScript. That object can then be reused throughout a site.

Object-oriented CSS (OOCSS) a popular framework developed and promoted by Nicole Sullivan
The focus of OOCSS is the idea of treating page elements as objects, giving all these objects classes, treating objects’ classes as single entities in style sheets, and taking it from there.

OOCSS is based on two main principles.

1) SEPARATION OF STRUCTURE FROM SKIN
Almost every element on a styled Web page has different visual features (i.e. skins€) that are repeated in different contexts. Think of a website’s branding the colors, subtle uses of gradients, or visible borders. On the other hand, other generally invisible features (i.e. structure€) are likewise repeated.

When these different features are abstracted into class-based modules, they become reusable and can be applied to any element and have the same basic result.

2) SEPARATION OF CONTAINERS AND CONTENT
The second principle described on the OOCSS GitHub wiki page is the separation of containers from their content.

Send Message to listing owner