better-way-to-build-css

Better techniques for writing CSS and markup

A website speed performance depends mainly on the quality of the CSS and markup code behind it. (JavaScript as well but this part will not be covered in this post.)

The websites with a clean code are also easier to maintain, saving time to the developer and money to the client, that’s why I find extremely important to write the (X)HTML and CSS efficiently.

While there are more website layouts types: fixed-width, fluid (liquid), elastic, hybrid, it is important to choose the layout which suits best for the website target audience.

The most popular is fixed-width layout, which allows to take the design and preserve the appearance to the pixel, that’s why me and most coders out there choose it.

Next, I will share with you several coding techniques that will increase productivity and will generate websites that will work good in all major browsers.

Write the CSS before the HTML markup

When I first started, I was building the HTML markup, thereafter writing the CSS for it, having to go back and forth several times between the CSS and HTML.

Now, I found out I am more efficient and much faster if I specify the CSS first. After you specify the id, classes and their attributes in the stylesheet file, it is easier to go and add the HTML.

The advantage is that you will have specified the appearance of the elements in page. If you choose to write the HTML structure and move on to CSS, you might figure out that some HTML need to be re-organized to accommodate the CSS styles, slowing you down.
As analogy, you first need to specify the house plan before you can start the foundation and building the house.

CSS Reset before anything else

The browsers are styling differently the elements within a website, so if you want to save time and headaches in future, the first thing to do, is add a master CSS reset.

Erick Meyer has the most popular CSS reset.

However, that is too long and general for my projects and I came up with a shorter and efficient one which suites better for the websites I work on:

/* RESET */
html,body,div,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,p,blockquote,fieldset,input { margin: 0px; padding: 0px; }
h1,h2,h3,h4,h5,h6,pre,code,address,caption,cite,code,th { font-weight: normal; font-style: normal; }
ul,ol,li { list-style: none; }
fieldset,img { border: none; }
caption,th { text-align: left; }
table { border-collapse: collapse; border-spacing: 0; }

Floats clearfix

There are two layout coding techniques which are mostly used for fixed-width layouts: floats and absolute positioning.

At the present time, the floating technique is the best method of building expanding websites, where the height adjust dynamic based on content.

Absolute positioning alone is still useful and sometimes critical at certain times, for arranging elements (e.g elements position in a header with specific height are easier to be specified using absolute positioning than floating).

Clearfix float code

As you may already have know, the floats needs to be cleared, usually inserting the following code after a floated element, which will stop the others elements wrap it.:


A big time and markup saver is the clearfix method, the only thing to do is to specify the following code in your CSS file:

.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac */
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

Than, all of the parent elements that contain at least 2 floating elements need to get a class=”clearfix”.

You can find out more at this article: How To Clear Floats Without Structural Markup.

IE 6 support not that hard

Using the method specified above the bugs for IE6 are minimal and easy to fix.

I have encountered consistently 2 bugs in IE6 and those are:

  • Double margin float bug which can be fixed by specifying display: inline for the affected float.
  • IE6 duplicate characters bug which shows up when you have html comments between the floats. Weird enough, I decided I will not comment my HTML anymore, that way I can minimize the file size. Instead of commenting the HTML I found out that indentation is more important. However, I still comment the CSS file where we usually spend at least 80% of the time when building a website.

Single line / hybrid CSS formatting rules

There are multiple ways of formatting the CSS: multi-line, single line, hybrid etc.

While some coders have their own preference, in my opinion, the single line formatting is the best from all:

  • File size is reduced, the website will load faster;
  • The code is easier to read and spot. Imagine how hard is to find elements in a multi-line CSS file and how much scrolling needs to be done;

I still have some parts of my code (around 10%) formatted as multi-line that’s why I call it hybrid.

Other CSS tips and tricks

Use of starter files: CSS, HTML

If you are building websites for some time now, I guess you already found out that you need to repeat a lot of code. To avoid that for future projects, a great practice is creation of basic starter files as: index.html, style.css, a folder for images called i by the way, a folder for scripts, a robots.txt file and maybe a .htaccess file.

Inside the CSS file you should have the clearfix and reset code portions we have mentioned above, plus some basic styling for layout elements such header, container, nav, sidebar, footer and other elements you are using often.

One single CSS file – no @import

I like to organize my CSS in one single file, that way it is much more easier to maintain, instead of searching in few other different files.

In case you are the one who likes to have the CSS organized in more files, you should also know that @import is not recommended and the use of style tag within head tags, is better.

Images folder name should be short

The folder where I store my images has a really short name, actually one letter: i. That way, whenever I have to call images in my CSS on the mark-up will take me lesser time and will result in reduced code.

Unnecessary CSS selectors

The golden rule is: never be too specific when you don’t have to be.

For example, when you are working the navigation there is no reason to specify the styles for the links like following:
ul#nav li a, instead #nav a is better practice. It will also take lesser code to specify the styles for nested elements, such as drop-downs and easier to mange the code.

Unordered lists are better than div block in certain cases

While the div tags are used mainly for organizing the markup, ul will keep the mark-up shorter for certain elements: navigations, footer elements etc. Using unordered lists is not only advised, but is a technique used by all experienced coders.

Your opinion

Please comment below what other tricks you are using when coding websites, for maximizing productivity and quality.

9 Responses to “Better techniques for writing CSS and markup”

  1. That is nearly the same way I do. Great summary!

  2. The clearfix is standard in all of my projects, works very easy and quick!

    However, when talking about Unnecessary css-selectors, I think it might be good to write the selector in full for readability of your css.

    Since I have a minifier (http://code.google.com/p/minify/) in every project I build all my css and javascript is compressed a lot by default. This also combines the different css files into one which resolves the @import issue.

    Very good article!

  3. Thanks for stopping by. I agree that minify should be used on the sites with high traffic, but I don’t find necessary to include it in each project.
    In my opinion, the selectors are still readable if not written in full, but is a matter of personal preference.

  4. Hi there.

    Thanks for the article, it was good to hear you recommended the Faux clearfix float method. I have been using it a bit and wondered what others thought of this method too and if there may be a better solution. I have created extra mark up by using a div with a clear both but think the suggestion of a BR is better.

    Just one thing, do you think you can leave out the hide from IE mac bit these days? I imagine any user on mac would be on minimal safari and far away from IE5 for mac?

  5. @Bjarni The clearfix method will reduce markup and speed up coding process.
    You can leave out the code for IE MAC if you do not want to support that and the method will still work in most of the other browsers.

  6. Great guide, very useful, thanks for sharing!

  7. A very useful article, especially for people who still struggle to “tame” good ole IE. Keep them coming ;)

  8. I am glad you like it guys.
    @dojo This method is really good, indeed, at taming IE.

  9. hmmmm good for me i have learnt lot of things …..