Don’t over use negative margins

Yes there is a time and place for negative margins. But if your find yourself using these on a daily basis then there’s probably and easier and better way to fix what you’re doing. Most likely a padding or margin on a parent element that can be adjusted. Use the box model properly, it makes debugging and editing the css later on much easier.

Don’t position every element

When trying to make a design pixel perfect I’ve seen developers relatively position every paragraph, link and heading in a div and change their top and left properties to line up with the flats. Not only is this a bad practice it is actually more work and causes more cross browser problems than adjusting padding and margins properly. Once again, the box model is your friend.

Don’t float every element

As with the positioning statement there’s rarely a time when floating every element is needed. Float only what’s needed and never declare a float globally. Ex:

#content div { float: left; }

This may be a quick fix when first starting a layout but what if you have other divs inside your #content that are not supposed to be floated. You’ll end up adding float:none for every div that shouldn’t be floated. The css above is also the perfect recipe for the IE6 double margin bug.

Don’t use !important

If you’re using !important it’s usually because something else is wrong in your code and you’re not using the cascade properly. Remember that !important is also inherited so in order to override an !important value you’ll need to use another !important! So the next time you go to add !important to your css take a good look at your parent elements and fix your code properly.

Group your css properly

The most common reason people use !important is because their cascade isn’t working properly and they need to overwrite a value. By keeping your CSS organized properly and keeping the cascade in mind when writing your code you’ll soon be writing better code, faster and easier. The basics of keeping your css organized are to declare global elements at the top and then getting more and more specific further down your css. This is not a small concept and definitely deserves it’s own blog post.

1. Edit httpd.conf

   This file is found in C:\wamp\bin\apache\Apache2.2.11\conf. Uncomment this line will include the apache virtual hosts setup file.

   Include conf/extra/httpd-vhosts.conf

   Search for <Directory /> in the httpd.conf file. The “default” settings here are really restricted so for a local dev setup you can change them to:

   
   <Directory />
    Options FollowSymLinks
    AllowOverride None
    Order deny,allow
    Allow from all
</Directory>

   Security note: now doing this will open up your local server to be seen by everyone. This means that everyone in you office can ping your machine (good for testing). This also means if you’re a one man show or contract plugged directly into your modem (do people still do this) you’re opening your localhost via port 80 to the world.

2. Edit httpd-vhosts.conf

   This file is found in C:\wamp\bin\apache\Apache2.2.11\conf\extra. Remove the example <VirtualHost> entries and add the following for each project.

   <VirtualHost *:80>
    DocumentRoot "C:\ProjectPath\"
    ServerName ProjectName
    ErrorLog "logs/ProjectName-error.log"
    CustomLog "logs/ProjectName-access.log" common
</VirtualHost>

   In the above example DocumentRoot is the path to the root of your project, usually where the index file is. ServerName is what you’ll type in your browser to access the project. If you set this to “myProject” you’d access in the browser by visiting http://myProject. ErrorLog & CustomLog are the error logs for each project, if you don’t include these lines all errors will be logged to the regular localhost error logs. I don’t use these often but keep them just in case.

3. Edit hosts

   Your hosts file is found in C:\WINDOWS\system32\drivers\etc. For each project you added in step 2 add the following entry in to the hosts file where ProjectName is the same as the ServerName variable you set in the httpd-vhosts.conf file. This tells the browsers on your system to pass all calls from http://ProjectName to your localhost.

   127.0.0.1    ProjectName

4. All Done

   Make sure all your files are saved, restart WAMP and test. That’s it! When ever you want to add another project just start at step 2. Once you get used to the process you’ll be setting up a new project on your local dev environment in less than a minute.