How ‘not’ to write a Stylesheet !

We have a heap of tuts / resources over the web telling us what standards to follow, what are the best practices, what is the optimal way to build something and so on, and when it comes to Web Standards, we are blessed to have some really genuine contributors / gurus who fill-up the web with some really cool articles and resources, everyday. With the Web-Standards becoming a necessity, rather than a privilege, suddenly there is a lot of importance being attributed to the cleanliness of code and the smarter way of framing an optimal CSS, be it an application or a simple static website. Its all about sticking to the basics and being lot more patient till the final crappy code disappears from the file :)

Here are some strict ‘NO’s while coding your CSS. ( A quality code not only cements your standard-adherance, but it also gives the extra scalability and reduces those late-night coding horrors :P )

No ‘!important’

In CSS, the “!important” suffix was originally intended to provide a method of overriding author stylesheets. Users could define their own “user stylesheets” and could use this suffix to give their rules precedence over the author’s (website creator’s) styles. Unfortunately, and quite predictably, its usage has spread massively, but not in the right direction. Usage of this suffix could mean that, you are not using the ‘selector specificity’ smartly enough.

Avoid ‘@import’

‘@import’, can be very handy when dealing with a project where there are a lot of CSS files depending on various modules. While this is very useful in organizing modular CSS, there are many downsides too associated with it. Importing stylesheets can significantly screw up your site download time and there are various instances where you can end up in some weird situations while using it. ‘Steven souders’ – a noted web performance guru has comprehensively noted down the effects of using ‘@import’ – http://www.stevesouders.com/blog/2009/04/09/dont-use-import/

No ‘expressions’

CSS expressions are great to implement dynamic property implementation using javascript expressions inside CSS . As this is supported from IE5, we can smartly code an expression for IE family, since it is ignored by other browsers.  Since these  expressions are triggered more times that we normally expect them to …. this generates a lot of HTTP requests which in turn would slow down the website / page performance. There are other alternatives though for not completely avoiding expressions from your CSS. This is by using a one-time expression that sets the CSS value explicitly.

Inline Codes

The dirtiest way to code a beautiful XHTML page – including inline styles into the tags ! Finding a single inline code in your page can question the credibility of your web standard compatibility. So walk tat xtra mile and get rid of those ugly little ‘style’ tags.

Design based selector names

I have been through various stages of CSS skill levels, and walking back a couple of years, i normally ended up coming up with some really interesting names for my selectors. Let me list some of them :)

  • .padding50px
  • .border3right
  • .redbg
  • .height300px
  • .gotohell :P

Naming conventions / practices can reveal the standard of coder in you. CSS is meant to seperate the Content and Presentation, and the red background that your visual design had given can change to a yellow one, 2 years down the line. Keeping scalability in mind while developing an optimal CSS framework is the attribute of a smart web developer. Find some names that are related to the element based on an overall architecture of the page. For eg. ‘.redBg’, can be given ‘.note’, where it represents a text which can be  a note to the reader … Chose the names smartly and the next time someone sees your code, the standard will talk volumes of your efficiency.

Comments

Adding comments to your code as you go on coding is a great attribute never to be given away. Comprehensive and ‘to the point’ commenting can really be a turning point in some critical changes when some one else would be required to make some quick changes to the style you have coded. ‘Scalability’ – is again the keyword here  !

There are numerous other best practices in coding a stylesheet and adhering to the above points would mean that you have got a strong framework to start with a colorful career in web development :)