Blog

Object Oriented CSS

Posted on May 16, 2009

Okay, there is no such thing as object oriented CSS. But there are advantages in OO programming that we can use in CSS.

1
2
3
4
5
6
7

p {
    margin: 0;
}
 
#content p {
    margin: 1em 0;
}

In this example p would be a class and #content p would be an instance of that class. Let’s say the margin set in p is a method and we got the basic concepts of OOP.

Practicle example

A single HTML element can serve different purposes on a page. A list element for example can be used as a navigational menu (styled horizontally) and as a regular list in content (styled vertically). Sometimes it’s difficult to change one without changing the other.

1
2
3
4
5
6
7
8
9
10
11
12
13

li {
    list-style: none inside;
}
 
#menu li {
    display: block;
    float: left;
}
 
#content li {
    /* We only want bullets if a list appears in content */
    list-style: outside disc;
}

Here I created two instances of the li object. If you change either one it won’t effect the other.

CSS Reset

It’s useful to reset all style properties first using a CSS reset. In the above example I simply applied list-style: none inside; to the li element so you won’t see bullets (•) unless you specify it. It’s easier to just reset everything at once, like this:

1
2
3
4
5
6
7
8
9
10
11
12
13

* {
	background-color: transparent;
	border: none;
	font-size: 1em;
	font-weight: inherit;
	font-family: 'Trebuchet MS', Verdana, Arial;
	line-height: 1.4em;
	list-style: none inside;
	margin: 0;
	padding: 0;
	text-align: inherit;
	text-decoration: none;
}

Adding this code on top of your CSS file will give you full control over your code.

As a bonus this will probably solve a lot of your cross-browser compatibility problems. This is because every browser applies different default CSS to elements.

Scroll to top