5 Important CSS best-practices to improve your webapplications

In the past few months I’ve been designing and developing a new webapplication with a few other developers. During the project As a rare mix between designer and developer I’m responsible for making designs for each of the screens in the web application. On the other hand I’m responsible for making sure it’s technically in top shape.

As part of this weird mix of things I’ve been watching the CSS files of the website with growing interest. I’m seeing a lot of cool tricks and a lot of things that can go wrong.

In this post I’ve written down a few tips that I think will help to make your website more awesome and maintainable.

Tip 1: Use LESS to build your CSS

CSS is fine if you know how to properly use all the combinations of rules. If you’re like me, a practical guy, you will probably run into a ton of problems building an efficient set  of rules. This is because CSS can do a lot, but it’s complex and not very maintainable on its own. For those who have done CSS before, know what I’m talking about.

Soon after I started doing CSS for real, I discovered that SASS and LESS are languages that are going to help big time in reducing the maintainability problem. For both SASS and LESS there’s a good compiler available that can be integrated into your automated build system, so there’s no reason why you shouldn’t be using both of these frameworks.

Here’s a few quick links to get you started:

• Compiler for use on Windows computers: https://github.com/duncansmart/less.js-windows
• Documentation on LESS: http://lesscss.org/
• Documentation on SASS: http://sass-lang.com/

Tip 2: Normalize the browser output

Important if you’re building for multiple browsers is that you normalize the output of each of these browers. Almost every browser handles margins and padding differently in terms of defaults for them. So a normalize.css file is a must if you want your styling to survive a visit from an IE7 browser (sorry, IE6 is dead, and this is all the text I’m going to spend on that).

Need a normalize.css file? Check this website: http://necolas.github.com/normalize.css/

I had a reset.css before, but the one linked above is better for modern browsers. So instead of going with the good old reset.css I suggest you give the normalize stylesheet a spin

Tip 3: Standardize your text

Most of your website is going to be text, so why not take some time out of your day to define a set of standard styles for text on your website.

Start out with defining styles for the body and work your way down to specialized styles to make certain pieces of text larger or smaller based on a specific CSS class you include on a text element on the page.

Place all of this stuff in a separate LESS include file and you can include them anywhere you need a typical typography setup. To make things even easier, here’s a boilerplate typography CSS file.

Tip 4: Use a grid system

Making a layout in CSS is easy when you want a crappy one. Slap a few DIV elements on the page, give them an ID and start floating, spacing and sizing them with named rules. Easy peasy.

Using named elements to make a layout makes your styling less extensible. As in, you cannot do anything to the layout, unless you start editing the CSS which may or may not break everything else on the page. It’s awful and very unnecessary.

Instead, opt for a grid system where you divide your page in a predefined number of columns. A column based design for a webpage is probably the best thing you can do to a layout, because all webpages tend to follow a design that flows top to bottom instead of using fixed heights. Vertical scrolling is such a normal thing to do, so everyone is expecting you to allow them to scroll verically. So why not go with what everyone is expecting and fix the width, but not the height of elements in your design.

As I said before grid systems divide the page up into multiple columns. Each element in a row can take up 1 or more columns in the grid, up to a maximum within a container defined by the grid system. If you want a second row of elements, just make a new container for a set of columns and you can add more content to that row.

You can roll your own grid system, but you can also download one right from the great interwebs. Here’s a few samples:

• 960.gs – http://960.gs/
• The golden grid system – http://goldengridsystem.com/

Tip 5: Classify don’t name

Last but certainly not least. Please stop using an ID for everything. Make your design using classified elements. If you’re using boxes on your website, classify them using a CSS class. That way you make your design more extensible. Want another box with a drop shadow? Just add the right CSS class and you’re done.

I’m stating it boldly, because I think this one is important. But I wouldn’t be much of a developer if I didn’t know about exceptions and problems with the above statement.

For example, you have two pages where you want a set of buttons that flow horizontally, with a margin between them. One of the buttons is also on a different page, where it doesn’t need the extra margin. Here’s a few things you can do with this one:

• Make a rule on the container of the buttons, which gives each anchor element (A) in the container a margin-right automatically. This way, if a button with the same class is added to a different container, it doesn’t get the margin.
• Make a rule that matches the class of the button, but include the container in that rule, so the rule only applies when an element has the specified class AND is placed in that container.

  Pro tip™: Add a page class to your body element. This way, you can vary styling for certain classes on a per page basis while keeping the no-ID rule intact.

Please note: Not using an ID and basing styles is kind of a puristic thing to do in some cases. Personally I think that the ID is reserved for naming elements that need to be accessible by tools such as JavaScript, screenreaders and test automation products. But if you cannot solve a design issue by using just classes, by all means go ahead and make a rule for that named element. It’s just a guideline and it’s only there to make things easier. It shouldn’t be your first choice for fixing CSS, that’s what the rule is for.

Final thoughts

All the tips in this article work when you’re building a design that supports such actions. If the designer decides to build something that doesn’t follow the function of your website, you’re screwed. So to make the most out of all of these tips, please make sure you talk to your designer about it. He needs to make sure that the grid system can be followed to base his design work on a column based design. Also, he needs to make sure, you can split the design into reusable components.

Personal note: Dear designers, you are not making a piece of art. It’s a piece of industrial equipment, in which form follows function. So make me a happy camper and talk to someone on the development team before putting that pencil to the paper. It will help you greatly in producing an excellent design!