Tuesday, March 13, 2012

CSS Guidelines

Here is the key points from this open source guidelines, have not got time reading all inline links, but it is really awesome
  • Use hyphen delimited, lowercase selectors
  • Always use a trailing semi-colon on the last declaration in a rule set
  • Comment as much as you can as often as you can
  • If you have to build a new component, split it into structure and skin
  • Never ever set heights on p, ul, div, anything. You can normally achieve the desired effect with line-heights which are far more flexible
  • You should never apply any styles to a grid item, they are for layout purposes only
  • Shorthand is good, but easily misused, so be explicit
  • Make sure styles aren’t dependent on location where possible, and make sure selectors are nice and short
  • An over-qualified selector is one like div.promo. We could probably get the same effect from just using .promo
  • Be explicit; target the element you want to affect, not its parent
  • Never assume that markup won’t change
  • Do not use IDs in CSS at all
  • It is okay to use !important on helper classes only
  • Every hard-coded measurement you set is a commitment you might not necessarily want to keep
  • IE stylesheets can, by and large, be totally avoided. As a general rule, all layout and box-model rules can and will work without an IE stylesheet if you refactor and rework your CSS
  • The difference between IDs/classes and types/descendants is fairly huge… The difference between themselves is slight
  • The key selector, as discussed, is the right-most part of a larger CSS selector. Key selector is the one which determines just how much work the browser will have to do
  • Overqualified selectors make the browser work harder than it needs to and uses up its time

No comments:

Post a Comment