CSS Wishlist: Extendible CSS

With more people viewing the web over high-speed connections and through mobile devices across cellular networks, bandwidth has become a major consideration when designing/developing websites.

While the bandwidth usage of CSS files tend to pale in comparison to the obvious big guns such as video, images, and other media, CSS bloat is still a problem. There are methods out there to organize/reduce the amount of CSS we create but it would be wonderful to have a mechanism that would allow us to reuse CSS rules without having to add classes to markup.

For example, if you have a site that uses links that are styled like buttons, you may have some HTML like this:

<a href="sign-in.html" class="btn">Sign In</a>

And some CSS like this:

.btn {
background: #f00;
border: 1px solid #900;
display: block;
padding: 8px;
width: 100px;
}

This gives you some CSS to create a basic red button. If you want to create a new button for “Sign Up” which is green, you can add an ID and style that:

<a href="sign-up.html" class="btn" id="sign-up">Sign Up</a>

#sign-up { background: #0f0; border: 1px solid #090; }

Pretty simple. As your site grows, you may want other green buttons. So what do you do then? Do you add another selector to your styles like:

#sign-up, #next-step { background: #0f0; border: 1px solid #090; }

or do you go in favor of declaring a separate class for all of your green buttons like this:

.btn-green { background: #0f0; border: 1px solid #090; }

and add the class to your markup?

<a href="sign-up.html" class="btn btn-green" id="sign-up">Sign Up</a>
<a href="logout.html" class="btn btn-green" id="log-out">Log Out</a>

The class route seems like a good way to go until you decide to change the color of the button to blue. Then you would have to create a new .btn-blue CSS class AND change your markup.

I wish there was something we could use that would import the properties of other classes and apply them. The way I’ve been thinking that it would work is something┬álike this:

.btn { border: 1px solid #000; padding: 4px; background: #0f0; }
.red-btn { background: #f00; border-color: #600; }
.join-btn { inherit: .btn .red-btn; color: #fff; font-size: 20px; }

By inheriting a class, you could apply the properties to your new class. You could then inherit additional classes and/or apply additional CSS. This would allow you to quickly change styles without having to add to/change your mark up. It would also cut down on code and help keep your markup free of presentational attributes.

We have seen a huge increase in the capabilities of CSS with the implementation/support of CSS3 and I’d love to see something similar to what I propose above come down the pipeline because I think it would be a great benefit to designers.

Leave a Reply

Your email address will not be published. Required fields are marked *