CSS
Article by on April 11, 2012, last modified on August 30, 2013
Cascading Style Sheets (CSS) is the painter's palate of web development; it gives life to the blank canvas that is HTML. Personally, I often loath working with HTML and CSS because of how inconsistent browsers are in rendering it and how inconsistent browser support for various aspects of CSS are. Fortunately, this landscape is changing and browsers are making efforts to standardize rendering.
Browser Support
In determining browser support, my go-to is: caniuse.com. As far as being able to write CSS cross browser I recommend setting up VirtualBox with at least 3 virtual machines: 1. Windows XP with IE8 (this allows you to test down to IE6), 2. Windows 7 with IE9, and 3. Windows 7 with the latest IE, whatever it is.
Perhaps this isn't news to anyone, but forewarning IE10 does not support conditional comments. Even more unfortunate is that MSDN removed the comments from the page about their lack of support, because they were a rather entertaining read (yes, I already checked the Wayback Machine).
Generating CSS
Check out css3generator.com. It's awesome. It will generate snippets of CSS for you.
For gradients, I like to use CollorZilla's Ultimate CSS Gradient Tool, but colord is much nicer looking.
CSS Coding Guidelines
Here are some links. I highly recommend being familiar with SMACSS, BEM, and "intelligent" CSS.
- Scalable and Modular Architecture for CSS (SMACSS)
- Block-Element-Modifier (BEM)
- Object Oriented CSS (OOCSS)
- Functional CSS (FCSS)
- Intelligent CSS (this one is my favorite, but read the others first)
- csswizardry/CSS-Guidelines
- "Decoupling Your HTML, CSS, and JavaScript "