5 Steps to CSS Heaven

18 May 2006 Category: Internet, Technology

5 Steps to CSS Heaven

Illustration: "Stairway to Heaven" by Jim Warren

Writing CSS is very much like having sex. Not everyone does it the same way and there is no particular “right” way to do it. I guess for me the similarities actually end there, seeing as writing CSS is something I do every day whereas having sex is…anyway I digress. The W3C have set the standards but beyond this, writing CSS is down to an individual’s preferences. Here are 5 little tips and ideas I’ve adopted in the last 6 months that you can use to make your CSS more streamlined, maintainable and easy to read.

Written by Jon

Disclaimer: The CSS example files are exactly that. They are not meant to be fully functional CSS documents. Class names in the CSS files are named merely so that you may visualise the document in your head (because there is no accompanying html), not because I condone the naming convention in them.

Step 1

1) Make a table of contents

At the top of your CSS document, write out a table of contents. For example, you could outline the different areas that your CSS document is styling (header, main, footer etc). Then, use a large, obvious section break to separate the areas. Not only does this make your CSS look neater, but when it comes to making quick adjustments to certain areas of your website at a later date, finding the corresponding area in your CSS will be much easier.

View Example File 1

Step 2

2) Separate the positioning properties from the typographic properties

Why? Mostly for the obsessive-compulsive neatness of it all, but also because you are likely to reuse lots of typographic properties. If you mix typographic / positioning properties in your CSS document, you might find you’re needlessly repeating yourself.

View Example File 2

Step 3

3) Isolate single properties that you are likely to reuse a lot

If you find yourself using a single property a lot, isolate it to save yourself repeating it over and over again and also enabling you to change the display of all parts of the site that use it.

View Example File 3

Step 4

4) Try out an online CSS compressor

But not for the reason you think. I don’t really trust CSS compressors, and often the cost (a loss in human legibility) of cutting a few Kb off your CSS file is greater than the benefit (slightly faster download). However, they can be a good source for learning new tricks - some of the methods that CSS shrinkers employ to squeeze your CSS file size down can be employed in a less extreme way to make your CSS more streamlined.

Step 5 (Times photo: Michael Rondou)

5) Learn to exploit the cascading nature of CSS

This one is an obvious one, but it’s sometimes overlooked. Say you have two similar boxes on your website with only minor differences - you could write out CSS to style each box, or you could write CSS to style both at the same time, then add extra properties below to make one look different.

View Example File 5
Disclaimer: I urge you to not compare these tips to PingMag’s stylesheet! This site was built some time last year and the CSS could use an overhaul…
Update: I’ve taken out the “red” class name as it seemed that too many of you were focusing on my bad choice of an example rather than the actual point I was trying to make. The point of (3) is that by isolating a property you use a lot, you can streamline your document and make it easier to make changes across the board, quickly.

52 Comments

  1. CSS as sex analogy: it’s not the content that matters, it’s the style!

    Posted by: bsn on May 18th, 2006 at 11:14 pm

  2. While still in the process of mastering CSS, there were a few tips here that helped me greatly. The link to CleanCSS was a godsend! Thanks for your effort.

    Posted by: richardf on May 19th, 2006 at 12:33 am

  3. “readable class name combinations, for example class=”strong red align_right”.”

    Red? Align_right? This is visual reference, you should make names which depend on what particular element is supposed to do, not how it looks like or behaves.

    Posted by: Riddle on May 19th, 2006 at 1:41 am

  4. Riddle’s right: “red align_right” is a terrible way to build css. What happens when you don’t want that to be red anymore? Now you have to change both your css and your HTML everywhere you used that “red” class, which can be a nightmare.

    Posted by: Andrew on May 19th, 2006 at 3:09 am

  5. [...] 5 pasos para crear un buen CSSCS Internet, CSS, Diseño, Outbox, Web [...]

    Posted by: Proletarium — 5 Pasos para crear un buen CSS on May 19th, 2006 at 4:36 am

  6. CSS as sex analogy: both are frowned on by the Amish.

    Posted by: Dan on May 19th, 2006 at 6:16 am

  7. Riddle’s still right. I learned that one the hard way. Nonetheless, there are some good tips here… I’m still in the (bad?) habit of just alphabetizing my css, which violates #2 big time

    Posted by: andy ford on May 19th, 2006 at 8:22 am

  8. [...] PingMag | 5 Steps to CSS Heaven Short and sweet, another excellent article from PingMag (tags: css webdesign webdev tutorial) [...]

    Posted by: chasingdaisy.com » Blog Archive » Links for 2006-05-19 on May 19th, 2006 at 9:41 am

  9. Riddle > once you start building a site with lots of different elements I think you’ll find readable, simple names like that a godsend.

    For example if there are various elements around the page that I need to turn red dynamically (such as an AJAX error message) I can simply append the “red” class to that element’s current class. Whether I call the class “red” or “error_message” is down to semantics - there could be other cases where I want to use the class in a non error context way.

    I understand what you mean though, but I think it’s all down to preferences and the situation at hand. I could build a site where writing CSS in this way would make no sense, but I could also be building a site where this rule is a great time-saver and makes a lot of sense to both the front-end guy and the guy doing the back-end stuff.

    Posted by: Administrator on May 19th, 2006 at 10:54 am

  10. “red” is an example of the worst kind of class name: that which links its name to its appearance, for several reasons.

    Aural browsers don’t care about color.

    When you restyle the entire site and decide to change the error color to green because it stands out more (or for the more obvious but less user-centric reason: it looks better), then you’re confusing yourself with the legacy “*.red” all over the CSS and the markup, but it’s not actually red.

    It is always better to name classes and id’s based on their function, not their appearance. CSS can be semantic too.

    Posted by: Dracos on May 19th, 2006 at 5:15 pm

  11. Dracos, you make some good points and whilst my choice of class name for the example was perhaps a bad one, I think we are losing sight of the point of the tip, which was to isolate a property you reuse often and isolate it in its own class. Whether you call this class .error_message or .highlighted_text is academic, and really I think its a bit extremist to say that anything is a worst kind of class name to use - its all down to the needs of your current situation.

    I had a browse through your portfolio and on one of the top links, your css file reads at the very top:

    .fine { font-size: 10px; font-family: arial; color: #000; }
    .fineblue { font-size: 10px; font-family: arial; color: #1e44af; }
    .finewhite { font-size: 10px; font-family: arial; color: #FFF; }

    .med { font-size: 16px; font-family: arial; color: #000; }
    .medbold { font-size: 16px; font-family: arial; color: #000; font-weight: bold; }
    .medwhite { font-size: 16px; font-family: arial; color: #FFF; }
    .medwhitebold { font-size: 16px; font-family: arial; color: #FFF; font-weight: bold; }

    Don’t want to get into an argument here, but I’d say those are appearance-based class names. Practice what you preach, eh?

    Using the point I described above, you could streamline this block of CSS quite a lot. For example that last bit with all those .med classes, you could isolate 16px because it occurs in all of them, or create a standard .med class including all the more common properties, like so:

    .med {
    font-size: 16px;
    font-family: arial;
    color: #000;
    }

    .strong {
    font-weight: bold;
    }

    .white {
    color: #FFF;
    }

    Then instead of using specific classes for everything like you have, you could use combinations.

    class=”med”

    class=”med strong”

    class=”med strong white”

    class=”med white”

    class=”white strong”

    This is very useful when you need to have various colours / strengths of text on your site, but want to keep things streamlined.

    Posted by: Administrator on May 19th, 2006 at 5:38 pm

  12. I really think that I should pay more atention to this subject. My css’s do work but they’re so confusing that no one beside me understand them…
    Maybe now…

    Posted by: Pedro Rebelo on May 19th, 2006 at 6:33 pm

  13. I tend to use the names of celebs or characters as my classes and ids. It’s streamlined, easy to read and if you picture the right film/book in which they star, works logically to what they should be doing.

    Posted by: Reno on May 19th, 2006 at 7:11 pm

  14. Reno, I love your “zit, freckle and tooth” naming system!

    Posted by: Daisy Morgan on May 19th, 2006 at 7:58 pm

  15. Reno > that CSS is hilarious!!

    Posted by: Administrator on May 19th, 2006 at 8:23 pm

  16. class=”strong red align_right” - you are serious?

    This is awful naming. Names should relate to content, not presentation. That’s the whole point of CSS - seperating presentation from content.

    Posted by: asd on May 19th, 2006 at 10:09 pm

  17. Its not the size of the CSS, its the way it makes the page look… Mmmm sex :)~~

    Posted by: Bob on May 19th, 2006 at 10:10 pm

  18. Using multiple classes is a great technique, however your examples are poor. .strong simply should be a <strong> tag itself. Names things after colour really can cause you trouble in the long run.

    Often you’ll copy code from one site to another. It’s nice if your class names don’t become meaningless.

    Whil I found your tips useful, I think your naming overall could be improved.

    Using underscores in class and ID names is considered bas practice:
    http://developer.mozilla.org/en/docs/UnderscoresinclassandID_Names

    Also, you’ve inconsistancy between #myheader and #my_middle in the example. Your naming conventions, whatever you decide should be consistent.

    Also, the use of ‘my’ in general seems frivolous.

    header, #middle and #footer are much more readable than #myheader, #mymiddle and #myfooter. The my does add anything to the name at all.

    Thanks for the tips, and I think you’ve some good suggestions, but they can be improved.

    Regards

    Posted by: Kevin Cannon on May 19th, 2006 at 10:14 pm

  19. The error example is EXACTLY why you don’t use the name ‘red’. Calling the class ‘error’ reminds you not to use if for anything else. The fact that you might have errors and highlights both appearing in red today dose not mean you will always want them the same colour. Use:
    .error .highlight { color:red; }
    and you ensure you never need to change your HTML.

    Posted by: bWare on May 19th, 2006 at 10:24 pm

  20. I have just started to learn to adapt writing CSS, but I have not known it has something like sex. CSS is a beauty, but not everyone makes the full exploitation of it. So, it’s not like sex, to me, it’s a tool.

    Posted by: Keith on May 19th, 2006 at 10:31 pm

  21. if great design is often called sexy then css fits the description also. how nerdy do you have to be to compare coding css to having sex, though? to each their own, though i hope to not hear about coding fetishes.

    http://www.idahofallz.com

    Posted by: Joe Vandal on May 19th, 2006 at 10:43 pm

  22. It’s not the size of your stylesheet, but how you use it ;-)

    Posted by: DW on May 19th, 2006 at 11:27 pm

  23. These comments turned bold when Kevin wanted to show a {STRONG} tag but it got accepted as markup for the page. I will close it here (hopefully). Can a person put any markup on this page?alert(’how about this?’)

    Posted by: Brad on May 19th, 2006 at 11:30 pm

  24. Great article, I’ve been trying to improve my css writing/coding in the last months, and this will be a great help. Thanks. Most of the comments make excellent pints though.

    Posted by: Michael Müller on May 20th, 2006 at 12:28 am

  25. [...] If you find yourself using a single property a lot, give it its own class. If you name your classes sensibly, you will begin to style your documents using pleasingly readable class name combinations, for example class=”strong red align_right”. — 5 steps to CSS Heaven [...]

    Posted by: Effair | Billet | Combiner des classes CSS on May 20th, 2006 at 12:45 am

  26. Kevin > I’m beginning to see why the colour class was such a bad example to give. But as for the “my this”, “my that” - that was purely for the example purposes only and is not a naming convention I actually employ in real life.

    This article was written quite quickly during a very busy day…you’ll have to forgive things such as the inconsistency in underbars etc…

    But, as for the color class names, that’s perhaps something I will phase out of my CSS writing style. Thanks everyone for the good advice!

    Posted by: Jon on May 20th, 2006 at 1:36 am

  27. I think that if you’re going to criticize someone’s markup, you should be able to properly use it yourself. Like closing tags.

    Kevin Cannon, I’m looking at you.

    Posted by: Christopher! on May 20th, 2006 at 1:43 am

  28. [...] 5 Steps to CSS Heaven:(source: digg) [...]

    Posted by: FocusMinded.com » 5 Steps to CSS Heaven on May 20th, 2006 at 2:59 am

  29. CSS is the opposite of sex.

    Everyone knows why to have sex, they just don’t know how.

    Everyone knows how to use CSS, they just don’t why.

    Posted by: Monday on May 20th, 2006 at 3:21 am

  30. ur gay

    Posted by: Anonymous on May 20th, 2006 at 3:42 am

  31. <HTML> & <MARKUP> & <TAGS>

    Posted by: N/A on May 20th, 2006 at 4:42 am

  32. Ok, ok. “red” is a bad example by itself, but it can be necessary to use a “red” class for example on a web to teach kids the names of the colors. In that case, the “red” box will always be red. Right?

    Posted by: aalku on May 20th, 2006 at 4:55 am

  33. [...] En PingMag han puesto una guía que consta de cinco pasos o consejos que nos da el autor para poder llegar al paraíso del CSS aprovechando al máximo las bondades que nos brindan las hojas de estilo y teniendo un poco más de orden al momento de escribirlas. [...]

    Posted by: Gonzalo López » Blog Archive » Pasos para llegar al paraíso del CSS on May 20th, 2006 at 6:33 am

  34. [...] 5 Steps to CSS Heaven (tags: css webdesign development tutorial howto web web-design) [...]

    Posted by: Rchee/Blog » Blog Archive » links for 2006-05-19 on May 20th, 2006 at 7:20 am

  35. [...] Here are 5 little tips and ideas that you can use to make your CSS more streamlined, maintainable and easy to read. « Curvelicious   [...]

    Posted by: The Web Design Blog on May 20th, 2006 at 10:31 am

  36. [...] http://www.pingmag.jp/2006/05/18/5-steps-to-css-heaven/   [...]

    Posted by: zean.no-ip.info » 5 Steps to CSS Heaven on May 20th, 2006 at 4:01 pm

  37. “Learn to exploit the cascading nature of CSS [...] write CSS to style both at the same time, then add extra properties below to make one look different.”

    Posted by: ambrose on May 20th, 2006 at 6:55 pm

  38. “Learn to exploit the cascading nature of CSS [...] write CSS to style both at the same time, then add extra properties below to make one look different.”

    Is that what you think “cascading” means?

    Posted by: ambrose on May 20th, 2006 at 6:56 pm

  39. I know that “cascade” in the conventional sense simply means that the CSS file can influence many different html pages, but I think that’s pretty much a given nowadays.

    Perhaps I could have written “piling up”, “overwriting” or “inheriting” nature? Just didn’t sound as nice - what would you have said?

    Posted by: Administrator on May 20th, 2006 at 8:13 pm

  40. I think we have a ton of people who are criticizing one another to justify their naming convention. When in reality, every stylesheet is written for a different site that has a different use, that may or may not change the error message color from red to green ever.

    So .red or .error are both quite valid. I myself could see using .red in some cases. I could call it somewhere in my footer if I needed, even if it were intially written for an error message. I think, however, that if I wanted the same style in my footer but was forced to use the class .error as to not repeat myself, my brain my not let my fingers type that, and instead would make me piss myself.

    Posted by: Andrew on May 23rd, 2006 at 12:38 am

  41. [...] PingMag - The Tokyo-based magazine about “Design and Making Things” » Archive » 5 Steps to CSS Heaven (tags: css) [...]

    Posted by: just in ram » links for 2006-05-23 on May 23rd, 2006 at 10:19 am

  42. “You know Paul writing CSS is a lot like making love to a beautiful woman. You get your selection perfect, open her brackets an dthen - BAM - fill it with everything you got. Paul my wife has left me!”

    Posted by: Swiss Tony on May 23rd, 2006 at 5:40 pm

  43. [...] Writing CSS is very much like having sex. Not everyone does it the same way and there is no particular “right” way to do it.read more | digg story [...]

    Posted by: 5 Steps to CSS Heaven - The Digg Effect - Search for Diggs or get Dugg on May 23rd, 2006 at 8:52 pm

  44. I covered quite a lot of this stuff in an article I wrote a while back. I was trying to address the problem of coding CSS in a team environment but it might still be interesting…
    Playing nice with the other CSS kids

    I’m afraid I’m very against using display-influenced class names too. It’s reasonably safe if you’re the designer and the developer plus the client has signed off and been blindfolded. Changes always come in at the last minute and colours are often the first thing to be tweaked. Closely followed by the classic ‘Could you just move this down by 1 pixel? And maybe put the nav on the right?’

    Posted by: Mike Stenhouse on May 23rd, 2006 at 9:34 pm

  45. [...] 5 Steps to CSS Heaven - Don’t use CSS compressors. It’s not worth it. Think of the poor souls who have to read your code and try to understand your stylesheets in the future. Prettiness and legiblility is worth the extra few kilobytes, I’d say. [...]

    Posted by: Ryan Irelan » 5 Steps to CSS Heaven on May 24th, 2006 at 12:37 am

  46. ” class=”med strong white” “

    If you like it this way, why don’t you write it more clearly : ?

    Posted by: Lanza on May 24th, 2006 at 4:54 pm

  47. Arg… html stripped.

    I just wanted to say that you could use font and b tags, if you go that way. Those are real presentational markup, and there is no need for external stylesheet, it works all the time :)

    Posted by: Lanza on May 24th, 2006 at 4:58 pm

  48. Thanks everyone for your comments on why that was a bad example - please take a look at the revised section (3) and my comments in the “update” section at the bottom of the article.

    Posted by: Administrator on May 24th, 2006 at 7:14 pm

  49. [...] If you’re a front-end developer like me, Jon over at PingMag has written an excellent article that will help you get there a little more easily. [...]

    Posted by: verbum » Blog Archive » 5 Steps to CSS Heaven on May 24th, 2006 at 9:42 pm

  50. [...] And if you are interested in learning more about color schemes, then this is one of the best articles on web design color combinations. Also check out Your complete guide to web design. And here for a CSS generator. Or go here for CSS and HTML templates. Or you can now create a webpage with Google’s webpage creator. And here are 5 additional CSS tips. Do also check out pingmag’s 5 steps to CSS heaven. Remember that you can also startup a blog with Typepad or Wordpress, or create a fairly cheap looking blog at MySpace. Also remember to checkout the open source free web templates and information at Open Source Web Design and Open Web Design. And here for 75 helpful design resources. [...]

    Posted by: Pandaura » Blog Archive » General Website Help and Server Setup on May 28th, 2006 at 1:55 am

  51. [...] http://www.pingmag.jp/2006/05/18/5-steps-to-css-heaven/ [...]

    Posted by: penk - Keep on rockin’ in the free world » Blog Archive » 本日書籤 on May 29th, 2006 at 3:43 am

  52. You are missing a massive step which makes developing with CSS so much easier in a tea environment.

    Always, ALWAYS precede your class declarations iwht an HTML element type if possible, (eg div.header) as it makes everything infinitly more readable and maintainable. It also removes a huge number of overwriting problems.

    Posted by: Ben on June 5th, 2006 at 10:36 pm

  • Share and Enjoy:
  • del.icio.us
  • digg
  • Fark
  • NewsVine
  • RawSugar
  • Reddit
  • YahooMyWeb
Previously on PingMag