I’ve been a big fan of using grid in most of my work in recent years. One of the main things I enjoy doing it is because of the symmetrical of the design and the aspect of re-using many of the CSS selectors within the same project. It’s exciting to write less markup and CSS to do more with design and implementation. And as many have heard “less is more”; by using CSS framework, it allows you to do just that.

I consider DotNetNuke community (at least the web designer community within DotNetNuke) is sort of a laggard group in adopting web standards until recently. Many people have talked and written books about the benefits of using web standards as well as how to do it properly, but progress has been slow within the DNN community.

One of the aspects of modern web trend has brought to my attention is the adoption of YUI in DotNetNuke 5 release. I think it’s a great add-on to the framework but lack of documentation to explain and assist web designers to take advantage of it. Here I share with you my thoughts about using CSS framework, not just specific to YUI, but other frameworks available out there.

Pros:

• Save time on development
  When working on projects that has similar layouts and structure, CSS framework allows you to do less but accomplish more. It means that you can reuse many CSS selectors already defined for you for all of the positioning work not just for site layout, but also content styling as well.
• Cross-browsers Tested
  If you are a type of web designer that always run into cross browser issues with site layout, you may find CSS framework extremely helpful. All of these debugging tasks you have been doing for a while, now are taken care of by frameworks.

Cons:

• CSS framework is NOT for newbie
  If you’re not having a solid understanding of CSS, using CSS framework is not recommended. CSS framework will make you less efficient in writing simple CSS rules and it’s harder for you to debug when you run into issues.
• Slow down your learning curve
  Most CSS framework provides reset files, which will reset all the default browser’s CSS rules (oh and by the way, if you don’t know that every browser out there has its own style sheet, then you shouldn’t even bother to use CSS framework anyway). You will need to define your own values in typography and layout to provide a consistent presentation for your site content. These types of tasks require you to have a good knowledge of CSS to accomplish it.
• Writing semantic markup could be an issue
  It is harder to write meaningful naming convention for the selectors since you’re following the system the author set forth. The benefits of naming CSS selectors according to content that you’re building are to assist you in building better markup and save time in debugging for cross browser issues. Because you keep reusing the CSS selectors with naming convention created by the author, it might not make much sense in designing web sites.
• Steep learning curve
  Any framework out there will require you to learn how it works. You might spend more time on learning the patterns the CSS framework authors created then actually being productive in writing your own markup. To get better at using it, you must use them repeated for many projects in order to familiar with the system, this will also limit the ability to think “outside the box”.

My recommendation? Don’t use it.

I’m the type of person that is very picky about markup and CSS rendering on a page. If an element does not serve any purpose on that page, it doesn’t belong there in the first place.

To actually optimize your site for performance and to deliver best practices (so you can feel good about yourself) of your work, write your own markup and CSS. No web site is built better than hand-crafted markup and CSS to provide the meaning of the code instead of making it generic.

DotNetNuke skinning is a bit challenging for beginners, if you started out by using CSS framework, it actually adds another item on the list for you to learn, therefore, it slows down your ability to get to skinning quickly.