Be Careful Editing Your Blogs CSS
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-TricksPosted on December 7th, 2007 and filed under CSS
Do not forget to subscribe to our RSS feed for updates
15 Responses to “Be Careful Editing Your Blogs CSS”
Author comments are in a darker gray color for you to easily identify the posts author in the comments
Comments are closed.
Comments are closed since this post is older than 30 days. However, you can continue this discussion in our popular Blogging Forums
Blogging Tips Sponsors
Blogging Tips Newsletter
Sign up to the Blogging Tips Newsletter for Free! What have you got to lose?
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.
I once forgot to make a backup-you surely know what happend next
THIS won´t happen to me again!!!
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.
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.
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.
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?
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.
Good advice, Chris. I need to get into the habit of commenting my code, but, I never do.
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.
@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.
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.
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.
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.
I usually save html page form my blog and edit it to point to local copy of CSS. After that I edit CSS checking it on saved page. When it’s done – I upload.
I don’t make CSS backups but I mostly comment rules out instead of erasing them. Next time if everything is ok I clean up those obsolete rules.