objeto CSS orientado

Question

vi esta presentation about object oriented css, pero creo que, o bien no lo entiendo correctamente o no entiende los beneficios del uso de CSS OO:

Ejemplo HTML:

<div class="border-1 bg-2 color-1 font-1"> 
</div> 

Ejemplo CSS :

/* borders */ 
.border-1 { border: 1px solid red; } 

/* backgrounds: */ 
.bg-2 { background: yellow; } 

/* other sections */ 

veo la ventaja de ser capaz de cambiar estilos de múltiples elementos de forma rápida, por ejemplo, ser capaz de cambiar el esquema de color sería muy útil.

Pero en realidad, está definiendo el estilo/apariencia dentro del HTML, o al menos una parte de él. Por supuesto, es mejor que usar el atributo style, porque aún puede intercambiar los estilos para un grupo de grupos.

El punto es que está definiendo los grupos de estilos dentro del HTML, pero aprendí que debe crear grupos "lógicos" dentro del HTML (ej. class="nav-item"/class="btn submit-btn") y el CSS aplica completamente el estilo y define qué elementos pertenecen juntos desde el punto de vista "estilístico" (por ejemplo, .nav-item, .submit-btn { background: red; }).

Quizás entendí mal el concepto. Sin embargo, todavía no conozco una buena forma de construir mi CSS.

Answer 1

CSS no está orientado a objetos. Mi sugerencia es olvidar lo que has leído sobre "CSS orientado a objetos" y en su lugar enfocarte en los problemas con CSS que estás tratando de resolver. Si van a hacer que CSS sea más fácil de escribir, leer y mantener, o para obtener más funciones (como variables CSS), creo que Less o Sass se adaptarán mejor a sus necesidades.

Usar CSS como lo que se sugiere con "CSS orientado a objetos" solo conduce a CSS terrible, no semántico y sin sentido que a la larga no es más fácil de mantener que el CSS "normal". Tanto id como class deben tener semantic and meaningful names, por lo que usar un marco que te permite escribir CSS semántico (que describe la intención en lugar de la presentación) es en mi humilde opinión mucho mejor.

Answer 2

Esto es más un "nombre que cae", que un método real. El código que ha mostrado a menudo es despectivo y se llama "enterprise css", no hay excusa para ello.

Además, tener múltiples clases de elementos en realidad perjudica el rendimiento.

Le aconsejo que se adhiera a Mozilla's guidelines al hacer su CSS, que funciona igual para otros navegadores, también. Y crea un archivo .css dedicado con hacks para IE6, 7 y 8.