CSS File Structure
For my latest redesign (and on the other sites and programmes I’m working on) I’ve structured the CSS file somewhat differently. Rather than having what has become CSS convention of having every element of each class, id or whatever on a separate line:
[css]h1{
padding: 0 0 35px 0;
margin: 0 0 25px 0;
font-size: 2.0em}[/css]
I’ve instead decided to put everything onto one line:
[css]h1{ padding: 0; margin: 0 0 25px 0; font-size: 2.0em}[/css]
What does this do you ask? The single most important thing in a CSS file, it makes it manageable. It makes it easy for me to actually edit the damn thing a few months down the line, in a quick and easy way. Rather than scrolling down 500 lines of code, I’m scrolling down 150 lines. The main structure for me is done in programmes like Bluefish or CSSed, however a lot of the editing and tweaking is done within Firefox, so I need to have the easy for scrolling down quickly.
The added bonus of this method is that it reduces the size of my file at the same time. I honestly started thinking why the hell I didn’t do this earlier as it just makes oh so much more sense to condense the file.
I’ve started doing the same thing. Editing is much easier and faster that way :)
↓ Quote | 24/10/2006
I’ve been doing this for my CSS for ages. I just thought I was weird as everyone else seemed to format differently. I am not alone - hurrah!
↓ Quote | 24/10/2006
I’ve been working like that for a while and even wrote up an entry on it and a bit more: http://mondaybynoon.com/2006/02/19/write-better-css/
All in all I find it much easier to keep the styles more organized. Some people feel that it’s nicer to have each property on its own line for quick finding, but I seem to find what I need quickly just from the selector I aim to adjust.
Good tip!
↓ Quote | 24/10/2006
http://flumpcakes.co.uk/css/optimiser/
Whipping out the comments and spaces will save another 14% :)
↓ Quote | 24/10/2006
Mahud, Rob, Jon : Great minds think alike :)
Podz said:
Interesting link Podz. However I do like to have the minimal comments. I’ve even cut these down if you can believe it :) .
↓ Quote | 24/10/2006
Kudos Khaled. I’ve been doing the same for some time. In the beginning it was just laziness but it turns out I like to have everything on one line. It really does make it easier to find particular rulesets, which is often more important than finding a particular property. And if you group your properties, even those can be easy to find.
↓ Quote | 24/10/2006
How does it decrease file size? A carriage return takes up one byte, same as a space character.
↓ Quote | 24/10/2006
Jonathan Snook said:
I’ve not come up with the best way to group things yet to be honest. I know that aspect of the file really does need a bit of thought. Should they be in alphabetical order to ease in finding things? Should I put the ids first followed by the classes? All up to personal preference I guess, but it would be good to have an easy to follow convention.
Tim McCormack said:
Tim, honestly I don’t actually know because that’s exactly what I thought but by doing this I shaved off at least 2k off the file size.
↓ Quote | 24/10/2006
Well, I don’t go so far as to put everything on one line, I have a hard time reading things that way. But, as to how I order my CSS I start with all the tags and their general styles like abbr, cite, a, etc. Then I just work down through the structure of the page.
* wrap
* header
* menu
* content
* footer
* special classes
I think that works for me. I could be wrong and I’m just wasting hours. :)
↓ Quote | 25/10/2006
Glad you joined the club! I’ve switched back to this method too - and to be fair, this is how it used to be done ages ago, before multiple lines became ‘in’.
Khaled said:
Tim, honestly I don�t actually know because that�s exactly what I thought but by doing this I shaved off at least 2k off the file size.
It saves absolutely nothing from your bandwidth bill. Most servers have GZIP compression on*, and if they do, your whitespace will be compressed perfectly. Thus, it makes no difference in ’sent’ file size.
*And really, if it’s not - ask them to!
↓ Quote | 25/10/2006
asxeto: how is ‘mellow assassin’ comming along?
↓ Quote | 25/10/2006
Stathis said:
Sorry, remind what Mellow Assassin is again? :). In other asxeto news, tell Yiota I’ve started her portrait, looking damn good if I do say so myself, and I am :).
↓ Quote | 25/10/2006
Chris said:
I smell another CSS post in the making actually, since I’m going down this redefine how a CSS file is put together and trying to set up some conventions that actually make sense (with respect to a blog I guess), could be a pretty useful exercise. As for not putting them all on one line, seriously if you do this, you’ll think to yourself why the hell did I not do this from before. It saves soo much time and effort.
↓ Quote | 25/10/2006
I put shorter one in one line, but ones that has many properties I still tend to write them in the conventional multi-line way. In a way, at least for me, if the line is too long I am not too fond of scrolling horizontally to see everything.
↓ Quote | 25/10/2006
Quite honestly, I think it depends how you work. I’ve had to use this structure in the past and I work about 50% slower. I use the find function in my CSS files more than I can count.. but see, I navigate text files with my keyboard. Keeping everything on a different line allows lightening fast selection/modification of properties.
So… don’t be so quick to say it’s a one solution fits all. Just depends on how you work.
↓ Quote | 26/10/2006
Kyle said:
I’m not exactly sure how you work Kyle (but I’ll believe you, but you’re a slightly different case). From my part however having everything on one line reduces the need for scrolling down significantly, to the point where you just look and it’s there in front of you. There will be the odd property which might be a bit long (I’ve got a 19inch screen and word wrap enables, and even then that’s not very common). I guess I was caught up in the old convention that I forgot that there was another way that works better for me.
↓ Quote | 26/10/2006
Yay for clever code that you will not understand in two months. Yeah baby. I guess I don’t have a great mind.
↓ Quote | 26/10/2006
Well, believe it or not, putting everything in one line is not considered a good practice by most people in programming world. Most programmer will do style A then B
Stye A:
string firstName;
string lastName;
string address;
Style B:
string firstName, lastName, address;
↓ Quote | 27/10/2006
I’ve been keeping all of my CSS like this for the past 6 months I’d say. I also take out all of the whitespace in each selector like “font-size: 2em;” would be “font-size:2em;”.. it all adds up.
↓ Quote | 5/11/2006