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 :)
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!
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!
http://flumpcakes.co.uk/css/optimiser/
Whipping out the comments and spaces will save another 14% :)
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 :) .
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.
How does it decrease file size? A carriage return takes up one byte, same as a space character.
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.
[...] This post from Khaled made me think about the way I write my CSS, have always written my CSS code. I follow the regular one element, one line approach for attributes with more than 2 elements, and a single line for 2 or lesser. I’ve found that the spacing helps me easily sort through files, and find some rogue piece of code. [...]
[...] Broken Kode: CSS File Structure [...]
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. :)
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!
asxeto: how is 'mellow assassin' comming along?
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 :).
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.
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.
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.
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.
Yay for clever code that you will not understand in two months. Yeah baby. I guess I don't have a great mind.
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;
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.
2 Pingbacks to CSS File Structure