socialgo

5 CSS Hammers for 5 Jobs

Published by: ezra vancil on 24th Jan 2009 | View all blogs by ezra vancil
If your like me you have a mound of tools in your garage but know where everyone is and the reason you bought each one. My wife asks why i need another hammer when i have four in the garage, well, of course, it's because one is a tacker, another a roofer, a decker and a nut scratcher. Duh! I'm the same way with CSS inspectors, I have a bunch and they all help me in different ways and in different circumstances, and, of course they are all firefox plugins.

firebug.jpg

Firebug

This is my big ass deck hammer... You probably have heard of this one or have it. In it's most basic use, it allows you to analyze visually the html next to the CSS. f I use this allot when I can't seem to find a sneaky attribute or tag in dreamweaver or cssEdit. for some reason I always find it with this little bug. It does allot more too, like inspecting DOM, which has helped me a ton lately on finding how a certain effect is constructed on a site. But, overwhelmingly I use it at the very end of designing my network. After I've carefully coded my page design in a css editor I plop it in socialgo and low and behold my footer is shooting off 20 miles to the west. This is usually because I deleted a CSS declaration instead of replacing it, and now the socialgo template is trumping my selector. So, I pull it up in firefox, find the offending selector and fix it right there, copy and paste it into my CSS. (IMPORTANT! Remove the code line data!!! or your $%^&) So it's more like a de-bugger for me.

cssviewer.jpg

Css Veiwer
This is my tack hammer I use all over the house and is always in close reach. It is a very simple plugin and does it's job beautifully. Just hover over an  element   and you get a very easy to read style guide to that element. Ya firebug does this too, but this is for quickies when I'm on a site and I just want to see quickly and clearly how someone accomplished an effect. You don't have to go back and for to the firebug window pain, it just pops up on screen and you are enlightened and face a deep moral de-lima whether you will just swipe it and run, or actually learn something and do it yourself and escape the fires of web developer hell where you are force to view all your creations on IE5 (mac) on a 600x401 screen (it's that one extra pixel that kills you) for eternity.

editcss.jpg

EditCSS
Just recently turned on to this one and man it's cool. It's my big fat monkey roof hammer (that I know all too well). I can just pound away and always seem to hit something I'm supposed to. Once I have been working on my style sheets for a couple of weeks I can read them like Joseph smith (mormon founder) throu a funky hat, one selector at a time. So when I know it this well it's easy to open up EditCSS and make a few big changes on the fly. firebug doesn't allow you to add selectors (if I'm wrong please help) though you can add declarations. You can addanything with EditCSS and watch it change on the fly. This would be great for those of you that want the live preview but don't want to drop the dough on CSSEdit, or that other PC version that just slipped my mind.    


Web Developer 
This one is my scratcher hammer. I used to use it much more than I do today. the CSS editor is a steaming pie and some other functions also are useless in my book. I actually
said I liked this plug-in on a podcast, I think I was mixed up. But I do scratch with it every once in awhile and where it gets the itch is downloading style sheets for my network, keeps the format most of the time when I just copy and paste and of course you can just use the url it gives you.

 
I have a few others but they are just nostalgia. Enjoy, and let me know which one is your favorite hammer.
 

Comments

2 Comments

  • kak
    by kak 1 year ago
    Do you know a css plugin that you can get the CSS without loosing all the formating? I tried the ones you show but they all mess up the CSS
  • ezra vancil
    by ezra vancil 1 year ago
    <a href="http://www.widgetlaboratory.com/magazine/read/two-great-air-apps-to-help-you-design-your-network_100.html"> HtmlScout</a> from widgetlaboratory holds it's format, and so does fire bug. But, in my experience, fire bug inserts line information when you copy and paste, so it's a mess.
Please login or sign up to post on this network.
Click here to sign up now.