Personal CSS Practices

For me the first step on the path from designer to developer was to fully grasp CSS. It’s a beautiful language that I truly love and like most web technologies there are ton of ways to do the same thing. Below are some of my personal css practices. Please don’t expect a master list of everything that you should or shouldn’t do when writing CSS. I feel that Google locked this down with their HTML/CSS Style Guide which I absolutely love and follow, as best as I can, to a tee.

Alphabetizing

Knowing where I need to look for a property that I need to edit makes it that much easier to do what I need todo faster. Alphabetizing does this perfectly. But what’s a dev todo with vendor specific prefixes? I go with order of importance.

-webkit, -moz, -ms, -o, etc.

Fonts

Personally I can’t stand Arial or Book Antiquta. Blantant font rip offs really piss me off. When declaring my font family I purposely avoid both.

  • When inheriting code I try my best to stick with what the previous dev used, if it doesn’t suck.
  • I’m a fan of k-a-b-a-b dashes for my css classes and ids
  • Using classes vs. ids

Most importantly I never stop reading, learning and writing CSS.

Further Reading

http://google-styleguide.googlecode.com/svn/trunk/htmlcssguide.xml
http://www.sitepoint.com/css-sass-styleguide/

Tabbing in a modal

Issues can sometimes arise with tabindex when you have a tabindex applied to elements on your page and in your modal. If you want to make sure that when tabbing in a modal that your tabindex does not leave the modal. Apply the code below, inline, to your last tabindex in the modal.


onblur="previousElementSibling.focus(tabIndex)"