El CSS Orientado a Objeto, CSSOO, es una metodología que te ayuda y facilita al mantenimiento de la hojas de estilo (CSS)

El CSS Orientado a Objeto, CSSOO, es una metodología que te ayuda y facilita al mantenimiento de la hojas de estilo (CSS). El término lo propone Nicole Sullivan, encargada de rendimiento de las páginas web de Yahoo. Aunque Nicole propone un "framework" no necesariamente se tiene que ajustar a uno. Más bien el CSSOO es una serie de principios que se pueden utilizar a la medida y ajustes personales en cualquier proyecto. Nosotros lo hemos utilizado, de forma indirecta y sin conocer el término. Con cada proyecto buscamos mejorar nuestro sistema y nos damos cuenta de que realmente una metodología como esta funciona.

La lógica es reducir la cantidad de clases (class) utilizada repetidamente dentro de la hoja de estilo y tener pendiente que cuando se añadan más elementos a la página, no tengamos que añadir más estilos. Esto permite un mantenimiento más efectivo. A cuántos nos ha sucedido que cuando añadimos un nuevo elemento a la página, tenemos que re-escribir o añadir más estilo al CSS. Al utilizar este principio podemos definir cuáles son los elementos que necesitaremos en el futuro, sin añadir o cambiar el enmarcado actual.

La idea del CSSOO es muy sencilla. Vamos a realizar un simple ejemplo. Un párrafo con un mensaje de error. Se aprovecha que el atributo "class" puede tener diferentes valores. Por ejemplo, podemos tener una clase llamada "mensaje" y en el mismo contenedor o elemento ponerle otra clase llamada "error".

	
<p class="mensaje error">
Contenido.
</p>    

El valor "mensaje" puede agrupar varios propiedades de CSS que son comunes a todos los contenedores "divs" que tengan el valor mensaje (tamaño, espacio, tipografía). En el ejemplo de abajo le pondremos un "padding" y "border".

Si el html es:

		
<p class="mensaje">
	Contenido
 </p>

 

El CSS:

		
.mensaje {
	padding:10px
	border:1px solid;
	}

Ejemplo

Ahora si le agregamos otra clase "error" podemos ser más específicos y sobreescribir sólo lo que necesitamos.

<p class="mensaje error">
      Su aplicación ha sido enviada.
</p> 

El CSS:

	
.error {
	background: #FBE3E4; 
	color: #8a1f11; 
	border-color: #FBC2C4;
	} 
	

Así podemos tener:

	
.exito {
	background: #E6EFC2; 
	color: #264409; 
	border-color: #C6D880;
	}
.advertencia {
	background: #FFF6BF; 
	color: #514721; 
	border-color: #FFD324;
	}
	

Esto nos va a segurar que todos los elementos con la clase "mensajes" tengan un estilo general y cuando sea un mensaje de "error" o de "exito" sólo cambiara lo que necesitamos. Esto nos ayuda a realizar modificaciones más rápidas dentro de nuestras hojas de estilo.

Hay otros principios sobre el CSSOO que son cruciales y que abordaremos más adelante.