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.

WDD Staff

WDD staff are proud to be able to bring you this daily blog about web design and development. If there's something you think we should be talking about let us know @DesignerDepot.