How to speed up by optimizing CSS code?

Hi,

I'm a bit old-fashioned in coding CSS. I'd like to learn, be open to new techniques regarding coding...

I think I could speed up my site by rewriting, shortening, optimizing my CSS code...
Generally I have 500-600 lines in my CSS file. Could it speed the site up, let's say if I'd shorten that to 300-400 lines?

Would it be better to write this (instead of column-like formation):

In a line-like layout/formation (?):

h3{
	font-family: 'Calibri'; font-weight: bold; font-style: normal; font-size: 24px; color: #A2C6DA; text-indent: 0px;
	margin-top: 0px; margin-bottom: 0px;
	}

Code (markup):

Is there an "ideal order" for the elements of the CSS code?


I know there are more modern ways of writing old type of code... Any advice?

Any advice on optimizing CSS code is welcome. I'm trying to learn new techniques right now.

 

h3{
font: bold 24px 'Calibri', 'other-microscopic-fonts-since-not-everyone-has-Windows-7-or-vista', default-family;
margin: 0;
}

Please add a whole font stack, and then also please don't pair a tiny itty bitty font like Calibri with a large readable font like Verdana. Calibri at 24px is kinda medium-sizes, but Verdana has a large x-height and will look ginormous, and if your text is in a box, users with Verdana and no Calibri get ginormous text.

read more: http://sixrevisions.com/web_design/a-comprehensive-guide-to-microsoft-vista-fonts-for-designers/

Honestly, you can avoid listing things that are already defaults, and you can safely use CSS shorthands (font, background, margin, padding, border are examples of shorthands). Only caveat with shorthands is knowing the little quirks with overriding things.

Font-style is "normal" on headings by default, so no point listing it (only if you already made all headings something different first). Bold is also already a default but if we use the font shorthand we have to list it. Keeping font declarations separate as you had it though, you would not need to mention bold then either.

If there are a lot of elements you find yourself setting to some personal default all the time everywhere, you may want a CSS reset. Don't google that, it brings up bad advice. But it's not uncommon for web developers to list, near the top of their CSS sheet, some "defaults" they like to have (usually margin and padding):

html, body, form, fieldset, ol, ul, dt, dd, th, td {
margin: 0;
padding: 0;
}
(the elements above tend to have default margins or padding assigned to them in various browsers. For example, th's and td's get just 1px of padding in Gecko (Firefox etc) which in most cases you won't see so don't worry about removing it... but if you're making very tiny table cells (such as a calendar) then that 1px will make a difference. If you don't have any forms on your website, don't waste bytes removing their margin or padding. This is why I call these defaults "personal preference", because it depends on what you need to do and what you don't want to write over and over again.)

img {
border: 0;
vertical-align: bottom;
}
Are you adding "border: 0;" to each instance of an image? Do it once at the top. You can easily override when you come to an image who does need a border.
Mysterious gap under images when you leave them inline? Set images down to the bottom once. You can always change it for any particular image.
etc.

 

I think this article explains it all: coding.smashingmagazine.com/2008/08/18/7-principles-of-clean-and-optimized-css-code/

 

Honestly if you have enough CSS that whitespace/newline stripping makes a difference, you've got too much poorly written CSS.

The kitty is correct in that you should probably be using a condensed font stack. 90% of what you are saying as separate values can be declared all at once as ONE property... and also correct in that you shouldn't just be saying one font on font-family, always include fall-backs as not everyone is going to have the core Microsoft fonts installed... like say Linux and OSX users. Another thing you don't have is a line-height. NEVER trust the default line-height to inherit properly.

Let's see.. what else. When it's zero you don't have to say 'of what' -- zero is zero. No text indent is the default so you shouldn't have to be saying that (unless you messed with it on a parent element)... and I don't know what you're side paddings/margins are on your h3, but zeroing the paddings/margins globally at the start usually results in a smaller file and less headaches as well. (The so-called resets).

It's funny, you've got too many properties from a lack of using the condensed versions and use of defaults, while at the same time lack

Also, depending on the page it's usually a bad idea to declare something like a 3rd tier heading in PX. Hopefully you didn't do that on your content too. I probably also wouldn't use calibri on a web page since it's not really a great screen rendering font and doesn't exist on machines that pre-date five years ago. (it was introduced with office 2007)

I mean, for one of my pages that would probably read:

h3 {
  font:bold 175%/120% calibri,arial,helvetica,sans-serif;
  color:#ACD;
}

Code (markup):

With a zero margin having been set by my reset. The 120% being the line-height since I don't trust the default to inherit. Likewise you'll have some people claim you can omit a metric (%/px/em) on the line-height, I've found that to be completely unreliable nonsense. (despite what some of the re-re's over at Sitepoint stick their heads in the sand and do Vancome lady impersonations in regards to it)

Oh, and @SP -- you know I've NEVER once need the vertical-align:bottom thing on IMG tags -- but then I usually either float them or set them to display:block -- or want them vertical-align:center for things like smilies. Seems like the cases where people 'need' that setting tend to be situations where the image is presentational and has no business in a IMG tag in the first place.

 

Well I know I'm old-fashioned and rather go for how the site displays than what's fashionable in CSS writing. But I'm determined to shrink the code, thanks for the useful advice everyone!

 

So long as all your images are block context, you don't need to set vertical-align to anything-other-than-baseline. But I've had instances where they are inline, or inline-block (like inline icons, which give me inline alt-text) where the gap is retarded. Vertical-align: middle does the same thing as "bottom" as far as removing descender gaps.