CSS | Tips | Tools

2 Essential FireFox plug-ins for CSS development

Firebug allows the live editing of CSS, HTML, and JavaScript of any website. For tweaking the appearance of a webpage, this tool is indispensable for visually seeing the results of your changes to the source code of a webpage. The changes are made locally and are lost when the page is reloaded.

Dust-Me Selectors A thing that bothers me with CSS development is the feeling that there is a precarious ledge over which you are hanging, and as development progresses you are one step away from having a stylesheet that has become unmanageably disorganized and convoluted. This is particularly apparent when multiple people have a hand in editing the appearance of a page, or when you are creating a new stylesheet from an existing one. Dust-Me Selectors is a useful tool for finding CSS selectors that are no longer being used on a page. Additionally, it can spider a whole site to find the CSS selectors that are unused site-wide. The line number and stylesheet name of the unused selectors are provided, so that they can be manually removed. Clean and tidy is a wonderful thing!

The thing I miss about both these tools is the ability to apply the edits directly to the source code of the pages you are working on. A lot of time can be consumed manually applying the changes these tools find, but it is still quicker than making changes without these tools.

What other tools do you use?