Imagination is our power

1. Define a good structure

The most important thing in CSS readability is having a good structure. When you have a good structure, you can narrow down the area that you have to cover when you are looking for a certain CSS rule. And the best way to structure a CSS file is in the same manner the HTML file is structured. In this way you are more comfortable with the CSS file and you will know exactly where to search.

1
2
3
4
5
6
7
8
9
10
11
12
<div id="wrapper">
	<div id="header">
	</div>
	<div id="body">
		<div id="content">
		</div>
		<div id="sidebar">
		</div>
	</div>
	<div id="footer">
	</div>
</div>
1
2
3
4
5
6
#wrapper {...}
#header {...}
#body {...}
#content {...}
#sidebar {...}
#footer {...}

2. Define a Section for Colors

The number of colors is different from one site to another. In this case, a section dedicated to the colors used in the design is a best practice. A good reason is that you can easily identify the colors even after a period of time and you can replace the colors really fast by having this section available.

3. Write 1 CSS Rule per Line

When you write CSS code you will have to take into consideration the time that you will loose scanning the file for certain rules. A good idea is to declare your CSS rules on one line. In this way you will gain all that horizontal wasted space and you will shrink your file and have less to scroll.

4. Define a Section for Typography

Typography should be very important in every project. And a special section should be dedicated to stylize the text used in projects. Using a dedicated section for typography will save a lot of time and it will boost your productivity.

1
2
3
4
5
6
7
/*............Typography................*/
 
body { font: 62.5%/1.5em Tahoma, Arial, sans-serif; }
h1 { font:700 2.4em/1.5em Arial, sans-serif; }
h2 { font:400 2.0em Verdana, sans-serif; letter-spacing:-1px; }
h3 { font:700 1.8em Arial, sans-serif; }
...

5. Indent your CSS Rules

Indentation is on of the most important aspects when it comes to readability. And the best way to indent your CSS file is the same way you indent your HTML file. In this way you will somehow reproduce the visual structure of the HTML tags in the CSS file. When you indent your CSS rules keep in mind to align all the declarations so that the CSS properties will create a compact block. I saw this approach in Chris Coyier’s CSS code and I think it is a great idea. You can see what I’m talking about in the source below (2nd section).

1
2
3
4
5
6
7
8
9
10
11
12
<div id="wrapper">
	<div id="header">
	</div>
	<div id="body">
		<div id="content">
		</div>
		<div id="sidebar">
		</div>
	</div>
	<div id="footer">
	</div>
</div>
1
2
3
4
5
6
#wrapper			{ width:960px; margin:0 auto; }
	#header			{ float:left; width:960px; height:116px; }
		h1#logo		{ float:left; width:188px; }
		#menu		{ float:right; width:100%; text-align:right;  }
		#menu li	{ padding:15px; color:#fff; display:inline;  }
		#menu li a	{ color:#fff; text-decoration:none; }

6. Define Presentation Properties First

Usually in my projects, my CSS layout is based on floats. This is my approach … I prefer floats rather than positioning. Anyway, a great rule that I think will help you is to declare the floats, width and height as the first 3 properties. In this way you will have a representation of the layout from the first characters in the CSS rules. This will help you to visualize the entire website structure based on those 3 properties.

1
2
3
4
5
6
7
8
9
10
#wrapper			{ width:960px; margin:0 auto; }
	#header			{ float:left; width:960px; height:116px; }
		h1#logo		{ float:left; width:188px; height:61px; }
		#search 	{ float:right; width:270px; }
		#SearchBox 	{ float:left; width:180px; height:28px; }
		#SearchBtn 	{ float:left; width:80px; height:28px; }
	#body 			{ float:left; }
		#content	{ float:left; width:600px;  }
		#sidebar 	{ float:right; width:300px;  }
	#footer 		{ float:left; width:960px; }

Conclusion

These steps will not give you the perfect CSS code for readability, but for certain they will make your life a lot easier. Try these steps and let me know what you think. Cheers!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: