ElbertF Blog

Object Oriented CSS

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

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.

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:

* {
	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.

Filed under Programming

Scroll to top