Questions on CSS usages

[Raja]

Hi,

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.

Ex.

CSS classes,

.fs12{font-size:12px}
.tar{text-align:right}
.fc{color:#3defce}
.fw {font-weight:bold}


sources,
<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

Thanks,
Raja

[Billy Hoffman]

Raja,

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

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

--
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 make-the-...@googlegroups.com.
To unsubscribe from this group, send email to make-the-web-fa...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/make-the-web-faster?hl=en.

[Andy Davies]

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.

Cheers

Andy

On 28 Oct 2010 02:05, "Raja" <raja...@gmail.com> wrote:

[Jens O. Meiert]

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

[1] http://www.stevesouders.com/blog/2009/03/10/performance-impact-of-css-selectors/
[2] http://meiert.com/en/blog/20090617/maintainability-guide/#toc-markup

--
Jens O. Meiert
http://meiert.com/en/