CSS Orientado a Objetos

Siempre escuchamos o leemos sobre las "buenas practicas" o hacer tu web "reciclable", después de haber leído muchos (pero muchos) tutoriales .. se mantenia la pregunta... pero.. ¿cómo? Me refiero a que estaba en busca de un proceso mas metódico de trabajo...

Así fue como me tope con este concepto de CSS Orientado a Objetos (OOCSSS Object Oriented Css), que básicamente intenta separar los contenedores de los contenidos, y sus estructuras de la parte estética o skin. El objetivo es generar un código mas rápido, eficiente y fácil de actualizar. - Lo que me fue muy provechoso, sobre todo, para proyectos mobile -




El siguiente slideshare resume las pautas del OOCSS

Object Oriented CSS from Nicole Sullivan

Por ultimo alguno consejos para implementar esta práctica:

1. Evitar el selector descendente (ej. no usar .sidebar h3)

2. Evitar usar IDs como ganchos de estilos

3. Evitar vincular clases a elementos de la hoja de estilo (ej. no usar div. header ó h1.title)

4. Según casos muy excepcionales, evitar el uso de !important

5.  Usar CSS Lint para chekear el codigo

6. Usar CSS grids

Fuentes de Consulta:

http://oocss.org/

http://coding.smashingmagazine.com/2011/12/12/an-introduction-to-object-oriented-css-oocss/

http://coding.smashingmagazine.com/2009/04/27/the-mystery-of-css-sprites-techniques-tools-and-tutorials/
https://github.com/stubbornella/oocss/wiki/FAQ
https://github.com/stubbornella/oocss/wiki