I guess that every new programer did double coding one or other time in his career.

By double coding i mean, wrote the same code for two different elements.

CSS example:

 .class1 {

   margin: 50px auto;

   background-color: white;

   width: 300px;

   text-align: center;

   border: solid 1 px red;

   padding: 15px;

}

.class2 {

   margin: 50px auto;

   background-color: white;

   width: 300px;

   text-align: center;

   border-color: red;

   border-width: 1px;

   border-style: solid;

   padding: 15px;

}

Most likely this will not happen one after another, but if you have along style sheet it might happen since you forget to you wrote something similar, or you are trying to style a completely different template and haven to have an element that has to look like one in a previous template so you should obviously use the class you defined before. Best option i can give you before styling templates look over the design think what parts are similar. Then at the middle and end of your project look over your styles try to look for code you don’t need, trim it.

 Another thing is when you have some elements in the web page that after a time you decided are not necessary any more and deleted them don’t forget to remove the styles for the element as well.

Another thing is its not only about the styling it self. If you have an element with a border all around it i don’t recommend using “border-style: solid; border-width: 1px; border-color: red;” you would save up 2 lines of code just by using one command “ border: solid 1px red”. Same goes for margin if you have at least 2 margins for an element like “ margin-left: 5px; margin-top: 10px;” I could surest using “margin: 10px 0 0 5px”. The tricky thing for one line margin is that if you want margin only for one side you have to set the other side 0. it goes like this “margin 5px; = margin-top: 5px;, margin-right: 5px;, margin-bottom: 5px;, margin-left: 5px;”. The one line margin respectively goes like this “margin: first number top, second number right, third number bottom, last number left”. And so you would understand how it helps look over how many of your elements use margin ten and how much lines can you trim if you use one line margins. This also applies to background, border-radius and few other things.

I may have gave you a CSS example but this actually helps with Javascript and PHP.

For example in JavaScript you use functions. There are times when you use quite a few of them depending on the websites functionality. Look for things that do the same functionality put them in one function invoke them with different parameters. Same goes for PHP.

What I’m getting at is that you need to analyse your own code. Don’t go thinking that if every thing works that its ok to have everything jumbled 5 pages of styles and so on. Just think about the time when you might need to fix something or add something one 6 months time when you have basically forgotten whats where.

P.S. Something i found that explains how to help yourself – labnol.org post on how to – Remove Unused CSS.