Object Oriented CSS for ChanLu

On my workplace, we had one major site that had a redesign, we – the designers, agreed on applying the Object Oriented way on our CSS files. We didn’t want to repeat the same mistakes all over again with our other huge, messy and unmanageable CSS files.  By applying the Object Oriented CSS, the site that we redesigned is more manageable, having cleaner and prettier code.

Using ChanLu Design I will practise on using this method, since during the redesign process, I was not assigned to be one of the coders, I ended up creating mock-ups for the individual pages of the site.

On applying OOC, you can get rid of unnecessary classes and reuse other classes. Here’s a perfect example of a good way in using OOC by Matthew Anderson that was posted on Jeff Croft’s blog post about OOC:

Messaging in applications is a great example. Your success, informational and error messages should have a similar look and feel. Using classes like “success message”, “info message” and “error message” are no less descriptive and no less communicative than “success-message”, “info-message” and “error-message”. However, they are a lot more maintainable and you accomplished it with less code.

This means that the structure of the element would go on the “message” class. Like messages are a block element having a padding of 10px. Their differences would most likely be on font colors, backgrounds and icons. These maybe placed on new classes that will contain their look and design. Usually well-known websites have their success messages as green with a check icon, info/notice messages to indicate something to think about are usually colored yellow with an exclamation icon while red with an X icon for something critical for the error messages.

The basic concept of OOC is separating the structure from the skin.

Sample Code without OOC

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

.success-message{
display: block;
padding: 10px;
font-size: 1em;
color: green;
background: url('../images/success.gif') no-repeat;
} 
 
.info-message{
display: block;
padding: 10px;
font-size: 1em;
color: yellow;
background: url('../images/info.gif') no-repeat;
}
 
.error-message{
display: block;
padding: 10px;
font-size: 1em;
color: red;
background: url('../images/error.gif') no-repeat;
}

Sample Code with OOC

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

.message{
display: block;
padding: 10px;
font-size: 1em;
}
 
.success{
color: green;
background: url('../images/success.gif') no-repeat;
} 
 
.info{
color: yellow;
background: url('../images/info.gif') no-repeat;
}
 
.error{
color: red;
background: url('../images/error.gif') no-repeat;
}

The messages do have the same structure, all they have are different appearances. That’s why one of the designers in my workplace said “It’s just like dressing up”. Whether you put on a hat, or glasses perhaps. Your still clothing a person. Sizes or colors may differ, but they still have the same structure. By separating the structure from the skin/design, we can reuse code and make our css files more maintainable.

Related posts:

1. WIO Screenshots