PureNews

PureNews is an amazingly sleek and powerful news theme with unlimited color variations.

View full feature list Check out the live demo Buy this theme today

Be Careful Editing Your Blogs CSS

Posted by on 7th Dec 2007 CSS 16 comments

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!

16 comments - Leave a reply
  • Posted by Sly from Slyvisions. on 7th Dec 2007

    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.

  • Posted by Maria on 7th Dec 2007

    I once forgot to make a backup-you surely know what happend next :-( THIS won´t happen to me again!!!

  • Posted by Alex on 7th Dec 2007

    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.

  • Posted by Sol Lederman on 7th Dec 2007

    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.

  • Posted by Chris Coyier on 7th Dec 2007

    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.

  • Posted by Sol Lederman on 7th Dec 2007

    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?

  • Posted by John on 7th Dec 2007

    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.

  • Posted by Armen on 7th Dec 2007

    Good advice, Chris. I need to get into the habit of commenting my code, but, I never do.

  • Posted by James Mann on 8th Dec 2007

    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. :)

  • Posted by Chris Coyier on 8th Dec 2007

    @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.

  • Posted by Tibi Puiu on 9th Dec 2007

    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.

  • Posted by Online Backup on 28th Dec 2007

    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.

  • Posted by Web Designer Group on 22nd Feb 2008

    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 :cool: commando style :cool: . Thanks.

  • Posted by Rarst on 20th Aug 2008

    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.

  • Posted by ansel smith on 8th Sep 2010

    Nice…
    You can take up backup before making any changes