CSS Code Readability Tips

cssReading and writing seem to be simple actions yet they are not. When it comes to web design, these actions are vital for various reasons and they have a higher priority in the web design process. What I’m trying to say is that it is crucial to write code in a good way. That is because any other person that interacts with the code should feel comfortable with it.

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!

Andy Gongea is a passionate UI/UX designer with a great appetite for technology and trends. Currently he owns, a future wife, a loan that comes with a monthly fee and some strange ideas about user interface and user interaction. Cheers! Follow Andy on Twitter: @andygongea

Sponsors

Community Links

  • Create the Toyota logoHi there. In this tutorial you can learn to create the Toyota logo. It is all about circles and the Pathfinder panel. You will have to create a series of circles of exact dimensions. Regarding that,the grid and the snap to grid option will ease your work.
  • 60+ Creative And Well Designed PagesWhen doing my research for 404 error pages, I was surprised to see that three quarters of the websites I visited did not have custom 404 error pages.
  • Design an animated banner in PhotoshopIn this tutorial I will show you how to use Photoshop to create an animated leaderboard banner.
  • Top 10 Websites To Brush Up Your jQuery SkillsTo brush up your skills in jQuery, we present you Top 10 Websites For Free jQuery Tutorials that have been providing some cool demos and step by step guidelines, such that a beginner can master his skills of jQuery easily
  • Top 8 Principles of Effective Website DesigningEverything is guided by certain set of standards, rules and regulations. If the task is not driven by some guidelines, then it could face difficulties for its successful completion.
  • 61 Incredible Logo Designs #3Here’s yet another roundup of amazing logo designs. This is a series that we do frequently, so make sure to check out the past logo articles.
  • 20+ Amazing Product PSD files found on DeviantARTThese are a selection of over twenty PSD files which I have found over on DeviantART, specifically of various electronic products.
  • Create a documents icon in IllustratorHi there. In the next tutorial you’ll learn to create a pretty common icon. To reach this result you need to know how to use the Rectangle Tool, the Pen Tool or the Type Tool.
  • 10 Downing Tweets10 Downing Tweets is a Flash and Twitter based website created by twentysix Leeds. The site includes a twitter vote, a daily poll and an insight on the twitter noise the election is receiving. Will the final results on our site echo who gets elected?
  • 20 Clever Futuristic Free FontsFuturistic fonts were always one of my favorite font styles. I was never that much into grunge and similar styles. I rather keep it clean, but still cool looking. If you like this style, take a look at the collection of 20 free futuristic fonts I put toge

Friends

RSS User Experience Bookmarks