5 Rules To Write More Readable CSS Files
- by Antonio Lupetti
- 45
- October 18, 2009
Complex CSS files can often be difficult to manage especially if you don’t use a structured way to write and organize their code. In a previous post I already illustrated a methodic approach to CSS coding.
This post illustrates five simple practical rules that can help you write well structured and more readable CSS files to make your developer life easier.
I also suggest you to download my CSS2 Visual Cheat Sheet, a practical and essential reference guide to all CSS2 properties with detailed descriptions and some example of code.
1. Order CSS properties alphabetically
When you start adding properties to a CSS element, probably you don’t pay attention to the order you are using to list them. Without doubt, a better approach to proceed is to use alphabetical order like in the following example:
#nav{
border: solid 1px #DEDEDE;
color: #000;
padding: 10px;
width: 650px;
} In this way, if you need to change a specific properties, will be simpler to find it at a glance.
2. Indent child elements
Indenting child elements of a main element (in this example #nav) is a good way to highlight dependencies between related portions of code.
#nav{
width:650px;
}
#nav ul li{
float:left;
}
#nav ul li a{
display:block;
}3. Use comments to separate logical sections of code
Comment lines are really useful to improve code readability because, if used with certain criteria (and not abused), can help you separate sections of CSS code related to the structure of the HTML document:
/*-------------------
HEADER
------------------- */
#header{width:650px;}
#header a:link,
#header a:visited{
color:#0033CC;
}
/*-------------------
NAVIGATION BAR
------------------- */
#nav{width:650px;}
#nav ul li{
float:left;
padding:0 10px;
}
4. Use extra spaces and tabulations to separate single properties from their values
I think this way to organize CSS code, by using tabulations to separate properties from their values, noticeably improves the readability of CSS files but in general is rarely used:
#main{
width: 650px;
}
#main h1{
color: #000;
font-size: 22px;
font-weight: bold;
}
#main p{
color: #000;
font-size: 12px;
padding: 10px;
}
5. Group elements with the same properties
If you have a group of element with the same properties and values you can think to group them in a single declaration and manage separately their difference in order to optimize your code. For example take a look at the code below:
.icon-facebook {
background:url(facebook.gif);
padding-left: 26px;
margin-right: 20px;
width: 100px;
}
.icon-twitter {
background:url(twitter.gif);
padding-left: 26px;
margin-right: 20px;
width: 100px;
}
.icon-delicious {
background:url(delicious.gif);
padding-left: 26px;
margin-right: 20px;
width: 100px;
}You can improve the previous code in this way:
.icon-facebook,
.icon-twitter,
.icon-delicious {
padding-left: 26px;
margin-right: 20px;
width: 100px;
}
.icon-facebook{background:url(facebook.gif);}
.icon-twitter{background:url(twitter.gif);}
.icon-delicious{background:url(delicious.gif);}
Conclusion
When your project is ready to go live, I suggest you to create and publish a lightweight version the CSS file by using a CSS compressor (such as http://www.csscompressor.com/ or http://www.cssoptimiser.com/) that allows you to reduce dramatically the size of your CSS files.
If you have suggestions or other “rules” you use to improve the readability of your CSS files, please leave a comment. Thanks!
L’involuzione del Web: come Google e Facebook stanno cambiando la rete e le nostre abitudini
Terremoto Yahoo! Cadono le prime teste dopo lo scandalo delle dichiarazioni false sul CV del CEO Scott Thompson
- 3
- May 8, 2012
L’involuzione del Web: come Google e Facebook stanno cambiando la rete e le nostre abitudini
- 18
- April 15, 2012
Nice post. I always make sure that I do something like this.
Except I think that it would be more useful to group related properties together, instead of having to make sure everything is in alphabetical order.
Hmm, I do all but 2 of these things in my CSS [indent children + alphabetical-ness]. I agree with Eric B. but I’m sure some people will find it useful.
Hi Antonio!
Thank you for this cool post and the blog also. I would be very happy if i could also read it on my phone. As I can see, the old blog works with mobify.me. Is it possible that you make a mobified version of this site too? It would be nice if I can read your tips on the go!
Anyway, thank you for the new site, its awesome! -Csongor.
Cool post, I already do most of those things but I still learned some.
I hate reading a css file when it’s badly formated.
Nice one, I’ve been following these rules. Really helps to makes your life that much more easier. ;)
Great post. Thanks for sharing I kinda to the same in my works.
While I think these suggestions are a good idea, writing alphabetical CSS isn’t practical in my opinion. I’d prefer to organise it with related properties, similar to Eric B.
You Totally ROCK With WOORK !!
Nice, will try to follow this. Thanks for sharing. :)
thanks for this info.
Great article, you may also be interested in looking at CSS preprocessors like Less:
Original Version (Ruby): http://www.lesscss.org
.NET version: http://www.dotlesscss.com
PHP version: http://leafo.net/lessphp/
I like the idea of tabulating all the values, and I definitely alphabetize everything—it has made such a difference to my coding habits since I started doing this. At first I was skeptical, because as other commenters have observed it seems more intuitive to place similar elements together. But I’ve always found that actually putting that into practice is not so easy. Do borders belong with margins, and padding with background—or do margins and padding and borders and background belong together? There are heaps of ways to do this, and it becomes very hard to maintain consistency (especially if someone else has to then work with your code).
Using an alphabetical order on properties just simplifies the whole system so much. Because I don’t have to think about where a property should go in terms of its relation to other properties, I code a lot faster and concentrate more on the actual styling. I’m sure this won’t work for everyone, but I’d suggest that it’s worth a shot.
Indenting nested elements, on the other hand, really does not work for me. At first I thought it was a great idea and started doing it, but it just got amazingly confusing and messy. I find it awful.
Another vote for grouping related properties instead of an alphabetical order. I also tend to write properties in one line and not in one line for each because it would get too bloated most of the time, not a big fan of too much scrolling ;-)
You dont really have to waste your time with thinking about the alphabetical order of the properties there are sites like http://www.codebeautifier.com/ that will do the job for you ;D
I alphabetize the groups of properties in each selector.
Otherwise, great article! :)
Like a lot of CSS writers, I’ve got my own system of property order:
Dimension properties (width, height)
Position and float properties
Spacing (margins, padding)
Box decorations (borders, backgrounds)
Typography
It just makes sense to me to write them in that order, so it doesn’t take any extra time to organize.
Tabbing in nesting element is probably a good idea, (I don’t do it often because of the extra time needed to keep things organized and lined up). I imagine it could get complicated, but that’s probably just because it would reflect a complicated HTML structure.
I agree with paul, however, I never had any specific ordering after dimensions and positions. I may adopt your technique as it’s close to mine.
These are some good tips but I’m not sure about the spacing between the attribute and it’s property. What if 1 attribute is super long, then your eye won’t be able to make out what each property is related to.
Other than that nice 1
nice tips, I always have a big problem finding the code. lol
Great article!
Coding is an Art!
For people that code CSS horizontally ( .something { display:block; padding:4px; border:1px solid #ccc; } )
#2 and #4 don’t seem to apply.
Also for “Group elements with the same properties” take it a step further and code the .icon PATTERN separately:
.icon { padding-left:26px; margin-right:20px; width:100px; }
.icon.facebook{background:url(facebook.gif);}
.icon.twitter{background:url(twitter.gif);}
.icon.delicious{background:url(delicious.gif);}
I thought the same thing about the icons. Assigning multiple classes for something like that is one of the best things about CSS.
Nice job! I also group styles by my own order as opposed to alphabetically. Box-model properties first, positioning second, then font styles and visual presentation rules.
One big thing missed here is starting all stylesheets with a table of contents. I put a block comment with the date modified and author at the top, as well as listing hex values for default colors.
This has helped immensely with returning to old sites after a year or more.
nice! easy to implement & follows good practices
Why write them alphabetically? Writing them in the order they appear in the HTML markup is way better. Ordering them alphabetically will be harder to scan for related elements that may clash in styles, add unnecessary overweight to the file size and so on…
Not the CSS elements, but their properties!
Several of you guys are missing the point… Alphabetically is only the first idea listed, not the only one. #3 says to separate based on logical sections of code.
So, create your sections, then separate alphabetically within those sections.
This rule should have been listed before the rule about alphabetical order to avoid confusion. Otherwise, fantastic list.
@Bogdan Pop: The point is not to order the CSS elements alphabetically but the properties of each element.
Some useful tips but I too sort my elements by type rather tan alphabetically, much clearer that way
In this post I meant to sort alphabetically the properties of CSS elements and not CSS elements!
nice tips, but I think is difficult to sort alphabetically the properties.It could take some time.
Writing the properties in alphabetical order is not a good thing.
Group them in a logical way. And you have too much spacing between the lines.
It will increase file size and from my experience is harder to scroll and find the content.
Very useful for my blog developers
It was very useful, thank you very much for your suggest !!!!
My best regards
From Chihuahua, México
Take it easy, but I think you should reconsider your post by web industries workers or ague a little more your steps. To my mind most of the steps you’re citing are not possible.
From my experiences in web industries and web agencies:
You can simply forget about 1, 2 and 4:
1) Everyone likes to group properties by alphabets OR categories OR his/her own preferences
2) Any kind of way to indent selectors will finish as exotic css files. Break line only if need be
3) Css should not be indenting as html. css is more like queries than data descriptions.
4) It won’t work, some developers will get a pain while developing the pages
5) It won’t work, it will not be maintainable
Just make developers agree about using 3 and 5 and typically, it’s
* Setting a short informative headers
* Grouping selectors by sections
* Grouping selectors with the same properties
* Only indenting the properties
Then the top of the top and the most boring is FINDING A FEW MINUTES to talk about editors:
* USE SPACE AS UNIT
* USE OPTIONS such as virtual wrap, virtual tab, tab space, reformat mix tabs, etc… so everyone can code in a way that doesn’t hurt the neighboord. Yes they can display the css in a way nearest to their but they didn’t know it.
By default every developer thinks his config is the best in the world. His editor is not oriented team, it was configured to override any display that doesn’t match Mr Smith the guru. You can come in a random company and say “That’s the way we should work”, it won’t work. Just explain a few requirements, give them liberties, talk about editors, and then everyone should be able to work anywhere with any members on the same basis. Evangelizing web is also evangelizing web related tools.
Actually, sorry wookup readers if I hurt you, we don’t care how you like ordering the css properties as we don’t care how you prefer chocolate than strawberry. A company or manager or leader just want you to be able and to enjoy working anywhere on any projects with any co-workers. That’s all web development is about: team work !
Please bring Wookup higher ! ! ! !
Thanks and cheers
A nice little round up there. I agree and practice all of these except #4 – ‘Use extra spaces and tabulations to separate single properties from their values’. I find reading CSS selectors that have dirty great gaps between their rules and values really difficult on the eyes.
hi nice practice for me. i got idea …i love your posts
keep posting like this, awesome cool
Thanks Antonio! Any coding help is like a gift from heaven…
Thanks for lesson, great article!
You could also do efficient CSS using CSS shorthand properties:
http://www.456bereastreet.com/archive/200502/efficient_css_with_shorthand_properties/
http://www.dustindiaz.com/css-shorthand/
CSS compressor for fast loading and efficiency:
http://iceyboard.no-ip.org/projects/css_compressor
http://www.andy-roberts.net/software/csscompressor/index.html
CSS spirtes for faster loading:
http://net.tutsplus.com/videos/screencasts/exactly-how-to-use-css-sprites/
http://www.tutorial9.net/web-tutorials/building-faster-websites-with-css-sprites/
nice post, very helpful, thanks
I never knew that there is CSS compressor. It works like a miracle. Thanks a tonne Antonnio.
Great post, however CSS compressors are not recommended for SEO readability. I would rather format the css (i.e):
#menu ul {
width:980px;
margin:0 auto;
padding:0;
}
#menu ul li {
float:left;
list-style:none;
padding:131px 0 0;
}
#menu ul li a {
display:block;
height:43px;
text-decoration:none;
color:#fff;
padding:10px 10px 0;
}
it’s much easier for SEO than compressed CSS.
Thanks,
Emil
Thank you so much to the author for sharing such an interesting content!
Grouping elements with the same properties is fundamental ! Other rules are simple but so efficient. Thanks !