A Little Help
I’m in the process of writing a few new articles for this site, and I thought I’d let you in on one and get some of your help. The article I’m speaking of is called ‘Writing Lean CSS.’ I have several tips of my own currently, but I don’t consider myself to be the ultimate authority on CSS. I’d like to hear from you any tips that you have seen or have used to trim down a CSS file. And just to give some people motivation, I have Gmail invites for the two best tips.
Here’s an example of one of my tips, to give you an idea of what I’m looking for:
Define the most common font attributes in the
bodydefinition of your CSS file instead in each individual element. Then change or overwrite those attributes in areas that you want them to be different. Example:body {<br /> font:normal x-small/1.4 Verdana, Arial, Helvetica, san-serif;<br /> } <br /> <br /> h1 {<br /> font-size:130%;<br /> font-weight:bold;<br /> font-family: Georgia, Times, serif;<br /> }
So add your tip. I’ll give credit to any I use in the article. And don’t forget about the prize.
Post and Author Info.
Published August 26, 2004 by:
Commenting is currently off for this post.
So far there are 9 comments.
If you haven’t seen it already, check out Eric Meyer’s recent controversial post about using the b tag instead of the span tag and the subsequent followup. I guess Eric gets the gmail account if this post makes the cut.
August 26th, 2004
I split my CSS into separate chunks – and only include the chunks that are used on a particular page, for example:
<link rel='stylesheet' type='text/css' href='layout.css'/>general site layout and look. This is included on every page to establish the overall look and feel.
<link rel='stylesheet' type='text/css' href='form.css'/>not every page has forms so this css is included to style forms only when we use them.
<link rel='stylesheet' type='text/css' href='tables.css'/>now we’ve moved away from tabless design (hopefully) its very rare I use tables on more than a few pages. Why include it if we aren’t going to use it?
you get the idea…
Of course, once all three style sheets are cached, the saving becomes minimal but it realy helps to keep your css organised :-)
August 26th, 2004
One thing that I do is single line declarations. The main reason is that css files tend to get long with multi-line declarations. I hate scrolling through them. Instead, I do each declaration on one line, and sometimes two lines to make my files shorter and easier to find what I am looking for. There isn’t much a filesize difference, but there is a huge difference in the number of lines. Also, one thing to remember when using single line declarations is to make sure all your opening brackets line up. This makes it much easier to read.
To visually see what I am talking about you can view the examples I have place on my site. The files have identical css, simply formatted with either single or multi-line declarations.
My style:
Single-line CSS
Multi-line declarations:
Multi-line CSS
The difference between them is pretty obvious:
Single – 124 lines
Multi – 423 lines
I would call that cleaner, but to each his own.
August 26th, 2004
Well, I can think of a few things that I like to use, but I’m not sure how useful they’d be to you. I’ll let you make the call :)
If you want two different things on your site to be styled similarly, but not identically, you can use multiple classes in your HTML. For example, I wrap each post and certain other blocks of content on my site in the same light grey box. I want to decorate the first line of each post, but I don’t want to decorate the first line of the other blocks. So posts get wrapped in: “, and everything else is wrapped in just “. Then, in my CSS, I have:
.content {<br /> /*stuff to style the box*/<br /> }<br /> <br /> .post h1+p:first-line {<br /> font-variant: small-caps;<br /> }<br /> <br /> .post h1+p:first-letter {<br /> font-size: 18px;<br /> }Also, you touch on “descendent combinators” (ugh) with your tip about `body`, but you could mention that the same goes with any other elements. So if you want all your top-level headers in Helvetica, you could have:
h1 {font-family: Helvetica; } <br /> .foo h1 {font-size: 20px; }<br /> .bar h1 {font-size: 15px; }And there’s always good old groups of selectors:
h1, h2, h3 {font-family: Helvetica; }And shorthand declarations:
blockquote {padding: 15px 5%; }<br /> <br /> /* instead of... */<br /> <br /> padding-top: 15px;<br /> padding-bottom: 15px;<br /> padding-left: 5%;<br /> paddding-right: 5%;That’s all I can think of for now. This is definitely too long a comment. I already have a GMail account, but that tutorial on curving the ordered list was just awesome, so I figured I’d (try to) contribute back. Ugly IIS error when I tried to post this the first time…
August 26th, 2004
Bah, tried running that through Markdown first, then botched the manual edit when that didn’t work. Sorry about that. Last line of the second paragraph should read:
Posts get wrapped in:
<div class="post content">, and everything else is wrapped in just<div class="content">.August 26th, 2004
I often use
* {<br /> padding: 0;<br /> margin: 0;<br /> border: 0;<br /> }It’s not often (though it happens) that I want the default margins and paddings, so this lets me remove many padding and margin-declarations from other elements. When i want default forms i take out the border-declaration.
(I already have a gmail)
August 26th, 2004
This may or may not meet the criteria of “lean” but one thing I find useful is to create a simple stylesheet of what I call “global” classes. These include things like .floatLeft {float: left;} , .clearBoth {clear:both;}, .noBorder {border:0;}, .noPad {padding:0;}, .black {color:#000;} etc etc…. Just all the simple little commands that you might use often.
This same stylesheet can be linked into multiple sites at the same time, or you can just copy and paste the same block of globals into whatever stylesheet you are working on. I tend to work on 3-5 sites concurrently, so now I can just zap in a .floatLeft class if if I want to float an img to the left, and not have to check back through multiple stylesheets to see of I’ve put this command in yet.
When browser support gets better for multiple classes ( img class=”floatLeft noPad noBorder” ) then this technique will be even more useful, as you can use the same basic commands, then customize other classes for site-specific elements. Until then, you can still use an id to assign more classes to an object which is already using a global class.
August 26th, 2004
Maybe this is not what you meant, but I think lean css starts with crunching the file size.
I like having two versions of a style sheet.
One has white space, comments, redundant declarations, and css written the long way. My second copy of the same style sheet is almost free of white space, comments, redundant declarations, and long declarations and properties.
I do this with topsyle pro and the sweeper tool. It removes comments, white space, redundant declarations, as well as it re-writes my code to short hand.
I can cut the file size of a css document in half, and in most cases maybe more. Now that is what I consider lean css.
August 26th, 2004
So I already have a Gmail account, but I have a tip that I think will help in a lot of instances… at least it’s made my life theming sites easier and I can’t think of a reason not to do it.
So I start out with a rule similar to yours:
body {<br /> font: normal 76%/1.4em Verdana, Arial, Helvetica, san-serif;<br /> }And then I do what you do, except that I create font rules first and then add classes and ids to them. See how it work in reverse? So I’ll create a basic set of unapplied styles like so:
{font-size: 0.8em}{font-size: 0.9em}{font-size: 1.0em}{font-size: 1.1em}{font-size: 1.2em}{font-style: italic}{font-weight: bold}And then as I’m working, I’ll adding classes and ids to the font rules, as needed:
.small {font-size: 0.8em}.small, .copyright {font-size: 0.9em}.content, #slogan {font-size: 1.0em}h3 {font-size: 1.1em}h1, h2 {font-size: 1.2em}.copyright {font-style: italic}h1, h2 {font-weight: bold}This way, not only are all my font sizes in one place, but I can keep track of what formatting is being applied to elements all over my page and can track down issues of overlap when a element might be getting downsized twice (in the case of
.small).Additionally, if you want to relatively resize an element compared to another, everything having to do with fonts are located in one convenient place. And all I have to do is find that element and reassociate it with a different style. This tip is particularly handy when creating a theme that may contain a couple hundred lines of classes and you’re collaborating with multiple authors. Having your font options prespecified can save a lot of hassle later on when trying to make things consistent.
August 26th, 2004