Customer Street CSS

Time and time again when I’m teaching CSS, or looking through other people’s code I see things like:


border-width: 1px;
border-style: solid;
border-color: #000;


Or, as a more frequent example:


margin-top: 10px;
margin-bottom: 15px;
margin-left: 25px;
margin-right: 0;


That last example is four lines of code that could so easily be condensed into one simple line. The same applies to (X)HTML markup too. One of the more frequent examples I see of this is putting an image inside a div and using the div class or id to position that image. Save yourself some time and energy and stick the class or id in the image tag and get rid of the redundant div tag (I’ll be coming back to this later)!

In my above two examples of CSS the correct and more ‘lightweight’ way of writing exactly the same thing would be:


border: 1px solid #000;
margin: 10px 0 15px 25px;


For a lot of CSS rules the order in which you place the properties is not overly important, but for others you really do need to know them. For example, here where we have set all four margins in one rule you must always remember the correct order, which is top, right, bottom, left (remember the points of the compass, north, east, south and west). It is simply a case of getting to know which selectors you can apply this to (such as fonts, borders, margins, padding etc.) as well as what you can and can’t include in the property order for that selector.

Going back to the (X)HTML example a lot of the problem comes with a little illness called ‘divitis’, which basically means using divs for everything. I’m going to write an article about semantics later on, which will apply to this post, but for now I’ll just say that you do not need to wrap everything in a div to position it. divs are not the only tags out there for you to use and you should be using the correct tag for the correct page element. So, in the example above we want to move an image to a certain position and give it a border. Wrapping it in a div to do so is creating redundant code that will add to page loading times, and for SEO purposes increase the code-text ratio, which is bad!

Why not stick the id or class of the CSS selector that does all the moving inside the image tag and then make a small modification to the selector that applies it to the image (for IE pruposes, especially when using floats with margin and padding). Example:


#header {
float: left;
border: 1px solid #000;
margin-top: 10px;


… would need to become…


img#header {
float: left;
border: 1px solid #000;
margin-top: 10px;


And there you have it. A stripped div tag with exactly the same effect to the web page. You may be thinking that this is a very slight change and wouldn’t make much difference at all, which is true. But when building large (and especially dynamic) pages you really do need to consider making sure your code is as efficient as possible and by doing this for each redundant tag it will make a difference.

This applies to your CSS too. Once you have built quite a large site you will start to realise that your style sheet is getting increasingly large and filesizes can become a bit of a worry. You could split your stylesheet up a little and only load the relevant styles for relevant pages, but this can become quite tiresome and way too much work (unless you organise yourself to do this from the start). The easier way would be to optimise your style sheet removing any redundant classes and id’s that aren’t used any more and make sure that your rules are compacted into as few as possible.

Of course, to make things easier there are certain programs out there that will do these things for you, and being the kind-hearted soul that I am I’ll post a link to the one I find most effective:

Code Beautifier - Just add your CSS!

4

after 2 Votes