post icon

OOCSS – CSS Orientado a Objetos

5 jul 2010

Publicado por atCreativa

0 Comentarios

    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:

    1. Estilos dependientes de la localización.
    2. Evitar la especificación  de la classes en los tags. EJ: div#menu
    3. Evitar los ID dentro de las areas del contenido.
    4. Evitar el “image sprite” de todas las imagenes.
    5. Evitar la alineación en altura.
    6. El texto como texto no como imagen.
    7. Redundancia de estios.
    8. 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.

    Sin comentarios

    Deja un comentario

    Dejar un comentario