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!

23 ideas on “CSS Code Readability Tips

  1. nightS

    I use these techniques and they help alot..I missed the “Colors” step..Don’t know why I didn’t think of it..
    Thanks alot

  2. Andy Gongea

    Nice to hear that. It means that they are good techniques. Cheers!

  3. Stanton

    I have to disagree with indenting CSS, this then tightly couples your presentation with your document structure, if you change the way an element is marked up in HTML, you must then change your CSS indentation to match your structure.

  4. Amber Weinberg

    I also disagree with indenting the CSS code. It takes up too much space, especially if you have a lot of rules on one line, and makes it harder to read IMO.

  5. Shane

    Great post, very helpful. I have to agree with Stanton though as I too don’t like indenting CSS. Thanks.

  6. Stanton

    Everyone’s going to have their own preferences when it comes to writing their code, however experience dictates that if your rules were applied to a project being maintained by multiple designers and developers, havoc would surely ensue.

    We have a habit of letting our development environment influence how we write code, for example while you have a nice 19 inches of screen real estate, another developer working on the same project may be using a terminal based text editor with 80 character line widths and no syntax highlighting. Trying to navigate indented single-line CSS declarations would be increasingly difficult in this situation, especially if you have a developer writing markup and a designer maintaining the CSS, indentation would quickly lose sync and cause more harm than good.

    Single-line CSS also causes issues, apart from introducing horizontal scrolling, most debugging tools reference line numbers when highlighting issues, and most source control solutions highlight changed lines in their diffs. I’d also personally argue that multi-line CSS is far easier to scan for specific rules than single-line, but that’s a personaly preference that we could argue about for days, lol.

    I’m not saying one way is better than the other, I just urge people to focus on long term maintainability rather than quick wins in productivity.

  7. Andy Gongea

    I think CSS indenting very useful. Even if you change your structure, it really helps you see better the code.

    Also, keep in mind that most of the monitors used for webdev these days have around 19″. So I think it is definitely a good approach when you have great screen real estate.

  8. Cristian Pascu

    Typography and colors separation is definitely a good advice.
    CSS indenting, well, that one is one of those rules! :-) Is there a debate over the place of the opening curly brace in CSS, too?

  9. Rick

    on #5 it’s “Rules” not “Cules” :)

    Otherwise tight tips! thanks!

  10. Rick

    also, is there an order on typography, colors, styles, etc?

  11. Andy Gongea

    No, the order is not a rule but I saw that many like the color info on top.
    Cheers!

  12. Andy Gongea

    Hey Stanton,

    Thanks first for this comprehensive comment.
    I totally agree with you. The readers should adopt some of these ideas only if they will bring value to their coding style. These are not “the” rules for writing CSS code. These are from my point of view good practices and they help me maintain better the CSS file.

    Cheers!

  13. Design-sector

    Some great tips!
    Another one is to comment your css code if it’s a bigger project.

  14. rakesh

    very good tips. I like it. visit this one would help http://tutorialfeed.blogspot.com/

  15. Keegan

    Not bad … I also like to alphabetize my css so I know if something is or isn’t in a long list of attributes.

  16. Soh Tanaka

    Great article :-)

    I do have to say that perhaps this is a personal preference but I can’t stand working with #3 and #5 :-p

    #3 – Write 1 CSS Rule per Line : this only works for me when its a couple properties… if i get into a fat propertied selector, I have to break it up in its own line so I can easily scan its values.

    #5 – Indent your CSS Rules : I’ve seen other people go for this style but for me its messier and difficult to read :-(

    Thanks!

  17. Chris Eppstein

    It looks like you would really enjoy working with Sass. If you haven’t seen it yet, check it out. http://haml.hamptoncatlin.com/docs/rdoc/classes/Sass.html

    The compass framework makes it really easy to manage your sass files and use frameworks like blueprint without adding non-semantic class names all over your markup. http://compass-style.org/

  18. Keloran

    Why did you create a

    wrapper div, kinda pointless

    heres a good tip for you, use the html and body tags

    html { text-size: 62.5%; }
    body { width: 960px; margin: 0 auto; }

    • Andy Gongea

      Regarding the wrapper – your suggestion is a good tip indeed. I used to create a wrapper because in some designs I can use it as placeholder for different graphic elements and as a …. wrapper for the content.

      Anyway – I didn’t think of this approach. Thanks and Cheers.

  19. Keloran

    You might want to also write valid css

    font-size: 62.5%/1.1em is invalid

    • Andy Gongea

      Maybe you don’t see it, but it is font and not font-size. Last time when I checked it was valid.

  20. Carl - Web Site Design Instructor

    Cool, I thought I was the only one to indent CSS styles also ;)

  21. Kia

    Thanks so much, your tips were very helpful!