Questions on CSS usages

Skip to first unread message


Oct 27, 2010, 8:51:55 PM10/27/10
to Make the Web Faster

i have written below CSS classes in such a way that most commonly used
styles into separate class so that i can use it across my pages.


CSS classes,

.fw {font-weight:bold}

<div class="fs12 fc fw tar"></div>

<div class="fc fw tar"></div>

I have added too many css classes into a html element. Will it affect
the page speed / page weight?. please help me on this


Billy Hoffman

Oct 27, 2010, 10:26:45 PM10/27/10
to make-the-web-faster

As with most performance optimizations what does or does not decrease size or improvement performance will vary depending on the site's content and structure. Just remember that whether a fast solution is also a "good"/"correct"/maintainable solution is another story entirely.

My gut tells me this is a poor approach. Your classes are so specific and granular that you are essentially replicating using a "style" attribute on every node. In words others <span class="fs12 fc fw tar"></span> is not much better than <span style="font-size:12px; color:#3defce; etc"></span>. I have a feeling you are going to be duplicating *a lot* of style combinations over and over again.

People often forget that the C in CSS stands for Cascade. You should define common things your font-face, text-align, and font-size only one the high level elements like body and let them cascade. Only override these values when necessary. Read anything Nicole Sullivan has written about about CSS, especially her "Massive CSS mistakes" presentation.

Good luck,
Billy Hoffman
Founder and CEO,
Zoompf - Making Websites Faster
Phone: 404-414-2000
Get your free web performance assessment today at

You received this message because you are subscribed to the Google Groups "Make the Web Faster" group.
To post to this group, send email to
To unsubscribe from this group, send email to
For more options, visit this group at

Andy Davies

Oct 28, 2010, 5:09:10 PM10/28/10

Have a hunt for Nicole Sullivan's (@stubornella) presentation on OP CSS.

It'll be on her blog or slideshare somewhere and should give you some good ideas.



On 28 Oct 2010 02:05, "Raja" <> wrote:

Jens O. Meiert

Nov 2, 2010, 1:52:55 AM11/2/10
> .fs12{font-size:12px}
> .tar{text-align:right}
> .fc{color:#3defce}
> .fw {font-weight:bold}
> I have added too many css classes into a html element. Will it affect
> the page speed / page weight?. please help me on this

I, too, think that the effect on rendering speed should not be
significant—see e.g. Steve Souders’s work on selectors [1]—however you
are guaranteed to run into maintenance issues. Consider using
functional or generic ID and class names [2] (they may very well be


Jens O. Meiert

Reply all
Reply to author
0 new messages