CODEWITHSUNDEEP
htmlcss
Vivek Pandey
Vivek Pandey

Reputation: 3555

Using classes extensively to reduce CSS size

I am on an expedition to reduce the size of my CSS file. I thought of the following trick:

I have several elements which use similar properties, like

.a {
   float:left;
   /* Other properties */
}

.b {
   float:left;
   /* Other properties */
}

.c {
   float:left;
   /* Other properties */
}

So, I thought, why not make a separate class selector, say, k:

.k {
    float: left;
}

and then include class selector k for whichever elements require float:left. Thus, we can remove the float: left line from .a, .b and .c Similarly we will have class selectors for all the common properties like float:right, font:normal normal normal 16px/normal arial,sans-serif. This would save lots of characters in CSS file, and lead to a small increase in size of html file.

What do you think about this approach? Would you do it? are there any pitfalls?

Upvotes: 0

Views: 640

Answers (6)

knut
knut

Reputation: 4745

Even though the later HTML specifications ends up talking very little about the class attribute we can see through earlier specifications and discussions that there is a deeper meaning to it. The fundamental idea behind the HTML class attribute is to semantically subclass HTML elements. These pseudo elements are useful for precisely the application you have in mind, which is to further specify the kind of data enclosed within a tag. That means to provide data about data. This data is called metadata. Style sheets are merely one application of the class attribute. That stylesheets can take advantage of this is just a happy consequence. The HTML class attribute is meant for semantics, not for styling purposes.

If you add classes just for presentational purposes and to reduce the size of your CSS files you abuse classes.

Note that there are more to CSS performance than the download size. Rendering performance may be more important in the long run. I would suggest you do the following:

  • Use a tool like Speed Tracer or Page Speed to analyze the performance of your site
  • Minimize your CSS files
  • Remove unused CSS
  • Use some of the CSS frameworks that have been listed in other answers to this question

For more about performance I strongly recommend the MIX11 session "50 Performance Tricks to Make Your HTML5 Web Sites Faster". It is a must see!

You can also share styles between different classes using grouping:

.a
{
    /* Other properties */
}
.b
{
    /* Other properties */
}
.c
{
    /* Other properties */
}

.a, .b, .c
{
    float: left;
}

I have written extensively about the purpose of the HTML class attribute in my blog post "The HTML class attribute: for styling purposes only?" if you are interested.

Upvotes: 0

smilly92
smilly92

Reputation: 2443

If you want to reduce he amount of CSS on your site you should be looking at object oriented CSS. Here's a quick introduction:

http://net.tutsplus.com/articles/lectures/the-top-5-mistakes-of-massive-css/

It uses Facebook as an example and how they reduced their CSS...

Upvotes: 0

toopay
toopay

Reputation: 1635

Thats the right approach in fact. Using inheritance accross CSS class is not just simplyfy your stylesheet, it also make it manageable. In addition, you might need to minify your css in your final output, to maximize its performance.

Upvotes: 0

brodie
brodie

Reputation: 5424

I would recommend looking seriously at using something like Saas for more manageable and readable css

If you're concerned about the filesize of you css files for performance reasons then you should consider minimizing the css with something like YUI Compressor

Upvotes: 2

Saeed Neamati
Saeed Neamati

Reputation: 35822

I think you have multiple options here:

  1. Using Less CSS which provides inheritance and mixin capabilities in your CSS
  2. Use Grid 960 system to make semantic CSS rules (as you described for floating)
  3. Define semantic classes for your elements to address multiple elements at once, and of course, to address one element via multiple classes. For example, an element could have these classes: class='float-left button width-10'

But be careful to not being trapped in the concept of divities and classities

Upvotes: 3

Ilia Choly
Ilia Choly

Reputation: 18557

Most of the time you have most of your css in a few external sheets that are used by every page. These get cached so they only need to be loaded once. Also, you should not sacrifice readability of your markup or css for a hardly noticeable performance boost. Semantic markup is key.

Upvotes: 0

Related Questions