# GlobalGiving CSS Style Guide ## Meta information ### Language This document is written in [GitHub Flavored Markdown](https://help.github.com/articles/github-flavored-markdown/) ### Sources Based on the following excellent style guides: * [Medium](https://gist.github.com/fat/a47b882eb5f84293c4ed) * [Github](https://github.com/styleguide/css) ### Background reading A few articles that explain the intent and context of this document: * [Object-oriented CSS](http://www.smashingmagazine.com/2011/12/12/an-introduction-to-object-oriented-css-oocss/) * [BEM](http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/) * [Suit CSS naming conventions](https://github.com/suitcss/suit/blob/master/doc/naming-conventions.md) * [Harry Robert's CSS styleguide](http://cssguidelin.es/#architectural-principles) is quite a rant, and probably too in-depth for the casual CSS-writer, but the sections on [CSS selectors](http://cssguidelin.es/#css-selectors) and [Architecture](http://cssguidelin.es/#architectural-principles) are particularly lucid. * [How browsers work](http://taligarsiel.com/Projects/howbrowserswork1.htm#CSS_parsing) very long and very thorough technical discussion of what it takes to render a webpage. The CSS section in particular is really helpful. ## Where to write CSS styles In .less and .css files **only**. The only exception I've found is when you need to define an explicit height or width for an image; then it makes sense to do `style="height:100px;"` but it also makes me cringe a little every time I do it. There's no reason to ever add `