CSS has been part of the web design backbone since ages until now and still getting better. When we spend huge amount of time developing, why not pay some attention on keeping things organized?

Here we will try to develop CSS with a better approach.

Why this kind of approach?

• Standards
• Clean
• Fast Access
• lots…

.

What does it include?

Below are list of ideas we will be looking at for our approach:

Code Definition

A small section at the start of your CSS file where you define few details like Author, Version, Description…. Here is how it could look like:

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

* Filename: grid.css
* Version: 1.0.0 (2007-09-21) YYYY-MM-DD
* Website: http://site.com/
* Author: Name
* Description: Handles the site layout.

== STRUCTURE: ==============================
* Page width: 950 px
* Number of columns: 3
============================================

*/

Version based

Building versions of your CSS file helps you refer to your previous code or even restore an old one if required by any chance. So, keeping this snippet in the above code definition is a better practice.

* Version: 1.0.0 (2007-09-21) YYYY-MM-DD

Comments

Well, this is not for others but for you. If you need to have a better understanding on whatever you have coded and not get confused when you look at few thousand lines of CSS, go with this…

Anchors

As I said above… if you are kind of person working on CSS files of a few thousand lines, this will be your best friend from now on. This is something similar to the HTML anchoring within the same page. The basic idea in CSS is that you will be adding commented sections with a unique character prefix for a quick search.

You will have these unique named sections defined under your code definition so that you even get an overview of all the sections defined in that particular CSS file. Here is how it goes in the CSS file:

Your Code Definition (header of the CSS file)

== INDEX: ===================================
_header : Site Heading
_rightnavi : Right Navigation
_accordion : Accordion Menu
============================================

Following CSS definitions

You will be defining such anchors at the start of every section and also define the same in the code definition as above. When you need to get to a particular section, you will simply search for one of the anchors from the above index and your editor will take you straight to the section.

/* _header <the anchor>
==========================================*/
#header{
<attributes>
}

#header .logo{
<attributes>
}

.
.
.
<long long list of your CSS definitions>

/* _accordion
==========================================*/
.
.
<long long list of your CSS definitions>

Framework style

We now have a lot of CSS frameworks too popping out. CSS frameworks have both advantages and disadvantages. Read SmashingMagazine’s article on CSS frameworks. For now, we will follow some advantages of CSS frameworks within our code.

Your CSS can be broken down into different files like:

• typography.css for basic typographic rules,
• grid.css for grid-based layouts or
• layout.css for general layouts,
• form.css for basic form styling,
• general.css for further general rules

This way, you will have shorter code in each file which is more accessible. You will only have a base CSS file which will be included in your HTML and the above abstracted CSS files will be included within your base CSS file.

.

Well… this is what we have been following in our projects and really feel much better with these standards. Hope this article has been informative to you.

If you have any more ideas on this approach, please share below.