Forum Moderators: not2easy
well m wondering about css
should i have different css files for different parts of my website or is it ok to throw as much in there as i need..you know different types of pages have different layouts and texts and all sorts of stuff
Well how big are you talking about..?
Pages that I used to have in HTML with table layout, were coming out at 30-50k, I have managed to strip these down as small as 8-10k by putting all my styles in one external style sheet.
These style sheets range from 5-15k depending on the job. The good thing is that the CSS only needs to be downloaded the once.
You can of course have different style sheets for different pages, but what size are thinking of trying to get down to..?
ZA
For a web banking system my company makes for Canadian credit unions, I had a very tricky situaiton. I needed to allow us to quickly and easily brand an installation of a client (basically changing the colors and images) but my designer wanted to be able to easily change a LOT of things. So I got tired and simply created a Java Servelet that took a bunch of properties and did a brute force conversion into CSS. This code generated CSS that was about 160k. It didn't bother me too much (it wasn't my bandwidth) and it worked. I wanted to rewrite it from the beginning but my manager wouldn't let me rewrite any of it. Not my best work ever.
Everything was fine... except for one thing. JAWS did some VERY scary things. It was completely dysfunctional in JAWS (in certain situations) which was unfortunate given that we were trying to create an accessible site.
For my largest, multi-faceted sites, I try to keep my CSS to 20kb or less, then serve it with some sort of compression so that I only have to send a maximum of 4kb or so. For smaller sites, I can normally keep CSS down to 4-5kb, then if I compress it the download size can often be taken down to only 1kb.
The main thing about a CSS file is that it has to be downloaded first, before any content of your page is rendered. After the first pageview it will be cached fairly reliably; however, that first pageview is your first impression on a visitor and making it as fast as possible is always a good goal.
One way you can sometimes save code is to decide how many "types" of pages you'll have. For instance, my site has some pages with three columns, some with two, and some with only one column. Once you've determined this, choose a CSS id for each type of page. When you create a page, decide what type of page it needs to be, then assign that id to the <body> tag. In your CSS, you can then use the unique <body> id's to target the elements for each type of page you need.
For instance, here's a basic example:
<style type="text/css">
#red {color: #ff0000;}
#blue {color: #0000dd;}
#black {color: #000000;}
</style>
Now say you want a page with red text, just write the <body> tag with the "red" id, like this:
<body id="red">
By using descendent selectors, (#red p.intro { } etc.), you can get very creative with this technique, including layout changes, colors, fonts, anything.
This does result in more overall code for your CSS file, but less than if you tried to achieve everything in a single CSS file without using unique <body> id's. I tend to prefer this method over using several CSS files, as it just makes everything simpler and, with a little practice, doesn't have to bloat the CSS all that much. The trick is to use the unique ID's to make as few changes as possible, just over-write a few values from previous CSS rules.
For my largest, multi-faceted sites, I try to keep my CSS to 20kb or less, then serve it with some sort of compression so that I only have to send a maximum of 4kb or so.
What do i need to set up and where to serve my css with compression?
Thanks in advance.
I went from 4 to 1.5KB
As for the thread topic, indeed a css file can be too big. IMHO, good CSS design should be written as elequently and as thin as possible. Often times, designers can create style bloat. However, with a little work and analysis, you can reduce your code to about 10-25% of the original size.
I generally start big, just to get my design working. Then, I continually take away, and tweak my styles. Tweaking your styles can also involve tweaking your HTML. For example, I was able to save a ton of space on both my HTML pages and CSS by converting my site's layout into a tableless format.
Lastly, search engines like Google care. They will reward you in their serps if you have leaner pages.
I use a non-changing css file and create pages around the static css. I don't create a html page and then create css for that page. I also use a very short naming convention. For example,
t = text, if it begins with "t" I know its for text formatting like so,
.tb{font-weight:bold;}
.ti{font-style:italic;}
.tu{text-decoration:underline;}
.tcr{color:#F00;}
p = padding
.p4,.p4t{padding-top:4px;}
.p4,.p4l{padding-left:4px;}
.p4,.p4r{padding-right:4px;}
.p4,.p4b{padding-bottom:4px;}
bdr = border
.bdr,.bdr_t{border-top:1px solid #F00;}
.bdr,.bdr_l{border-left:1px solid #F00;}
.bdr,.bdr_r{border-right:1px solid #F00;}
.bdr,.bdr_b{border-bottom:1px solid #F00;}
w = width, if number is followed by a "p" it means percent
.w50{width:50px;}
.w100{width:100px;}
.w25p{width:25%;}
.w50p{width:50%;}
bg = background
.bg{background-color:#333;}
This makes my css file very short and reusable on any website anywhere of any size. For example, instead of opening my css file to create a new page with a brand new design I just plug in my css as I go.
<div class="bdr">
<div class="p4 bg">
I learned <span class="tb">everything</span> I know
from <span class="tu ti tcr">WebmasterWorld</span>
</div>
</div>
what about layout?
