I’ve optimized my CSS writing style
Author: Stefan Vervoort | Please Comment!The latest couple weeks I have been working on a new website and I have used a new CSS writing style. It was kind of ‘getting used to’, but after that was done, things were finished a faster way.
So what do you mean?
When a guy started learning HTML and CSS, they usually learn that from the millions of guides on the internet. I did. We learned to organize our properties under eachother in a class. In my opinion, that way could be optimized.
In the example below I will give you a before/after view and a couple arguments why you should change your writing style.
Before:
p{ color:#333; line-height:150%; border:1px solid #555; float:left; background:#fff; }
After:
p{ color:#333; line-height:150%; border:1px solid #555; float:left;background:#fff;}
You see what happened? All the elements are next to eachother, which gives you a great advantage: you have less scrolling to do. Often, our CSS files tend to get un-organized, as we are writing more and more CSS classes in that file. With my new way, you can see all the classes and ID’s at once without or less scrolling.
Here’s a little example:
Say, we usually have 30-40 classes and ID’s in a normal CSS file. One class include around 4-5 lines of CSS. This means we have around 120-200 lines. With my new writing style, per class we use around 1-2 lines of codes. This gives you an CSS file of maximal 80 lines. Your profit is 40-120 lines of code!
Less scrolling, easier debugging
You will find your classes and ID’s much easier inside this organized mess, as looking through a un-organized shit-hole of 200 lines. I think that should be clear by now.
Another example, yes?
We, CSS designers, always are on the lookout for bugs and errors in our design. The problem is, it always looks good in the normal browsers, but Internet Explorer 6 is always bugging. The problems are never that big, so all we have to do is changing a couple lines and adding a couple fixes. It is much easier to look through 80 lines compared to 200 and the result was there, the de-bugging was done in a breath.
My questions to you
How are you writing your CSS? The ‘old-fashioned’ way or the introduced method? If you prefer the old way, did you try my ‘new’ method in the past? Why didn’t that work for you?
If you have your opinion ready on this writing style, let me know! Comment and tell why the users should or should not use this method!
Loading ...
Loading...
10:16 pm on June 19th, 2008
G’day there!
I actually switched the other way around a while back … I was using the one-line-method but in most of my sites these classes tend to get very big and that is difficult to debug as well.
I think the best way would be a compromise between the two:
p {padding: 20px; color: #666;} /* Simple line */
div#menu {
position: absolute;
left: 10px;
top: 100px;
width: 490px;
height: 20px;
padding: 5px;
border: 1px solid #aaa;} /* Bigger line */
12:22 am on June 20th, 2008
I usually don’t stick to this method in development because it’s lot more of a pain to edit than having it spread out. If you order your css like html, top items at the top, then work your way down to the bottom it’s still easy enough to work with… then you can make it fancy when it goes live.
3:26 am on June 20th, 2008
I do write my code the old way. But once I get the CSS debugged and looking right in all the enviroments I reformat it to a slightly more tighter formatting system using less lines but for time editing sake if there is a change to be made I keep an original copy of the style sheet.
11:13 am on June 20th, 2008
Thanks for the comments guys. Seems like a lot of you use the old method.
@Ruud - That problem occurred to me as well, but that can be solved with your tab button. If you ‘tab’ between each element your class will become a bit bigger, but it will be organized. And you have less scrolling to do.
@Chris - Like I told Ruud here above, you could add some tabs between the elements. It stays organized and in my opinion it is easier to edit and debug as well. It definitely speeded that process up.
@Kip - That’s smart, but you should always keep your backup copy ready if something goes wrong. What CSS optimizer do you use?
6:55 pm on June 20th, 2008
hi there!
I don’t agree with you in this case. I rather write my css in multiple lines than just in one. You may be have to scroll more, but it’s much easier to navigate and to see all the properties.
1:18 pm on June 22nd, 2008
@Thiemo - In my opinion and experience it is almost the same in the ability to navigate. Both works good, but in this way you have less scrolling to do:). Thanks for your comment.
8:04 am on June 23rd, 2008
I think the “old” way is much more comfortable to work with.
4:22 pm on June 23rd, 2008
I think the old style better, more clear
6:20 pm on October 25th, 2008
I began writing CSS in the single-line form, then switched to the old form when I saw the beauty of it, and am back in the new style once I realized the optimization benefits.
Now that I use single-line CSS, I don’t find the need of using a compressor - there is very little that can be saved.