Think of CSS and HTML as Classes

Does that pretty much sum it up?

My goal for this post is to show developers who shy away from CSS to embrace it and apply some object-oriented terms to understand it better.

Since developers always think in code, there's no reason why you couldn't use your server-language skills (i.e. PHP, Java, C#) in CSS and HTML. Think of CSS as "code for designers."

This "code" does offer some similarities most developers use everyday: inheritance, polymorphism, and encapsulation. Along with the object-oriented terminology, CSS can even be used for state and identification purposes along with styling.

Recently, I just added another resource in my Collection: CSS Resources. The resource is called MaintainableCSS.com. This resource is more of a document or standard of how CSS should be written when designing applications. Surprisingly, it outlines what a majority of what some CSS frameworks already include.

If you look at Twitter Boostrap's CSS, you'll notice classes like .active or .disabled. These concepts are covered in the MaintainableCSS.com site. Examine these two lines.

.panel { font-family: "Arial"; font-size: 12px; }
.panel p { font-size: 10px }

If you notice the .panel class, it sets the font-family to "Arial" with a font-size of 12 pixels.

In the next line, we define a paragraph tag inside the panel with a font-size of 10 pixels. The font type doesn't change because it's part of the panel class.

You could say the paragraph class inherits from the .panel class. It's not a true inheritance, but it's a type of inheritance. Encapsulation is also present in these two lines.

If I wanted to use that paragraph style outside of a panel, I couldn't because this style rule says that any paragraph inside the panel will have font size of 10 pixels. It won't add any additional styles (unless you have some jQuery somewhere modifying it) so it keeps it encapsulated inside the class.

Now onto polymorphism. Examine this CSS snippet:

.form-panel { display: block; background: #ff0000 }
.form-panel .form-a { font-size: 10px }
.form-panel .form-b { font-size: 12px }
.form-panel .form-c { font-size: 14px; background: #0000ff }

They are considered different forms, but they are all form panels and will all have a red background, but form-c can be different. They have different styles attached to them when they need to be different. So when you have HTML structured like this: 

<div class="form-a hidden form-panel">
    <div class="row">
        <div class="col-md-12">Tab 1</div>
    </div>
</div>
<div class="form-b hidden form-panel">
    <div class="row">
        <div class="col-md-12">Tab 2</div>
    </div>
</div>
<div class="form-c hidden form-panel">
    <div class="row">
        <div class="col-md-12">Tab 3</div>
    </div>
</div>

You can see they're different, but the same. ;-)

If you wanted to activate a form, you could easily use jQuery:

function activate(formName) {
    $(".form-panel").hide();
    $("." + formName).show();
}

While it's not truly object-oriented, it definitely makes your JavaScript and CSS a little easier to understand.

Conclusion

While this is just a simple example of how to make your CSS and HTML easier to read and follow, I leave the next steps of my readers to apply their own OOP (object-oriented practices) to CSS, HTML, and JavaScript.

Do you think this was a good example? Can we use OOP in a different way with CSS and JavaScript? Post your comments below to start discussing.