Using classes extensively to reduce CSS size

Question

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?

Sounds like you are wanting to try something similar to Object-Oriented CSS. Nicole Sullivan thinks it's a good idea. Personally I'm not so sure about this approach but according to her speech Facebook implemented it and not only cut their CSS size but also their HTML size. — Useless Code
– Useless Code, Commented Jul 28, 2011 at 5:21
What you are proposing is not semantic CSS, it's shorthand for style attributes. So, all the negatives for style apply. I would not recommend this approach, since it makes it very hard (or impossible) to restyle with stylesheets, since the style will be tightly locked to your markup. — Nicole
– Nicole, Commented Jul 28, 2011 at 5:24
@Renesis: That's a valid point. Following this approach, if I want to change style of certain element, I would have to edit my html instead of CSS file, which is not a good idea. — Vivek Pandey
– Vivek Pandey, Commented Jul 28, 2011 at 5:29

Saeed Neamati · Accepted Answer · 2011-07-28 05:19:14Z

3

I think you have multiple options here:

Using Less CSS which provides inheritance and mixin capabilities in your CSS
Use Grid 960 system to make semantic CSS rules (as you described for floating)
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

answered Jul 28, 2011 at 5:19

Saeed Neamati

35.9k42 gold badges140 silver badges192 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

brodie · Accepted Answer · 2011-07-28 05:26:33Z

2

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

edited Jul 28, 2011 at 5:26

answered Jul 28, 2011 at 5:20

brodie

5,4444 gold badges35 silver badges28 bronze badges

Comments

Ilia Choly · Accepted Answer · 2011-07-28 05:17:36Z

0

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.

answered Jul 28, 2011 at 5:17

Ilia Choly

18.6k14 gold badges95 silver badges166 bronze badges

Comments

toopay · Accepted Answer · 2011-07-28 05:58:10Z

0

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.

edited Jul 28, 2011 at 5:58

answered Jul 28, 2011 at 5:19

toopay

1,62311 silver badges18 bronze badges

Comments

smilly92 · Accepted Answer · 2011-07-28 06:20:09Z

0

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...

answered Jul 28, 2011 at 6:20

smilly92

2,4532 gold badges24 silver badges43 bronze badges

Comments

knut · Accepted Answer · 2011-08-02 20:51:26Z

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.

Collectives™ on Stack Overflow

Using classes extensively to reduce CSS size

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related