Strategies To Improve The Organization Of Your CSS

By , April 17th, 2013 , Tags: , 2 Comments

When coding of his CSS, it is interesting to use some conventions that the code is well organized and documented.

In cases where projects are shared among programmers, is the fundamental organization of CSS to keep the code consistent and intelligible to all who need to work or service.

In this article I share some of the strategies I have learned over the years and that help the organization better code style sheets.

Use the abbreviated statements of the properties

The abbreviated forms of CSS properties and save lines of code down to a sequence of statements making the code cleaner and easier to intender.

For the same declaration in shorthand would:

Use indentation and spacing properties and values​​

A good practice to enhance visualization of CSS is to make indentation between selectors and properties, giving you adequate space and does not occupy much space in your stylesheet.


With proper spacing and indentation your code becomes more visible:

Divide the logical CSS sessions

Divide the CSS sessions help in the organization, and facilitates the maintenance of the code. Make use of comments in the code to specify each session.

A suggested division into session:
• Global (reset, the body of the page, default style for paragraphs, lists, etc.)..
• Page Header
• Structure of the page
• Footer
• Styles titles
• Text Styles
• Navigation
• Forms
• Extras and Miscellaneous

Examples comment in CSS:

There are several formats you can leave your comment. Remember to always use a default.

Establish standards for classes and nomenclatures Ids

The name of a class or an id should allow the identification of its purpose, its use and its semantics.

You should avoid naming classes and IDs indicating aesthetics and positioning. Imagine the following situations:

  1. You name conteudoEsquerda as a class, and then need to change the position to the right for a redesign. It will be more expensive, because you have to change the class name and the intention is not that. If the class had been defined as conteudoRelacionado or sidebar, the only change would be in charge of CSS;
  2. You name a class as tituloVerde. Then need to do a quick maintenance because the customer wants the title in red. You just change the CSS class and lose all semantics

It is also important to define what form of writing classes and IDs. For example: you use camelCase, another designer uses name-with-hyphen and other uses nome_com_underline. Establish a single standard with the team so that the classifications remain consistent. May be, for example, for class hyphenated and camel case for ID.

Sort the properties of selectors

Whether you use a property for rows or all CSS properties in a single line, choose an order for the properties is important to facilitate the identification, addition of new properties and also helps to find a property faster you need to change.

Far from being pragmatic and indicate only 1 technique with which I had contact (and many people sometimes have difficulty adapting), suggest two ways to accomplish this ordinance:

At first it is a bit trickier to locate achieve certain properties, for just a little breaking the logical organization. For example, this method properties such as width and height will be widely spaced if the selector contains margin, padding, text-align, text-transform, among others. However, a pattern is shorter and does not generate ambiguities of use.

By logical grouping
This method can be more productive, but should be well defined and documented how the grouping will be and what will be the order that they appear in clusters selectors. Additionally, you should make sure that all the properties were properly grouped and mapped, not to be surprised with a property “forgotten” and then you can not know where you will put it on the dial.

An example of logical grouping:

With a few tricks and tips like these, we can organize our style sheet leaving much more flexible, semantic and understandable. Good practices are adopted to facilitate programming.


I hope you enjoy the post, and would love for you to share in the comments section your thoughts!

My name is Hebert Silva, I am 20 years old and Front End Enginner, freelance and creative experiences for rich web interfaces, I have a degree in Computer Science from the University of Franca - Brazil. Working with website development and love my job, being connected with the world with just a click is pleasurable, defend good usability techniques with css and html. I like to write, learn and teach what I have learned from my experience. In the moments that do not use Sublime Text,'m behind the handlebars of a motorcycle racing tracks in Minas Gerais - Brazil, where I live and fight for an Internet clean, lightweight and affordable.

Want to write for CSS Matter?

If you're interested in becoming part of the CSS Matter team of authors, please send an email to Manish Salunke. It's best if you already have article ideas in mind – but if you don't, he'll help you find a good topic to cover.

Get Updates On Twitter

Do you want to get real-time updates, interesting web links, site news and announcements via Twitter? Follow CSS Matter on Twitter.

Subscribe to the RSS feed Today

The best way to keep up with CSS Matter articles regularly is by putting the CSS Matter RSS feed into your feed reader.