OOCSS – CSS Orientado a Objetos
Lunes, 5 de Julio de 2010
Cuando creamos las hojas de estilos css para nuestro site, es muy importante hacerlo de una forma mantenible y modificable y vale la pena perder un poco de tiempo pensando como se llamarán los estilos.
Nicole Sullivan propone una metologÃa para los css e implica la reutilización de estilos y su fácil mantenimiento. Sullivan nos propone dos principios para generar nuestros css:
- Separar l’estructura de la piel o apariencia
- Separar el contenedor del contenido
Los errores a la hora de hacer los estilos segun Sullivan:
- Estilos dependientes de la localización.
- Evitar la especificación de la classes en los tags. EJ: div#menu
- Evitar los ID dentro de las areas del contenido.
- Evitar el “image sprite” de todas las imagenes.
- Evitar la alineación en altura.
- El texto como texto no como imagen.
- Redundancia de estios.
- Evitar la optimització prematura.
Otras de la recomandaciones que podemos encontrar es cuando tenemos estilos parecidos es escoger uno de ellos:
- Estilos parecidos : cuando tenemos titulos muy parecidos entre ellos.
- Evitar redundancia: cuando tenemos border redondos muy parecidos, con sombra, sin sombra, con sombra un poco más ancha, se escoge uno.
- Regla para las imagenes: Si tenemos dos imagenes muy parecidas escogemos una de ellas.
- Consistencia: no sobreescribamos los estilos que hicimos antes por unos nuevos.
En resumen, es aplicar un poco de teoria OO a los css para hacerlos más mantenibles. Y poner un poco de coherencia a la hora de hacer las hojas de estilos. Para ayudar a la creación de los estilos nos podemos basar un poco con el diagrama de classes de nuestra aplicación, como punto de partida para generar los principales estilos de nuestra aplicación.
A continuación pongo el enlace donde de puede ver ejemplos de los oocss y de las diapositivas de OOCSS.
