Preguntas frecuentes sobre CSS orientado a objetos

Texto original: http://wiki.github.com/stubbornella/oocss/faq (versión 28 cuando esté traducida)
Traducción: ytzong

¿Cómo definir "objeto" en OOCSS?

Los objetos son similares a las clases en JAVA y mantienen características OO.

Un objeto CSS consta de 4 partes:

1. Puede ser el HTML de uno o más nodos DOM.
2. Declaración de estilo CSS a partir del nombre de clase del nodo contenedor
3. Similar a las imágenes de fondo y componentes de sprites para visualización y
4. Comportamiento, escucha o método de JavaScript asociado con un objeto

Esto puede resultar confuso porque cada clase CSS no es necesariamente su propio objeto, sino que puede ser un componente de una clase contenedora. Por ejemplo:

<div clase="mod">
<div class="interior">
<div class="hd">Cabeza de bloque</div>
<div class="bd">Cuerpo del bloque</div>
<div class="ft">Pie de bloque</div>
</div>
</div>

El objeto es un módulo con clase mod. Incluye 4 nodos componentes (no pueden ser independientes del módulo, incluidos 2 bloques, interior y cuerpo, y dos bloques opcionales, cabeza y pie)

¿Cómo mejora OOCSS el rendimiento?

OOCSS tiene el doble de beneficios de rendimiento:

1. Código CSS altamente reutilizable, que requiere muy poco código CSS, lo que significa:
   • Archivos más pequeños, lo que resulta en transferencias más rápidas
   • A medida que aumenta la proporción de código CSS invocado en las páginas del sitio, se espera que el navegador lo reutilice o lo almacene en caché.
2. Menos redibujos y cálculos de diseño en lo que respecta al navegador
   • En una sola página, cuantas más reglas CSS se reutilicen, menos tiempo dedicará el motor de renderizado a los "valores calculados".
   • Las clases "extendidas" agregadas manualmente anulan menos reglas, lo que nuevamente significa que el motor hace menos para aplicar las reglas.

¿Quieres utilizar ID para diseñar el contenido?

Este es un "obsequio" de rendimiento cuando reutiliza un objeto en la misma página (o en el mismo sitio al mismo tiempo que se almacena en caché). El uso de ID para escribir estilos solo se puede usar una vez en la misma página. @cgriego (twitter) Lo comparé con singletons y creo que es muy preciso. Puede haber situaciones en las que desee utilizar ID para definir estilos, como menús de encabezado muy específicos. En este caso, puede utilizar ID para aislar elementos especiales y asegurarse de que el código aquí no afecte a otras partes del sitio. Piénselo dos veces antes de elegir ID en lugar de clase. A medida que su sitio crece, es muy difícil predecir qué harán otras personas con el HTML creado a partir de su CSS. Si tiene la opción, considere la escalabilidad tanto como sea posible.

Estoy pensando en quitar las identificaciones de la cabeza, el cuerpo y el pie de la plantilla. Algunas personas pueden tener varias áreas de hogar. Múltiples encabezados y pies de página para un sitio son más difíciles de adivinar, pero apuesto a que hay diseñadores que piensan así, por lo que es probable que los ID desaparezcan (no es tan fácil, lea el artículo original: Alguien podría tener múltiples áreas de contenido principal. Múltiples Los encabezados y pies de página de los sitios son más difíciles de imaginar, pero apuesto a que hay un diseñador que puede idear algo así, por lo que es muy probable que las identificaciones desaparezcan).

Por otro lado, los ganchos de identificación son excelentes para vincular. Póngalos en HTML, pero no los use para escribir estilos.

Fuente: 99css