CSS: The Good And The Bad

If you didn't know by now, Cascading Style Sheet (CSS) is a very powerful tool for web design. So with any great power, comes great responsibilities. Sadly misuse and improper use of such power happens very often with beginners. So after going over some of the online tutorials and reading some of the tips and tricks of CSS, I want to share some of my findings with you, which will hopefully reduce some of the bad habits and instill some good ones.

Separate CSS from Code
First off, CSS can be use in three ways: Inline, embedded, and external. External CSS is the preferred choice because all pages in your website with similar elements can have the same style from one single CSS file. Embedded CSS is place in the head tag of the HTML file, and applies styling only to that page. Inline CSS is just like HTML styling where it's place inline with the element code. This method should be avoided because it only applies style to that one element. Inline CSS are typically used for testing.

Minimal Work
Writing less code reduces the amount of work and makes it easier to maintain. HTML should be marked up using the most appropriate tags for the content, reducing the use of "id" and "class". This in turn will minimize the amount of CSS need.

One way of minimizing CSS is to let the hierarchy do some of the work for you. Applying style to top level such as the body tag will let all content on that page inherit the styling. Another way is to group selectors that use the same style by putting them on one line using the same rule. Lastly, learning some CSS shorthand will reduce the amount of time and code needed.

Blast from the Past
Tables are the thing of the past and should not be use for design purpose. Rather than using tables, you should use div instead. If you are converting from table to div, you should know that div tag is a block-level element that defines a section, thus it should be use correctly and not overused.
Declaring font size by using pixels is still commonly used but should also be avoided because with the varieties of screen size and resolution being used today, having a fixed font size will different effects on different resolutions. Instead, try declaring font size using the em unit such as 1em or 1.5em. This practice allows easy changing of your entire site's font size by simply changing the BODY tag’s (or any other container tag’s) font-size property.

Validate your work
Last but not least, make sure you always validate your pages using both the HTML validator and the CSS validator. Using these validators will ensure you that you are following the standards.



Well, after browsing the web to find some good examples of CSS that I could use for my current project, Here are some sites that I think we all could get some ideas from:

www.ndesign-studio.com adds personality and flare while keeping it simple.


www.carbonica.org nicely incorporate images relating to the theme into the menu and links. Also divides the page into columns which I find to increase usability.


www.yellowstonepark.com contains drop-down sub menu when you hover over each main menu choice, which I feel that it makes navigating to a specific page much quicker and easier.


foxie.ru was list as a good design but after looking at the source code, I found that the site was done completely using tables, which in turns makes it a bad design. The artistic value is there but they completely threw usability and maintainability out the window.



Following these guidelines will not make you the best web designer, but will guide you down the right path....

Reference:
8 Common CSS Mistakes
How to Develop with CSS
15+ CSS Tips and Tricks
Table vs. Div