scss - CSS orientado a objetos: ¿Frase de zumbido pegadizo o enfoque de diseño legítimo?

itcss

Question

Parece que hay un nuevo eslogan emergente en el campo de desarrollo web: CSS orientado a objetos.

A primera vista, esto me parece simplemente como un paquete de buenas prácticas en un eslogan pegadizo. Entiendo y respeto plenamente las intenciones detrás del movimiento, pero ¿hay algo más en ello?

¿Alguien tiene alguna información adicional que distinga este enfoque como algo más creíble o debo tomarlo como un recordatorio para asegurarme de heredar y hacer mis clases en cascada correctamente?

Answer 1

CSS es similar a los idiomas OO en muchos aspectos: escribir

p { color: red }
p span { color: blue }

y tienes esencialmente la herencia. Aquí hay un ejemplo más complicado con tener terrier extender perro extender clases de animales:

.animal { font-weight:bold; color: blue; } 
.dog:before, .terrier:before { content: "GRRR"; }
.animal, .dog, .terrier { color: brown } 

Ahora puedes usar clases de animales, perros y terrier de una manera OO.

Es importante recordar que CSS es muy bueno para resolver el problema para el que fue diseñado: especificar los estilos de los elementos de manera transparente. ¿Podría ser mejor con más conceptos OO? No estoy seguro. Digamos que alguien dice: el archivo CSS sería más simple si se viera así:

@class dog @derives_from animal /* the syntax i just invented */
@class terrier @derives_from dog

.animal { font-weight:bold; color: blue; } 
.dog:before { content: "GRRR"; }
.terrier { color: brown } 

Esto parece más simple, pero una solución aún más simple es dejar de usar @class mientras se agrega ''dog'' a cualquier ''terrier'' y ''animal'' a cualquier servidor ''dog'' (declaración de reemplazo trivial) o con javascript.

Lo mejor de CSS es que es simple y cae fácilmente, lo que significa que los navegadores no necesitan interpretar CSS que no entienden y las cosas funcionan bastante bien. Ya que tendrá que romper esta compatibilidad hacia atrás con las nuevas estructuras CSS importantes, creo que esto hace que el CSS orientado a objetos sea más una frase de moda.

Answer 2

Creo que la palabra de moda de llamarlo "CSS orientado a objetos" en realidad está disminuyendo su utilidad y la adopción más amplia del concepto.

Cuando lo leí, creo que la afirmación de que era OO en realidad ralentizó mi comprensión de lo que realmente era.

La gente que sabe lo que significa "orientado a objetos" en la programación será escéptica, porque no es realmente OO, ¿verdad? Es solo un intento de aplicar algunos principios OO a CSS para mejorar su eficiencia. Y por otro lado, la mayoría de los desarrolladores del lado del cliente no entenderán el concepto en absoluto si no son programadores, por lo que simplemente se sentirán desconcertados o avergonzados.

Así que, gran concepto, necesita rebranding. CSS máximo! Power CSS! CSS Reborn! CSS al cuadrado! CSS Prime! Algo como eso.

Answer 3

Diría que es más una frase de moda pegadiza para algo que ya está presente en CSS. Por supuesto, antes de comenzar a hablar sobre qué es OO y qué no, y cómo CSS está orientada a objetos, tendríamos que definir qué es en realidad, que es algo con lo que otros han luchado antes y está sujeto a debates acalorados. Pero si asumimos que los principios básicos de OO son:

• Clase
• Objeto
• Ejemplo
• Método
• Paso de mensajes
• Herencia
• Abstracción
• Encapsulacion
• Polimorfismo
• Desacoplamiento

podemos decir, que las hojas de estilo en cascada están orientadas a objetos, porque permiten definir clases, instancias / objetos creados (asignando una clase a un elemento), herencia de clases (incluso herencia múltiple), abstracción (por ejemplo, definiendo estilos para los elementos lisos) y polimorfismo (definiendo el mismo nombre de clase para diferentes elementos). Por supuesto, los métodos / el paso de mensajes no son posibles, debido a la naturaleza estática de CSS.

Entonces, en general, diría que es un enfoque válido para desarrollar CSS de una manera orientada a objetos, pero realmente no lo llamaría CSS orientado a objetos, porque al menos para mí es algo profundamente inherente a CSS. Sería algo así como decir "Estoy haciendo Java orientado a objetos ..."

Answer 4

El término "CSS orientado a objetos" es un nombre inapropiado.

"El CSS orientado a objetos" es en realidad solo un patrón de diseño sobre cómo SMACSS al máximo su CSS y es básicamente el mismo enfoque que Jonathan Snooks llama SMACSS .

Ya sea que lo llame OOCSS o SMACSS, la clave del enfoque es que cree elementos de UI genéricos como la abstracción de navegación . Estos elementos de la interfaz de usuario se pueden mejorar con características más específicas agregando clases adicionales al elemento y / o un elemento contenedor. O, como alternativa, puede agregar sus propias reglas CSS personalizadas mediante el ID del elemento o las clases semánticas.

Cascade Framework es un nuevo marco CSS basado en este enfoque. Le proporciona un rendimiento óptimo, una flexibilidad óptima y una modularidad óptima con solo un espacio reducido.

Answer 5

Enfoque pegajoso y enfoque de diseño legítimo.

Aunque creo que algunas de las ideas son un poco ingenuas, ya que tienden a olvidar los paradigmas de desarrollo web de "los cambios de los clientes a medida que avanzan".

Answer 6

Es realmente una de esas cosas discutibles como tablas vs divs, etc.

En mi opinión, hay muchos desarrolladores tan arraigados en OO que intentan pegarlo en todo, primero Javascript y ahora CSS. No me malinterpretes. JavaScript también tiene elementos de OO, pero estoy divagando.

Dado que CSS ya es una palabra de moda en sí misma (todos los empleadores quieren el enfoque de CSS de la web 2.0) muchos desarrolladores nuevos lo están descubriendo. Esto no es algo malo, sin embargo, como desarrolladores hicieron lo que hicieron mejor y trataron de mejorar el CSS. En la mente de los desarrolladores (soy un desarrollador), organizar CSS de acuerdo con los principios de OO tiene mucho sentido, de ahí la nueva palabra de moda.

En última instancia, lo que trato de decir es que OO CSS es solo un enfoque que ciertas personas adoptan, ya que parece más lógico. Si está escribiendo CSS que será mantenido por los desarrolladores, este enfoque será adecuado. Realmente depende de cómo escribas tu CSS y tu propio estilo personal ...

Personalmente no me importa cómo las personas escriben su CSS: si me corresponde a mí mantenerlo, Firebug hace que el trabajo sea trivial de todos modos.

Answer 7

Escribiendo esta respuesta todos estos años después para la posteridad. Todas las respuestas anteriores claramente nunca han escuchado hablar seriamente de CSS orientado a objetos. Cuando el OP preguntó si era una palabra de moda, debería haber sido una indicación de que la expresión se refería a un tema que merecía una conversación (más que "¿Qué queremos decir con orientado a objetos?").

Objected Oriented CSS es un término que creo que fue acuñado por Nicole Sullivan, evangelista de tecnología de front-end de Yahoo, después de que ella consultó para Facebook al refactorizar su código de front-end de presentación en algo más delgado y más manejable que aún podría extenderse y modificarse fácilmente como tiempo. siguió. El término ''orientado a objetos'' no se refiere a la naturaleza de CSS en sí (como tal), sino a un enfoque para escribir CSS y el marcado afectado que se presta a la concisión y la extensibilidad.

Algunos principios de ejemplo de OO CSS incluyen:

• Evite usar ID como selectores: el hecho de que un objeto sea único no significa necesariamente que sus propiedades clave se definan de manera tal que anulen a todos los demás.
• Evite los selectores largos basados ​​en marcas anidadas: definir la apariencia de un elemento en función de su ubicación incidental en la estructura del documento suele ser una falacia lógica, y moverlo a una nueva ubicación lo obligará a volver a escribir el selector. Al igual que con lo mencionado anteriormente, esta mala práctica también es causa de anulaciones condicionales o extensiones para que necesiten mayor fuerza y ​​especificidad en sus selectores, lo que rara vez es útil.
• Use el marcado no semántico para crear elementos con distintos propósitos de presentación, en lugar de tratar de sobrecargar todos los aspectos específicos de la apariencia de un elemento individual en una regla. Esto lleva a CSS menos verboso.

En última instancia, el objetivo de OOCSS es SECO. No deberías estar escribiendo miles de líneas de CSS cuando estás creando esencialmente variaciones de cosas similares.

Nicole ha dado algunas buenas charlas sobre el tema; también ha escrito algunos artículos que amplían algunas técnicas útiles para emplear y malas prácticas para evitar.

''OOCSS'' también es el nombre del framework que ha escrito y que proporciona un código de repetición para diseños CSS extensibles. Cómo y por qué este marco es tan bueno (el módulo de grillas es algo que uso virtualmente en todas partes) no es completamente evidente por el propio código, y leer en las publicaciones de su blog sobre las ideas subyacentes definitivamente ayudará a usarlo mejor. y CSS en general.

Answer 8

He estado avergonzando tanto a OOCSS como a las convenciones de nombres de BEM durante bastante tiempo y NUNCA miraré atrás. Para aquellos que afirman que es solo una "palabra de moda pegadiza" o "CSS ya hace esto", no entienden el potencial de escribir css utilizando estas dos metodologías.

Veamos el más simple de los objetos, una lista con enlaces. Viene en muchos sabores diferentes:

1. Los menús

2. Barras de herramientas

3. Pestañas

4. Paneles (Bootstrap)

En OOCSS, encontramos las propiedades comunes de cada uno de estos y creamos un objeto base. Normalmente lo llamo nav.

/*  Nav
    =================================================*/

    /*  B
        ---------------------------------------------*/

        .nav
        {
            margin-left:            0;

            padding-left:           0;

            list-style:             none;
        }

    /*  E
        ---------------------------------------------*/

        .nav__item
        {
            float:                  left;
        }

        .nav__link
        {
            display:                block;

            color:                  inherit;

            text-decoration:        none;
        }

    /*  M
        ---------------------------------------------*/

        .nav--right
        {
            float:                  right;
        }

        .nav--stack .nav__item
        {
            float:                  none;
        }

Notarás algunas cosas:

1. Nav es el objeto base que se aplica al elemento de bloque.

2. Los elementos secundarios tienen el prefijo nav_

3. Los modificadores tienen el prefijo nav--

4. Un modificador es una opción que cambia el comportamiento. Por ejemplo, el derecho flota el derecho de navegación.

Una vez que tengo mi objeto base witten, creo skins que cambiarán la apariencia del objeto. Esto lo convertirá en barras de herramientas, pestañas, etc. Microsoft tiene pestañas Pivot en sus teléfonos. Es una piel más fácil de crear fpr ahora.

/*  Nav
    =================================================*/

    /*  E
        ---------------------------------------------*/

        .pivot .nav__item
        {
            margin-left:            24px;

            color:                  #aaa;

            font-size:          36px;
        }

        .pivot .nav__item--active, .pivot .nav__item:hover
        {
            color:                  #000;
        }

Para usar este objeto y la piel, escribirías

<ul class="pivot nav">

   <li class="nav__item">

        <a class="nav__link"> Item 1 </a>

    </li>

   <li class="nav__item">

        <a class="nav__link"> Item 2 </a>

    </li>

</ul>

Debido a su independencia de ubicación, también puede escribirlo como

<nav class="pivot nav">

   <div class="nav__item">

        <a class="nav__link"> Item 1 </a>

    </li>

   <div class="nav__item">

        <a class="nav__link"> Item 2 </a>

    </div>

</nav>

En última instancia, se está separando el contenedor de la piel. Yo sugeriría comenzar más pequeño con Nicole Sullivans Media Object. Echa un vistazo a Twiter Bootstrap e Inuit.css para más inspiración.

Answer 9

Llevo años diciendo esto.

Los selectores de CSS se basan en identificadores de instancia y clases. Incluso soporta herencia múltiple. ¿Cuánto más obvio podría ser eso?

La belleza de pensar en CSS en términos de objetos es que resulta muy sencillo comenzar a "lanzar" sus elementos de marcado. ¿Necesitas que div se convierta repentinamente en INotRenderedAnymore? Simplemente deje que JS extienda su atributo de clase para que coincida con .removed , no ensucie las propiedades de estilo.

Obviamente, ese es un ejemplo bastante trillado, pero los beneficios deberían ser claros, especialmente en el contexto de la manipulación de JS. Puede desacoplar el JS de los estilos reales que tiene que modificar, que es tanto un bono de mantenimiento como un bono de abstracción, pero también tiene beneficios complementarios, como no configurar directamente estilos de muy alta especificidad (que CSS no puede anular).

Answer 10

No hay mucho para eso, creo.

Hoja de estilo en cascada orientada a objetos de OOCSS

Reduce el código para que se repita una y otra vez y puede configurar un css global para foocontainer una vez y reutilizarlo en todas partes y tener un estilo personalizado para el header y el footer .

<div class="foocontainer header"> Your header </div> <!-- two classes -->
<div class="foocontainer body"> Your body </div>  <!-- two classes -->
<div class="foocontainer footer> Some footer </div> <!-- two classes -->

Bloque BEM - Element__Modifier

Mantiene el código fácil de leer pero feo de escribir y puede identificar fácilmente a los niños con sus padres.

<div class="foocontainer--header"> Your header </div> <!-- one class -->
<div class="foocontainer--body"> Your body </div> <!-- one class -->
<div class="foocontainer--footer> Some footer </div> <!-- one class -->