5 Principles of Excellent CSS Design
Posted by admin | Posted in Design | Posted on 31-10-2008
Whether you are just getting started in the world of web design or have been designing websites for years, there is always something new you can learn. Additionally, for most designers, there are areas where they can improve. In many cases, there may be something you have been doing for years, but this doesn’t necessarily mean it’s a good thing. Fortunately, with a little work, it’s possible to break these bad habits.
So, without further ado, I would like to introduce the five principles of excellent CSS design. Regardless of how much (or how little experience you have), take time to absorb these principles, and then beginning applying them to your daily work flow.
One Declaration, One Line
This one can be hard to follow at first, but I guarantee that once you get used to it, you will never think of looking back. Instead of placing each element of a declaration on one line, place the entire declaration on one line. It may seem counter-intuitive, but this will actually make it easier to find what you need within your CSS file. Additionally, getting rid of all the unneeded spaces and characters (mainly semicolons) will reduce the overall size of your CSS file.
When Centering, Use CSS
In most cases, centering the layout of a website not only increases its aesthetics, but also makes it more usable to visitors. If you are going to center a layout, make sure you do so through CSS and avoid any alternative methods. For an efficient way to center your layout with CSS, you can use the following declaration:
#container { margin: 0 auto; width: xxxpx; text-align: left; }
Focus on Simplicity
A lot of designers are always looking for hacks to make their designs work perfectly in specific browsers. Although CSS hacks seem like a solution to a problem, in reality, they can cause more problems to occur. This is especially easy to understand when you take into account the constantly changing nature of browsers and the Internet in general. Instead of constantly hacking your CSS, accept that your designs will never display perfectly in every browser, and spend your time focusing on creating fundamentally sound CSS designs. This simple but focused strategy to designing with CSS will pay off for you in the long run.
Declare Your DOCTYPE
You can create the perfect website, but if you don’t declare a DOCTYPE (or declare the wrong DOCTYPE), your website is still going to encounter all kinds of problems (because the browser is not going to know how to properly handle your code). Therefore, not only is important to always declare a DOCTYPE, but make sure you are declaring the correct DOCTYPE for the type of code you have written.
Embrace Shorthand
It may take some time to get used to, but the benefits of coding your CSS in shorthand are numerous. By keeping your code organized through the use of shorthand, you will find that it is much easier to find what you need and make any future maintenance updates to the code. Additionally, shorthand will decrease the size of your file, which will allow it to be loaded in a shorter amount of time.

