7 tips to organize your CSS

Working often with CSS for my own website or for my job makes me trying always to be organized and that made me thinking about a thing. What is the best way to organize my CSS file(s)? With this article I will try to present you a short guide about CSS organizing.

1. Group your CSS files into a folder

Beside your main CSS file you may want to use also a print CSS file or why not a CSS file for the IE6/7 browser. Placing them together in a folder named css for example will help you improve your website back-end structure.

2. Use efficient selectors

A very important thing for you to know is how browsers understand and read your CSS selectors? The answer is that they read them from right to left. That means that for the selector ul li a span the first thing thing interpreted is span.

The id is the selector with the greater specificity so always, instead div#header you should use just #header. This way your file will be less redundant and smaller. Also note that the use of efficient CSS selectors is a nowadays requirement.

3. Comment and separate your CSS rules

Generally, a CSS file contains reset styles, header, content and footer styles and in order to easier browse your CSS rules you should choose a way to separate them.

You can choose an simple and easy to notice separator as in the following example:

  /* Header styles */
  /* ---------------------------------- */
  /* Content styles */
  /* ---------------------------------- */
  /* Footer styles */

4. Create a simple color scheme to use for your styles

When you are dealing for example with a CSS file for an web application you will use a lot common styles and colors.  So placing something as following inside a CSS comment could be very helpful for you:

  /* Colors: Light Gray #eaeaea, Dark Gray #828282, Red #c60000 */

5. Use a meaning naming convention for your selectors.

Let’s suppose you need to name your logo, menu and a tagline that are placed inside a header id wrapper. A good approach in this way would be to use namings as:

• header-logo or h-logo
• header-menu or h-menu
• header-tag or h-tag

6. Create your own small CSS framework

By doing that you will be able to use these common CSS classes at any time for any elements from your markup.

.full-width{
  width: 100% !important;
}

.min-width{
  width: 1% !important;
  white-space: nowrap !important;
}

.centered-inline{
  text-align: center !important;
}

.centered-block{
  margin-left: auto !important;
  margin-right: auto !important;
}

7. Simple is better

Don’t try to complicate things because simplicity will save you time, effort and why not your remaining hair .

About these ads