in Design

Bring on CSS Guidelines

Cascading Style Sheets, better know by its acronym CSS, is one of the main coding languages used by frontend developers. Its primary use is that of describing the look and formatting of a document written in a markup language, most often HTML.

The main goal of CSS is to provide web developers with a way to separate the content of their pages from the presentation of said pages. By employing this separation, content accessibility, increased flexibility and control can be achieved. For example, if you format a certain HTML element to be green, written in Sans Serif 12 and italic in a CSS file, you don’t have to worry about mentioning these format details anywhere else in your code.

1

Due to the fact that CSS has become a coding language so widely used by all frontend developers, a way to standardize the way it is written had to be established. It’s only common sense for all web developer out there to want to be able to understand each other’s CSS files with a minimum amount of effort. Towards this end, the cssguidelin.es initiative has been created by Harry Roberts.

2

What cssguidelin.es aims to achieve is a way to keep stylesheets more maintainable, keep code transparent, sane and readable, so that your teammates or those who will take on the project after you are finished with it won’t pray for you to step on Legos, and to keep stylesheets scalable. While cssguideline.es aims to be a coding style guide (and most definitely not a visual style guideline), it does not assume it is the guideline.

By popularizing and learning to respect a style guideline developers will help with setting a standard for code quality, meaning that code written however the mood struck the developer and ‘what-does-it-matter-if-it’s-working?’ will no longer be acceptable. Also, with using the same guideline comes an increase in consistency across codebases and it will make it easier for a developer to move from one to another. Not to mention that it will drastically increase productivity for all web developers.

Think about it like this, best practices and coding style guidelines are used across a variety of the more ‘established’ coding languages like C, C#, Java, Ruby and so on. Why not apply the same strategy for CSS?

3

Just to get you started on thinking what adopting this kind of work ethic will do for your current and future projects, we’ve selected a few guidelines described on cssquidelin.es to show you.

1. Syntax and Formatting – here are some pointers about a preferred way of actually writing your CSS code: 4 space indents, not tabs; 80 character wide columns; multi-line CSS; meaningful use of whitespace.

2. Multiple files – it should be considered a best practice to split discrete chunks of code in their own files that will afterwards be concatenated during a build step.

3. Create table of contents in your CSS files as a way to make maintenance easier.

4. Title your sections and try to keep your code ordered so that all information that has to do with a certain section finds its way to the correct section.

And the list goes on. If any of this has piqued your interest, go to http://cssguidelin.es/ to find out more. And remember: always code like your debugger is a homicidal psychopath who knows where you live.

Anamaria

I read, I write, I sleep.

Leave a Reply