Web Design Tips, Tutorials & More!

CSS is an amazing web tool, but it can easily get messy or sloppy.  To get the best out of it, you must stay organised.  So no more sloppy code, or unrecorded hacks.  Your education in organising your CSS code is about to begin.

Keep organized.  Rather than dropping in classes and id’s at random, try and keep things structured.  Declare generic items first, followed by the not so generic items, and keep to that pattern.  That way other developers are going to be able to follow the code, which is one of the great advantages of using CSS.

Title, sign, date.  Ensure that people know it was you that did the design.  This is helpful if another designer needs to clarify something with your design.  This is especially helpful with a template.

Template libraries are brilliant.  Once you have a good layout, strip out everything that is not generic to the template and file it.  It is pure madness to write every style sheet from scratch, so this will save you a lot of time for your designs.

Remember you can save variances on a theme by saving them in a certain way, two column layout, blog layout and so on and so fourth.  There are some good editing tools which will help you to do this.

Naming conventions are useful.  Good naming conventions can make a lot of difference when you come to modify the design.  The key here is to use generic names rather than what the element is.  So instead of .largefont, .title is far more a useful name.

This has far reaching scope when it comes to modifying designs, so think carefully about what you are calling them, and this will save you a lot of work in the future.

Avoid using underscores.  As backward compatibility is an issue with CSS that use underscores, try and form the habit of using hyphens instead.  If you do, you will save yourself a lot of modification work later on, trying to figure out why your code is not compatible with older versions of IE or Firefox.

Repeating yourself is to be avoided.  Always look to group elements where possible.  This saves time coding and compiling, and try to utilise the opportunities for short cuts too.

Optimize.  On the same theme try and cut down code wherever possible.  So group and employ shortcuts as above.  The fewer lines of code, the faster the page loads, it is as simple as that.  Loose what is unneeded, and remember that zero can just be stated without a unit.

Write for Gecko.  If you write your CSS design for Gecko browsers, tweaking for Webkit and IE will be easier than the other way round.  So make sure Gecko browsers work first before you do anything.

Use a validator.  If your CSS design is stuck, use a validator to find errors.  W3C has a free validator, and this will be a big help in getting your design back on track.

Keeping it clean
.  By keeping browser specific CSS style sheets individual, and just use java script, server side code, or conditional comments when needed, will help you keep things clean and tidy.

These CSS tips for keeping your code well organised will not only help you write better code, but better templates too.  Your colleagues will also benefit from a tidier coding from you, and you will be better thought of as a designer.

You will find that projects are easier to work on with a little organisation, and you will be able to find the information you need faster for subsequent modifications.

26 Responses to “10 CSS best practices”
  1. Elissa

    This is a useful posts especially for those who are establishing themselves with the use of CSS. Posts like this make web designing enjoyable.

  2. ericdampier

    Thank you for this step-by-step and comprehensive share. You’re straightforward approach in providing techniques are really awesome and effective.

  3. fair

    I agree with xethorn.
    However, we have to take in consideration different styles in using CSS.
    Mainly, I would like to raise the bars for giving the tips on being organized.
    It is important that we keep it clean and neat.
    For the validator, what I normally do there is to check my work per day.
    Example yesterday I am done with tables, i’ll use the validator.
    and today I finished the background, i’ll use the validator again.
    In this way, we won’t miss a single thing. Sometimes, validator misses something when the site is loaded with lots of things.

    great article in total! have a good one!

  4. Shenla

    You are awesome! Thank you so much for creating a such informative article! You made my day! This is everything that I need!

  5. ?????????

    ???????! ???????!

  6. mary grace r. baranggan

    css templates is a nice and you have more styles and idea keep up the good work.

  7. Nicole

    There are a lot of CSS tutorials out there. Research and learn via trial and error.

  8. web development best practices

    Tables are one of the most complex forms of coding for the general HTML user. That is because there are so many different way so many different ways to create and use tables that often times, users are unable to find a way which best suits the needs of their website.

  9. Palmiter

    I am a fan of great themes being used in websites and been wondering how CSS works. My appreciation for this post.

  10. Gooya IT

    CSS is a very complicated equipment

  11. Lola

    Yes, being well-organized helps a lot. It also reduces stress.

  12. fossilme

    Each one of us has his own best practices when organizing CSS code. True enough, the article has a point in making eveything clean and organized. But what I value more is the output. I’m not so particular with what’s happening inside my code as long as I get the desired output.

  13. Voter

    Nice point on this article. This will be a very nice guide to all those who are not well informed about CSS. Another thing that I’d like to add; you should not be terrified with all the hard work. Remember make it sure and steady.

  14. Eugene

    I’m kind of a neat freak when it comes to coding. I use a validator over and over again until it’s error-free.

  15. Lilya

    Thanks for the information! For many will be useful!

  16. gamma

    Interesting information. Thank you for sharing;)

  17. Fetra

    Thanks for the information. Remarkable blog;)

  18. Jonn

    Cool blog! Thanks for the information. Add to favorites;)

  19. Klio

    Useful information! Thanks to author!

  20. lars

    The information will be useful to many. Thanks to author!

  21. FM01

    I agree with using a validator. Any error will be easy to spot.

  22. xethorn

    I am not sure it’s a good practice to write for gecko. What I mainly and firstly do is to write the whole structure (width, height, padding, margin, position etc) of the elements and then I add the colors/backgrounds, fonts and css3 enhancements.

    When the structure is done, I am checking under all browser if it’s working properly or not. If not, I am fixing. That helps me to organize information and do an efficient debug (ok, I didn’t had the time to do it for my website :)).

    However, I wrote an article about Best Practices for modern design. Feel free to let me know what you think, I’d love to have your feedback about.

    @xethorn (blog, flickr)

  23. Wegleitner

    I love building through CSS. Though it is complicated, you can have it self-studied. It just requires lot of patience and hardwork.

  24. Camper

    CSS is a very complicated equipment. If you are not knowledgeable about this system, there is a big possibility that you might commit lots of mistakes. I agree with Voter its should be sure and steady.

  25. Dash

    Nice article. This is way to go! This I can attest that it is really helpful. I agree with you Voter and Camper. I am one of the living proof that CSS is a very sensitive system. I had lots of mistakes before. Thanks to this article.

  26. Dominic Blass

    @Xethorn, I must agree. We all need to be sure that our product works on different browser. And like the great writing they have here, your is also excellent.

Leave a Reply