DZone
Web Dev Zone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
  • Refcardz
  • Trend Reports
  • Webinars
  • Zones
  • |
    • Agile
    • AI
    • Big Data
    • Cloud
    • Database
    • DevOps
    • Integration
    • IoT
    • Java
    • Microservices
    • Open Source
    • Performance
    • Security
    • Web Dev
DZone > Web Dev Zone > Think of CSS and HTML as Classes

Think of CSS and HTML as Classes

Your object-oriented skills aren't just for coding. Today, I show you how to apply your object-oriented knowledge to make your CSS and HTML more readable and functional.

Jonathan Danylko user avatar by
Jonathan Danylko
·
Jul. 06, 16 · Web Dev Zone · Opinion
Like (3)
Save
Tweet
3.66K Views

Join the DZone community and get the full member experience.

Join For Free

For most developers, they don't care for CSS because it's too much of that design-y stuff. They need code!

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.

CSS HTML

Published at DZone with permission of Jonathan Danylko, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

Popular on DZone

  • When Microservices Are a Bad Idea
  • How to Submit a Post to DZone
  • Java Class Loading: Performance Impact
  • Exploring a Paradigm Shift for Relational Database Schema Changes

Comments

Web Dev Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • MVB Program
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com
  • +1 (919) 678-0300

Let's be friends:

DZone.com is powered by 

AnswerHub logo