Are You Following the Principles of Top Notch CSS Design?

CSS can be an extremely powerful markup language for designers.

However, the CSS that is produced is only as good as the principles that are being followed by the designer creating the code.

While you may think that anyone can crank out CSS, there is a big difference between writing CSS and producing top notch CSS.

To ensure that you are on the right track, here are eight CSS principles that every web designer should be following.

 

1. Take the Time to Validate

If you are going to invest the time in coding CSS, it only makes sense to take the time to validate the code  that you create.  However, it never ceases to amaze me how many designers skip over this vital step. Validating your code allows you to clean up any problems and ensure that it’s going to work well for your visitors.

In addition to validating your CSS file, you should also validate your HTML or XHTML files.  Before you validate these files, make sure that you have taken time to declare the proper HTML or XHTML DOCTYPE. Declaring your DOCTYPE may seem like a mundane detail, but I can’t count how many discussions I have had with frustrated designers who continued to have problems with a design, only to find out that it was because they had declared an outdated DOCTYPE (or hadn’t declared a DOCTYPE at all).

 

2. Document (but not in your code)

Whether you are working on a project alone or with a team of designers, it is important to document the work that you create.  You can probably see why this would be important within the context of a design team, but you may be wondering why it would matter if you are working on a solo project.  Well, there’s always a chance that your solo project will eventually evolve into a group project, and if this happens, it’s much easier to have documentation on hand than trying to backtrack and create it.  However, even in the event that your project does remain a one man show, you may be surprised at how useful documentation is when you decide to revisit a project after not looking at it for a year.

When it comes to creating documentation for CSS code, the natural impulse of most designers is to add it directly to their code by placing it between /* and */ .  Like many of the principles in this list, there is nothing technically incorrect about taking this approach.  However, adding comments directly to your CSS code will increase the size of the file, which in turn can increase loading times and slow down a website’s overall performance.  If you are serious about writing top notch CSS code, you should be documenting your code, but in a separate file.

Although I honestly believe that it is more effective to document in a separate file, I know that there are plenty of files who simply don’t agree with this practice.  If you refuse to document in a separate file, the next best thing you can do is use a CSS compressor (in fact, even if you choose to use a separate file for documentation, you can still benefit by using a CSS compressor).  You can use this CSS Compressor from CSS Drive Gallery, or simply search Google to find an alternative CSS compressor.

 

3. Say No to Hacks

Although hacks have become an acceptable practice to many within the CSS community, this does not mean that “CSS hacking” is a principle that you should be following.  The problem with this approach to designing is that it means you are intentionally looking for a complicated solution to problems.  While you may think that one or two hacks every now and then won’t hurt anyone, getting into the mindset of “hacking through” any problems you encounter can have a negative impact on your overall design mentality.

Avoiding hacks is a piece of advice that experts have been dispensing for some time.  You can go back all the way to 2003 and see that Peter-Paul Koch (who is an accomplished developer and author) has been warning designers of the implications of CSS hacks for some time: “The complexity monster has reappeared, right in the center of modern Web development. Nowadays it doesn’t manifest itself as an endlessly nested table, but as an endlessly complicated CSS hack.”

 

4. Don’t Abuse Divs

Because divs provide a high level of flexibility, it can be easy to overuse them.  In fact, this issue has become so common among designers that the CSS community has created its own term to label this issue: divitus.  To avoid falling victim to this condition, before automatically using a div tag, you should always ask yourself if there is an actual HTML tag that will get the job done for you.  For example, instead of creating multiple header divs, why don’t you use the HTML heading tags that are already available, such as H1 and H2?

Once you begin taking the issue of divs into consideration, you will quickly see the benefits of using the appropriate HTML tag instead of automatically creating a new div.  Not only can it reduce the amount of code that you have to create (which will save you time, along with reducing the load time of your website), but it will also give your code a more logical structure.

 

5. Put Thought Into Your Class Names

If you ask a new or inexperienced designer about how they decide to name their classes, they might say that it doesn’t really matter.  While this is technically true, this is a very short sighted view of naming CSS classes.  Although there are designers who fall into the category of not caring about CSS class names, there are also designers who do think about their class names, but they actually take the wrong approach.

Since I don’t want to simply beat you over the head with theoretical examples, let me explain this in concrete terms.  Let’s say that you are creating a class to control one of the boxes on your page.  The box will be located at the bottom of the page, it will contain comments from readers and you will use CSS to give it a tan background and control the padding.  Instead of naming this .tan-box (which is what many well-intentioned designers would do), name it .comment-box.  The reason that .comment-box is a better class name than .tan-box is because if you decide to change the background color to blue down the road (or decide to move the box from the bottom of the page to a different area), it won’t confuse you or any other designer who is looking over the CSS for that website.

 

6. Embrace Shorthand

While shorthand can be confusing to designers who are just getting started writing their own CSS code, once you get used to the style of shorthand, it becomes one of the most effective practices you can follow as a designer.

There are multiple benefits to using shorthand.  For one, it reduces the size of your files, which will reduce the load time of your website.  Additionally, it not only makes it easier to organize your code, but also makes it simpler if you need to make changes to your code in the future.  As you begin adapting to shorthand, you should also get in the practice of writing your code on one line (instead of spreading out declarations over multiple lines).

 

7. Don’t Forget About Printers

As a designer, you are much more technically inclined than anyone else in the mainstream population.  Because you are a part of a minority that lives and breathes technology, there are a lot of habits you have that most other people have never thought about.  For example, you have probably gone out of your way to eliminate as much of the “paper trail” as possible in your life.  However, it’s important to remember that the majority of the population still prints things out on a regular basis.  While you probably tag an item with del.icio.us when you want to save it for future reference, the average Internet user will print that same page out.

Since people are still printing out information from the Internet, it’s important to use CSS to make your content printer friendly.  Visitors will appreciate all of the work you have put into creating a beautiful layout for the website they are visiting, but when they decide to print out a page from that website, they will appreciate you even more when they realize that their printout only contains the text that they want (and none of the amazing graphics that look great on their computer but would waste a ton of ink from their printer).  Because CSS makes it quite simple to ensure that content is properly formatted when printed out, there is no excuse for a true designer to neglect this step of the design process.

 

8. Never Stop Learning

You may think that this final principle sounds cliche, but it is arguably the most important of the entire list.  If you are dedicated to being the best designer possible, you need to ensure that you are always working to expand your knowledge of CSS.  Fortunately, this is easy to do if you have the desire and will to commit to continuing your CSS education.  While continuing education can be a difficult task for individuals in many industries that are non-technical in nature, because the Internet is literally the basis for CSS, the amount of free resources that you can learn from are literally endless.  If you think I’m exaggerating, just type “CSS” into Google and you will see that there are 483,000,000 results for you to browse.

In addition to learning from online resources (and print resources if you prefer), you can learn a lot from other CSS designers.  Whether you analyze their work, listen to the advice they are giving out online or talk to them in face-to-face situations, you can gain a lot of value by interacting and potentially collaborating with other designers who are committed to following the principles of top notch CSS design and producing amazing pieces of work.

0 shares
  • http://herr-schuessler.de/ Christoph Schuessler

    Did I miss something? Since when does CSS have a doctype?

    And regarding your tip to comment CSS code in a separate file… How is that supposed to work? Ever heard of CSS compressors (http://www.google.com/search?q=css+minify)? Use them to compact your code before deployment, but please comment inside the file!

    On to point 5 – put thought in your class name. Yes. Please do so. And please dont’t name a box .bottom-box either, because one day you might want to change its position, maybe to the top, maybe to the left, who knows… .bottom-box in that case would be equally problematic. Why not call a box according to its content or function – for example .comment-box, .image-box, .testimonial-box, etc.

    As for the rest of the tips… welcome to 2003.

  • http://mokokoma.co.za Mokokoma Mokhonoana

    Good advice, keep it up!

  • http://willayers.net Will Ayers

    @Christoph I believe when he stated about a doctype he was referring to the doctype in the html. I don’t really know how much this effects the css.

    I know I have come into problems when declaring a certain head profile with my css. ex. – head profile=”http://gmpg.org/xfn/11″

  • http://herr-schuessler.de/ Christoph Schuessler

    @will: HTML-Doctypes affect css a lot – one example: a correct doctype (that renders the page in standards compliance mode as opposed to quirks mode) lets you use auto-margins in IE and makes IE use the correct border-box-model.

    But this has nothing to do with validating CSS code.

  • Pingback: Web 2.0 Announcer()

  • http://belinkddesign.com Kimh

    Wow.. I’ve seen some bad table layouts, but using a div for headers? It makes the geeky side of me go lolwut?

    Great post! And I agree whole-heartedly about #8 – most companies, too, will pay for their employees to take classes.

  • http://www.creativelogicmedia.com Calvin Froedge

    A lot of great points but I disagree with the CSS hacks. I run my own professional website design company where I manage several freelance designers and developers. I always make sure to only use developers that validate and have clean code. However as far as CSS hacks go, I think it’s a great thing to use to offer flexibility. Since we still support IE6 we use clean hacks for transparent PNGs, drop down menus and IE6’s wonderful margin issues. I encourage my developers to use a CSS reset so the amount of hacks and browser issues is cut significantly down, but hacks still seem necessary so the website looks as perfect as possible in every browser. I have come across various ways of fixing IE6’s problems without a hack, but those entail javascript and other things that I believe would have more potential problems associated with it.

  • Gary Cao

    “CSS can be an extremely powerful markup language for designers.”

    CSS is NOT a markup language. It’s a stylesheet language. HTML, XML etc. are markup languages.

    Stylesheet languages describe presentation of a document, while markup gives us the structure.

    http://en.wikipedia.org/wiki/Stylesheet_language

    http://en.wikipedia.org/wiki/Markup_language

  • http://www.points.ro Khaled

    That’s nice … Keep it up! Thanks

  • http://www.webdesignerdepot.com Walter

    Thanks to all for the comments and constructive criticism. We’ve gone ahead and updated the post to ensure it more accurately depicts the information in question and help clear up any discrepancies.

    Thanks guys…

  • http://wallpapers.ariunbolor.org http://wallpapers.ariunbolor.org

    Nice.

  • carl

    there are strong arguments both for and against using hacks depending on the situation. it’s very easy to proclaim that hacks are bad practice, but not always easy to avoid using them entirely. it would be useful if you included links for both sides of the argument. what’s not useful is quoting someone from 2003 on the issue!

    some would argue that declarations written on one line are difficult to read, and css file size is hardly a problem in 2008.

    generally pretty sound advice though!

  • http://www.raymondselda.com/ Raymond Selda

    Really good checklist. Sometimes I dive in and view the CSS source if I see an interesting CSS effect. A lot of times I learn something new and add something to my technique. Thank you.

  • JackT

    Documenting Code: While the best intentions lie in the reason for documenting elsewhere, you’re only going to cause headaches if you work with someone else, especially if your site has multiple style sheets. You’ll end up needing to have people reference up to twice (if not more) as many pages to understand at your code, whereas you could have simply placed it accordingly.

    A few extra lines are not going to break the loading time. Downloading text is not something even dialup users usually blink at, especially with many pre-fetching and compressing dialup ISP’s. I would far prefer to see comments above the code instead of looking at a stylesheet, then having to find the line reference in the notes.

    All in all, though, a decent list.

  • Bicky

    Nice tips. It is really helpful. Thanx

  • The Trendsetter

    Just a few more things to add to this– when it comes to embracing shorthand, I totally agree that it can be very useful, but as a designer that usually supports up to 4 developers at a time (and 4 different projects), you have to recognize that most developers don’t know HTML or CSS, much less CSS shorthand. If a change is made to the application and the designer (me) does not have time to make the change (often) then it’s much better for the developer to be able to follow your style sheet (minor changes of course).

    That takes us back to that issue of documenting in an outside document. Sounds nice in concept, but again, if a developer is trying to follow your stylesheet, they surely don’t have time to reference another file to find your comments.

    Lastly, as a designer, the most useful tool you can ever have (aside from your grasp of CSS) is your knowledge of HTML; know it and know it well. With so many languages and ways to develop websites and web applications, you MUST realize that the final output should be clean, valid, strict HTML code. Know your HTML tags and when to use them and you might avoid a lot of headaches (and maybe even save a project or two).

  • http://www.ideabox.lk praveen

    nice tips..really helpful.i’d like to see more tips on CSS in the future.thanks.

  • http://www.sagie.es/paginasweb.php Cesar

    Nice list, I found it very interesting.

    I like to use IE comments instead of CSS hacks, this way I can write perfect clean CSS and then do some ‘fixing’ for IE. Just a personal option.

    Many thanks!

  • http://vanishdesign.com austin web design

    I used to use CSS hacks for IE6. I found I was ignoring well-known bugs, like when it doubles the left margin of a left floated element. Using the underscore will prevent validation. It is a band-aid on cross-browser compatibility, just like separate stylesheets.

    It’s best to learn the browser’s flaws if your users need you to support it.

  • http://www.webcoursesbangkok.com Carl

    Interesting post, and some good advise.

  • Adrian

    I am new in the website development, my problem is that IE is has problems with Active X controls from my javascript that viewers must be reminded to allow this control to view the sub-menus. what should i do with this?

  • http://www.pavetosuccess.com Keith

    Great article. In regards to # 8, can anyone recommend a resource or site that promotes various web developer training events i.e. seminars in the New England area.

    It’s time for me to get out and meet some people.

  • http://www.demogeek.com DemoGeek

    I would rate organizing your CSS content as another important aspect that’s overlooked here. I’ve been thru that mess and I’m sure that can go along nicely with the “top notch CSS design principles”.

  • http://www.flort.net Sohbet Muhabbet

    That’s nice … Keep it up! Thanks

  • http://www.jamesradford.net/ James Radford

    All very good points although I’m still digging around for an article that demonstrates how CSS should be structured i.e. How to write re usable CSS and in such a way that doesn’t require ie6/7 hacks..

    Good article, thank you.

  • http://slackinsal.winnebagotravelersusa.com Hollis Revalee

    Search engine optimization needs a good search engine optimizer plan. Simply one in every of these methods could make a big distinction in your sites place and company your website brings you.