by Jeremy
27. July 2009 10:29
Over the past several years, I've heard many arguments for the benefits of using CSS over Html tables for page layout. Having been abstracted away into the land of server controls via my usage of ASP.NET, I had not taken much time to fully utilize css. I've recently been involved in a project that benefited significantly from the usage of CSS over table layouts. This is not to say that the same output could not have been accomplished using tables, but the ease of maintenance and elegance of css blows away the table competition (or lack thereof).
The following are my recommendations in relation to CSS:
1) Take the time to learn it
Some web developers (my old self included) think of CSS as something that falls into the land of designers. While designers may have a more natural interest in CSS, developers should be just as interested, if not more so than designers. As a web developer, adding CSS to your toolbelt is one of the most effective uses of your self-training time. As developers, we often get caught up in the latest feature of a language or some "cool" technology, that, in practicality, we seldom use. If you learn CSS and use it correctly, you will use it on 100% of your web projects.
2) Layout your content logically before thinking about style
This separation of concerns is really the foundation of implementing CSS. CSS is only intended to affect the look of your pages. When you add your content and try to style it at the same time, you often end up with a lot of junk that you don't really need, creating more of a maintenance headache. Laying out content first, using the correct logical tags (e.g. a menu is simply a bunch of list items with links <li><a>Item</a></li>) will save you time now and in the future.
3) "Cascade"
Object-oriented developers are already familiar with the concept of inheritance. We know its effectiveness in programming, and that same effectiveness applies in CSS. Want to style every item in a list? Put the class (or id) on the list header tag (e.g. <ul>), not on every individual list item. Learn how to use inheritance and how to override styles correctly, and your stylesheet will shrink and be easier to maintain.