Be Careful Editing Your Blogs CSS

Written by Chris Coyier from CSS-Tricks on December 7, 2007

Most blogs use a single stylesheet to control the design of their entire site. That is where all the magic happens. If you have ever gotten adventurous and wanted to modify your theme, you have no doubt poked around in your blogs stylesheet. Obviously, this is a very important file, so you should be careful with your editing.

Make a backup first

Even if you really know what you are doing, it’s always a good plan to have a backup copy of a version of your stylesheet that you know is in good shape. I like to keep backups in dated folders on my local hard drive, so I know exactly what date I copied the file off the server. You might as well keep these backups around, they are just text files so they take up hardly any room and who knows when you might need them again.

Sometimes you can make edits to your CSS file and think everything is fine, only to discover a page somewhere on your blog that is broken a week later. You’ll be glad you have that back up then. Which leads me to…

After making edits, look at ALL your blogs pages

OK maybe you don’t need to look at every single post in your archives, but at the very least you should look at:

The homepage
Many of your single posts
A “Page” (WordPress)
Category page
Archive page

You should also try to find posts in your archives that make use of things you might not use all the time. View a post with images, ordered lists, unordered lists, definition lists, code samples, etc.

Indent all new or edited rules

If you change one of your CSS properties, give it a little nudge to the right to indicate this a new change and is in a trial period. Then later, after you are happy with the change, you can go back and move it back.

You could also add a comment…or both.

.post li {
    margin: 2px 0px 0px 15px;
    color: #990;
         text-transform: uppercase; /* Just seeing how this looks */
    text-indent: 15px;

“Going commando” vs. Editing local copy

Applications like Coda (mac) make logging into your server and editing live (commando-style) a very easy thing to do. This is a very satisfying way to work, since you can see the fruits of your labor instantly on the web. But of course this is also the most dangerous way to work. Bork your site, and visitors will see it immediately.

If you want to be 100% safe with your edits, you may want to consider installing your blogging platform on your local machine and making your changes there before publishing to the web. If you use WordPress, there are solutions on doing this for Windows here and on a Mac here.

Just do it.

You shouldn’t be afraid of jumping into your stylesheet and playing around. I just want to make sure you do it safely and are prepared in case anything bad happens. In fact, the more prepared you are for disaster, the more adventurous you can be!

Written by Chris Coyier from CSS-Tricks on December 7, 2007 | Filed Under CSS

14 Responses so far | Have Your Say!

Sly from Slyvisions.com | December 7th, 2007 at 7:59 pm #

I ALWAYS make a backup. If I ever lost anything, even just a simple CSS code, I would go crazy! The way I do it though is simple: copying the original file for a backup somewhere else. Even just something like this can be helpful.
Maria | December 7th, 2007 at 8:24 pm #

I once forgot to make a backup-you surely know what happend next THIS won´t happen to me again!!!
Alex | December 7th, 2007 at 9:47 pm #

Yeah, css is a tricky file and backup is definitely a good idea :)I tweak it often enough and find myself having multiple versions of the file with each change.

Using Crimson editor allows you to open new file for each code modification so you could test it and go back to last working version easily. Plus you still have the original backed up. I think a version of the css file at each stage is very important so you don’t loose ALL tha changes but only those that broke your blog.
Sol Lederman | December 7th, 2007 at 10:15 pm #

Also, be sure to check your various site pages in IE if you use Firefox, like I do. I made a change once that looked fine in FF but badly broke in IE.
Chris Coyier | December 7th, 2007 at 11:34 pm #

Glad to hear you guys and gals are making backups. Cheers to never losing important data!

@Sol Lederman: YES. I really should have mentioned that in the article. At the very least people should test the look of their blog after major changes in Firefox, IE6, IE7, Safari, and Opera.
Sol Lederman | December 7th, 2007 at 11:51 pm #

Chris,

Do you have any tricks for checking CSS changes on both IE6 and IE7? I realize that there are significant differences between the two versions so it’s prudent to check both. But, my experience has been that when I’ve upgraded to IE7, IE6 goes away. Where I used to work, the sysadmin had some hack for keeping both versions of IE on one machine but it had some unpleasant side effects. Short of having two machines around, what can someone do?
John | December 8th, 2007 at 12:57 am #

I’ve definitely learned my lesson the hard way. What I like to do is create a separate directory on your host and just mirror your site there. Then you can mess around with the CSS file and figure out how you want it before applying the changes to the main site.
Armen | December 8th, 2007 at 1:48 am #

Good advice, Chris. I need to get into the habit of commenting my code, but, I never do.
James Mann | December 8th, 2007 at 5:15 am #

I have to admit that I have modified the css file for a few of my blogs without backing it up and managed to make quite a mess. It took me a while to fix the mess I made.

It doesn’t surprise me though, I tend to learn things the hard way.

So I would say doing a backup, BEFORE, making any changes is a great piece of advice.
Chris Coyier | December 8th, 2007 at 8:06 pm #

@Sol Lederman: I’m kind of a mac guy, so I’m afraid I don’t have any solutions that I can guarantee are super great. I have heard of some windows software that allows you to install multiple versions of IE, but I haven’t heard super great things about it.

Remember that UNinstalling IE 7 leaves IE 6 behind, so switching back and forth between versions isn’t actually very difficult or time consuming at all, you could just leave the IE 7 installer on your desktop and install/uninstall on a whim.

If you are on a mac, it’s actually a bit easier. You could run Bootcamp with one version installed and then run Parallels or VM Ware with the other installed.

But the best mac solution of all has just been released. If you have a n Intel mac, you can run ies4osx and actually install multiple versions of IE that run right inside OS X. The performance is pretty awful, but it doesn’t really matter. It’s just for testing not really using.
Tibi Puiu | December 9th, 2007 at 12:59 pm #

Thanks for the tips Chris, I always back up all my files, not only stylesheets. Did knew about the local wordpress thingy though, thanks a lot of that.
Online Backup | December 28th, 2007 at 2:15 pm #

Hey Chris,
These are some very good tips! We either run a version control software like subversion, or simply ensure that we edit files offline which are automatically backed up offline. This atleast ensures that we have backup files should we uncover an error in the live site.
Web Designer Group | February 23rd, 2008 at 1:05 am #

Always creating back up is very important and useful not only for CSS/blog/site but all data. The technique you described is nice. Editing locally have many plus points as compared to commando style . Thanks.