CSS Guidelines

Unoficial

I find it important to keep your source code organized, not just files, but even in the structure.
Here is the self-standard I have adapted.

That's the order I'd like to see them if they are all used.
selector {
  clear
  float
  position
  top
  left
  bottom
  right
  z-index
  margin
  padding
  width
  height
  display
  overflow
  border
  background
  font
  text-decoration
  letter-spacing
  line-height
  /* opacity through JavaScript */
  /* border corner radius through JavaScript */
}
I don't like using PNGs to get a rounded corner effects, I simply find it too messy and time consuming. The only good thing about it is you can get the "boxes" to display 100% as you intended them to. The other best way to do it is by using the jQuery corner plug-in. It will create a rounded corner with the canvas HTML element which has a background of whatever the CSS background is and a rounded edge of the same colour as the CSS border. This will look fine as long as the element behind it has a plain background as well, meaning you can't have a picture behind it otherwise you'll end up with a squared box with rounded borders running along the "inside" instead of a rounded box. It's not until recently that I find out that CSS3 is working towards making a border-radius 
selector {
  border-radius: 10px;
}
It was great and all, but it's not quite implemented by browsers yet, so it was pretty much useless to me. So I went about modifying the stylesheet with firebug and then I mistyped something and firebug autocompleted -moz-border-radius. Seeing that I quickly hit the tab key and entered a value, and the corners were round! I took a look around Google and I found that WebKit also has -webkit-border-radius. 
selector {
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
}
No dice, it worked and all but only for Mozilla and WebKit based browsers, and it's not valid CSS. So I threw it into a JavaScript file and have it handle everything. 
function corner(aElem, aRadius)
 if ($.browser.mozilla)
   $(aElem).css('-moz-border-radius', aRadius);
 else if ($.browser.safari)
   $(aElem).css('-webkit-border-radius', aRadius);
 else
   $(aElem).corner(aRadius);
}
I use jQuery to check if it's Mozilla or Safari browsers and apply a style property to the element, otherwise use the corner plugin to place the canvas. Another issue I had with validation was the opacity. CSS3 is working towards a opacity, although it may work on some browsers. So I threw this into my CSS: 
selector {
 opacity: 0.2; /* CSS3 */
 -moz-opacity: 0.2; /* Old Mozilla */
 -khtml-opacity: 0.2; /* KHTML Engine */
 filter: alpha(opacity=20); /* IE5 - IE7 */
 -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=20)"; /* IE 8 */
}
It works well and my elements have a transparency in them, but it doesn't validate and my file comes out with errors, so again I turn to JavaScript & jQuery: 
$(elem).css({opacity: 0.2});
I also leave a commented line in the CSS file for those elements that have rounded corners or opacity as indicated in my first sample above. It's good to have it there for reference.

Original post found here

Comments

Samer Ziadeh
Samer Ziadeh
Web Developer
Toronto
Article rating:
Your rating:

Categories

Based on community consensus.

Activity for this knol

This week:

14pageviews

Totals:

353pageviews
©2009 Google