Smashing Podcast Episodio 19 con Andy Bell: ¿Qué es CUBE CSS?

Hoy, estamos hablando de CUBE CSS. ¿Qué es y en qué se diferencia de enfoques como BEM, SMACSS y OOCSS? Hablé con su creador, Andy Bell, para averiguarlo.

Mostrar notas

• CUBO CSS
• Piccalilli
• Aprenda Eleventy desde cero: ¡ahorre un 40 %!
• Andy Bell y Piccalilli en Twitter

Nota : Los oyentes de Smashing Podcast pueden ahorrar la friolera de un 40 % en el curso Learn Eleventy From Scratch de Andy usando el código SMASHINGPOD .

Actualización semanal

• “Lo que Vitruvio nos puede enseñar sobre el diseño web”
  por Frederick O'Brien
• “Una introducción a SWR: ganchos de reacción para la obtención remota de datos”
  por Ibrahima Ndaw
• “Cómo los diseñadores web pueden ayudar a los restaurantes a pasar a experiencias digitales”
  por Suzanne Scacca
• “Una guía práctica para probar aplicaciones de React con Jest”
  por Adeneye David Abiodun
• "Aspectos destacados de Django: Disputar activos estáticos y archivos multimedia (Parte 4)"
  por Philip Kiely

Transcripción

Drew McLellan: es un educador y diseñador web independiente con sede en el Reino Unido y ha trabajado en las industrias de diseño web durante más de una década. En ese tiempo, ha trabajado con algunas de las organizaciones más grandes del mundo, como Harley-Davidson, BSkyB, Unilever, Oracle y NHS. Junto con Heydon Pickering, es coautor de Every Layout, además de dirigir Front-End Challenges Club, que se centra en enseñar las mejores prácticas de desarrollo de front-end a través de desafíos breves y divertidos.

Drew: Su última aventura es Piccalilli, un boletín de sitio web con tutoriales y cursos para ayudarte a subir de nivel como desarrollador y diseñador front-end. Sabemos que es un desarrollador y educador experimentado, pero ¿sabías que fue la primera persona a la que se le permitió competir en Crufts con un panda?

Drew: Mis amigos de Smashing, por favor denle la bienvenida, Andy Bell. Hola, Andy, ¿cómo estás?

Andy Bell: Estoy genial, gracias. ¿Cómo estás?

Drew: Estoy muy bien, muchas gracias. Ahora quería hablarles hoy sobre algo que publicaron en su sitio, Piccalilli, sobre una metodología CSS que han desarrollado para ustedes mismos en los últimos años. En primer lugar, supongo que probablemente deberíamos explorar lo que queremos decir con una metodología CSS porque eso podría significar diferentes cosas para diferentes personas. Entonces, cuando piensas en la metodología CSS, ¿qué es para ti?

Andy: Esa es una pregunta buena y difícil para empezar, Drew. ¡Aprecio eso, gracias!

Drew: ¡Bienvenido!

Andy: Es complicado. Entonces, para el contexto, he usado BEM durante mucho tiempo, y ese es el Modificador de elemento de bloque. Eso ha existido durante mucho tiempo. La forma en que veo una metodología CSS es que no es un marco, es una estructura de organización. Así es como me gusta verlo. Es como un proceso casi. Es como si tuviera un problema que necesita resolver con CSS y usa la metodología para resolverlo y mantener las cosas predecibles y organizadas. BEM es simplemente legendario por eso porque ha tenido un gran éxito.

Andy: Entonces casi podrías calificar cosas como los componentes de estilo y ese tipo de cosas. Casi se puede decir que están orientados a la metodología a pesar de que están un poco más entrelazados con el marco, pero aún así, es una metodología para dividir las cosas en moléculas diminutas. Básicamente, eso es lo que estoy tratando de hacer con CUBE CSS también. Una estructura de pensamiento, creo que lo describí como.

Drew: Así que es una aplicación de proceso sobre cómo diseñas y escribes CSS, y no es tanto algo basado en herramientas o cualquier otro tipo de tecnología, es solo una especie de flujo de trabajo. Así que hay muchos enfoques diferentes por ahí. Mencionaste BEM. Hay SMACSS, OOCSS, Atomic CSS. Y luego tienes este tipo de enfoques inusuales de lovechild como ABEM. ¿Has visto ese?

andy: si

Drew: ¿Por qué publicar el tuyo propio?

andy: si, si ¿Por qué hacer el tuyo propio? Esa es una muy buena pregunta. Creo que los que me conocen bien saben que me gusta mucho navegar a contracorriente. Es principalmente porque tiendo a hacer muchos proyectos variados también, en equipos variados. Entonces, me di cuenta de que es muy difícil trabajar con BEM con un desarrollador tradicional porque están acostumbrados a usar CSS para lo que CSS es: la cascada, etcétera, y es por eso que lo robé del lenguaje. .

Andy: Por otro lado, las metodologías menos estructuradas son más difíciles de trabajar con un programador, una persona de JS porque les gusta la estructura, la organización y los componentes pequeños, lo cual es comprensible trabajando con el lenguaje en el que trabajan.

Andy: Así que me encontré en estos puestos en los que trabajaba con diferentes tipos de personas, diferentes tipos de proyectos en los que una metodología no funcionaba del todo. A lo largo de los años, he estado jugando con esta idea de cómo funcionan las cosas, y luego están las cosas que hicimos Heydon y yo, Every Layout, que de alguna manera reforzó la mayor parte, que es la C, la parte de composición. , y luego lo evolucioné muy rápidamente durante los últimos seis meses.

Andy: La única razón por la que escribí un artículo sobre esto fue porque estaba haciendo este curso y pensé que sería mejor escribir algún material complementario para que la gente lo entendiera, y es absolutamente inflado. Así que tal vez aún no hemos terminado con las metodologías, Drew.

Drew: Entonces, el material del curso que ha estado reuniendo en realidad usa CUBE CSS como metodología, ¿verdad?

andy: si Entonces, un buen 50% del curso es en realidad front-end, aunque es un curso ilimitado. Está tan, tan profundamente entrelazado en la forma en que construimos el front-end que no podía simplemente decir: "Oh, por cierto, así es como escribo un buen CSS" y luego dejarlo. Sé que a la gente le gusta entrar en detalles, así que pensé, lo que haré es escribir esta publicación que es muy larga y muy detallada y luego, si alguien quiere mejorar y entender realmente lo que estamos haciendo. , luego lo pueden hacer, y el resto es a partir de ahí. Y aquí estamos hoy, Drew, sentados y charlando al respecto.

Drew: Entonces, si alguien ya entiende BEM y quizás ya esté usando BEM, como ejemplo, porque esa es probablemente una de las metodologías más adoptadas, ¿no es así? Entonces, si ya tienen una comprensión de BEM y van a venir a CUBE, ¿es algo que les resultaría fácil de adoptar? ¿Hay muchas similitudes o es completamente diferente?

andy: si Diría que pasar de BEM a CUBE es probablemente una transición suave, especialmente por la forma en que me gusta seguir escribiendo el CSS para CUBE. Entonces, la mayoría de las cosas suceden en un nivel superior. Así que está sucediendo a nivel de cascada y está sucediendo CSS global, utilizando las utilidades para hacer muchas de las cosas. Pero cuando entras en detalles, son componentes, bloques y elementos muy parecidos a BEM. Lo único que es un poco diferente de BEM es que, en lugar de tener modificadores, usamos esta cosa llamada excepciones que, en lugar de usar clases CSS, se convierte en atributos de datos, lo que creo que da un poco de separación y un verdadero excepción, que es lo que debería ser un modificador.

Andy: Parte de la razón por la que me alejé de BEM fue porque descubrí que la forma en que trabajaba con él, especialmente en los sistemas de diseño, era que los modificadores estaban dominados y se convirtió en un problema porque era como, ¿cuál es el papel de mi bloque en este punto? Porque si lo estoy modificando hasta el punto en que es irreconocible regularmente, ¿esta metodología sigue funcionando como se supone que debe funcionar?

Andy: Luego está todo el asunto de los tokens de diseño, lo que hizo Jina con el Lightning Design System que todos hemos comenzado a adoptar ahora. Las cosas de la clase de utilidad realmente comenzaron a tener sentido con ese enfoque. Así que simplemente eliminé todas las cosas que me gustaban del trabajo de otras personas y las coloqué en el mío.

Drew: Hablas sobre BEM, el tipo de enfoque modificador que se sale de control. ¿Ese fue uno de los principales puntos débiles de BEM que CUBE intenta abordar?

Andy: Sí, absolutamente. Me gusta el enfoque modificador con BEM, tiene sentido. Lo que me gusta de BEM es algo que todavía hago, es el guión bajo doble para un elemento, y luego está el guión doble para un modificador. Me gusta esa forma de organizar las cosas. Fue solo un caso de estar bien, bueno, muchos de los modificadores que puedo considerar con clases de utilidad y luego los otros bits...

Andy: Entonces, el ejemplo que uso en el artículo es, imagina que tienes una tarjeta y luego la tarjeta se voltea, de modo que el contenido aparece antes que la imagen. Entonces eso tiene sentido, para ver la pantalla: flexiona y luego lo inviertes, inviertes el orden. Eso tiene sentido, tener una regla de excepción para eso porque es una excepción del estado predeterminado de la tarjeta, y así es como me gusta verlo. Es como un estado afectado en ese componente, eso es una excepción, y eso tiene sentido.

Andy: Con muchas de las cosas que he hecho más recientemente, la pila de front-end moderna con JavaScript reactivo, hay muchos cambios de estado y tiene sentido manejarlo adecuadamente entre CSS y JavaScript porque cada vez son más más entrelazados entre sí, te guste o no. Es un lenguaje común para ellos. Como puedes ver por mi cara, no mucho, pero ahí lo tienes. Probablemente esté pensando: "En realidad, he estado trabajando mucho con React últimamente, así que soy al revés". Así que puedo ver eso también.

Drew: Entonces entremos en CUBE. Entonces CUBE significa Excepción de bloque de utilidad de composición. ¿Está bien?

andy: si Ese es.

Drew: ¿Qué diablos significa eso?

Andy: Oh, amigo, ¡deberías haberlo escuchado antes! Estuve dando una charla el año pasado. Hice una charla, y se llamaba Manteniéndolo simple con CSS escalable, y allí presenté una versión anterior llamada CBEUT, que era el token de utilidad de elemento de bloque en cascada. Era basura. Odiaba el nombre de la misma. La hice un par de veces, esta charla el año pasado, y realmente no me gustó el nombre. Luego, cuando llegué a hacer estas cosas este año, pensé: "Realmente necesito pensar en qué es realmente y cómo se llama". Creo que CUBE es un poco menos basura. Creo que esa es la mejor manera en que puedo describirlo.

Andy: Pero entonces, los nombres siempre son basura para estas cosas, ¿no? Quiero decir, como BEM, ¡qué nombre de basura es ese! Pero todos lo hacemos. Mira Jamstack: ese también es un nombre terrible, ¿no?

Drew: ¡Mis labios están sellados!

Andy: Tu jefe dice: "¿Qué?" Es cierto. Así son las cosas, ¿no es así?, en nuestra industria.

Drew: Parece que muchas de las metodologías de CSS intentan solucionar algunas de las características de CSS, cosas como la cascada. Mi entendimiento de lo que leí es que CUBE intenta hacer uso de ese tipo de características y propiedades de CSS.

andy: si Una buena analogía para esto es SCSS, como Sass, es una extensión del lenguaje CSS natural, ¿no es así? Todavía tienes bastante razón en CSS. Entonces CUBE CSS es así. Así que es una extensión de CSS. Así que todavía deberíamos escribir CSS, ya que CSS debería... bueno, se supone que debe escribirse. Seamos honestos, la forma en que se supone que debe escribirse, es el nombre que lo delata: Hojas de estilo en cascada. Así que está aceptando eso nuevamente porque lo que descubrí es que bajé hasta el nivel de microoptimización. He estado en el camino en el que veo a muchas personas pasar recientemente donde... y también mencioné esto en el artículo, donde puedo ver... hay alguna evidencia de ello recientemente. He visto gente que ha estado creando componentes espaciadores y cosas por el estilo, y entiendo ese problema, he estado en esa situación.

Andy: La forma en que lo arreglé fue, en lugar de profundizar e intentar microoptimizar, en realidad comencé a pensar en las cosas a nivel de composición porque no importa qué tan pequeños sean los componentes, en algún momento van a ser páginas, van a ser vistas. No puedes evitar eso, así es como va a ser. Entonces, en lugar de tratar de decir: "Bien, necesito estos pequeños ayudantes para hacer este diseño", dice: "Bien, tengo una vista de página de contacto o una vista de página de producto, y esa es una composición de diseño esquelético". Luego, dentro de eso, puedo colocar los componentes que quiera allí”. Tenemos cosas como Grid y Flexbox ahora que hacen que eso sea mucho más factible, y básicamente puedes poner lo que quieras dentro del diseño esquelético, no importa. Luego, los componentes deberían, en ese punto, comportarse como usted quiere que se comporten, con o sin consultas de contenedor.

Drew: esta es la parte de composición de CUBE en la que observa las cosas a un nivel más macro, observa cómo los componentes se pueden componer en una vista para crear el tipo de páginas que necesita para un sitio o una aplicación. o lo que tienes.

Andy: Básicamente, se trata de crear reglas. Es como una guía. Está tratando de obtener pautas para algo. No es como una regla estricta, como, debes hacer esto, debes hacer eso. Eso es esencialmente lo que estás haciendo con el navegador, con esta metodología, estás diciendo... no lo estás obligando a hacer nada. Estás diciendo: "Mira, idealmente, si pudieras diseñarlo así, sería genial, pero entiendo que ese podría no ser el caso, así que aquí hay algunos límites y algunos niveles superiores e inferiores con los que podemos trabajar. Haz lo que puedas y salud”. Luego, simplemente le arroja algunos componentes y deja que haga lo que hace. Agrega suficiente control allí para que no se vea basura.

Andy: Entonces, un buen ejemplo sería... hacemos un diseño en Cada diseño llamado conmutador, que esencialmente incluirá elementos en línea hasta cierto punto en el que el cálculo que determina qué tan ancho debería simplemente apilarlos uno encima del otro. . Pero debido a que agregamos margen a la línea y al bloque, funciona, independientemente de cuál sea su estado, todavía se ve bien. Esa es la idea, es que no le estamos diciendo al navegador que diga: "Debes superponer esta cuadrícula de tres columnas". Estamos diciendo: “Si puede superponer una cuadrícula de tres columnas, hágalo. De lo contrario, simplemente apile y espacie en su lugar”. Así que es ese tipo de metodología, de dejar que el navegador realmente haga su trabajo.

Drew: Muchos de los diferentes enfoques que han surgido para CSS en los últimos años se han centrado mucho en el nivel de componente de tratar con todo como si fuera un componente. CUBE no minimiza tanto el aspecto de los componentes, solo brinda este concepto adicional por encima de tomar esos componentes y componerlos en diseños más grandes, en lugar de simplemente decir que el diseño es solo otro componente.

Andy: Sí, ese es un buen punto, sí. Creo que lo que hay que decir acerca de los componentes es que son importantes, especialmente en el front-end moderno. Hacemos muchas cosas de componentes, cosas del sistema. Pero la forma en que veo un componente es una colección de reglas que amplían lo que ya se ha hecho.

Andy: Lo que quiero decir en el artículo es que, para cuando llegas al nivel de bloque, la mayor parte de tu estilo ya se ha hecho, y realmente lo que está haciendo tu componente es puntear las I y cruzar las T y está diciendo: "Correcto, en este contexto..." Entonces, para una tarjeta, por ejemplo, haga que la imagen tenga una altura mínima de X y agregue un poco de relleno aquí. Haz esto, aquello y lo otro. Pon un botón aquí. Son solo una especie de reglas adicionales además de lo que ya se ha heredado del resto del CSS. Creo que esa es probablemente la mejor manera de describirlo.

Andy: Mientras que en BEM, el componente es la fuente de la verdad. Hasta que coloque esa clase en el elemento, no se ha aplicado nada en ese punto y ese método funciona. Descubrí que escribí más CSS al hacer eso, y más CSS repetitivo, lo cual no me gusta hacer.

Drew: ¿Considerarías que la tipografía, los colores, los ritmos verticales, el espaciado y todo eso es parte de la idea de composición en este modelo?

andy: si En un CSS global, sí, absolutamente. El ritmo vertical sobre todo, y el flow. Hicimos un artículo sobre eso en 24ways, ¿no?, hace un par de años, el componente de flujo y ritmo. Eso también fue una especie de resumen de este enfoque, donde establece un componente base que esencialmente usa el selector de búho lobotomizado. No sé cómo voy a describir eso en la radio, pero lo haremos. Solo pondremos, creo, en las notas del programa sobre el artículo de Heydon o algo así. Pero esencialmente eso, selecciona elementos secundarios... lo siento, elementos hermanos.

Andy: Así que dice: "Correcto, cada elemento que sigue al elemento X tiene un margen superior a los costos de CSS y el valor de la propiedad", y luego, la belleza de eso es que también puede establecer ese valor de propiedad personalizada de CSS en un contexto compositivo. Entonces puede decir: "Bien, en este componente, si hay algo de flujo sobre la marcha, configuraremos el espacio de flujo para que sea realmente dos rem porque queremos que sea agradable y robusto, el espacio amplio". Luego, en otro, podría decir: "En realidad, quiero que el espacio de flujo sea medio rem porque quiero que sea estrecho". Todo esto está sucediendo, todo el control proviene de un nivel superior y luego lo que estás haciendo es agregar anulaciones contextuales en lugar de reinventarlo cada vez, reinventando lo mismo una y otra vez.

Drew: Así que esa es la C, Composición. Luego tenemos U, que es Utilidad. Entonces, ¿qué entendemos por utilidad?

Andy: Así que es una clase que hace un trabajo, y lo hace muy bien. Eso podría ser una implementación de un token de diseño que... es un resumen de propiedades. Por lo general, se trata de colores o estilos tipográficos, tamaños y reglas por el estilo. La idea es generar clases de utilidad que las apliquen. Así que tienes una utilidad que aplicará el fondo primario, que es como el color primario, y luego el color primario, que es el color del texto. Luego, puede generar algunos tokens de espaciado para el relleno marginal y todo ese tipo de cosas. Solo hacen un trabajo. Simplemente agregan esa regla de espaciado, esa regla de color, y eso es todo.

Andy: Pero también tienes otras utilidades. Entonces, un buen ejemplo es una utilidad de contenedor. Lo que hará es poner un ancho máximo en un elemento y luego colocará un margen automático izquierdo y derecho para colocarlo en el medio. Así que solo tiene un trabajo, y lo está haciendo bien y de manera eficiente.

Andy: Así que tienes tus estilos globales, has hecho muchas de tus configuraciones de tipografía y mucho de tu espacio de piso. Tu composición entonces da contexto y diseño. Luego, las utilidades aplican tokens directamente a los elementos para darles el estilo que necesita. Entonces, como un encabezado, por ejemplo, estás diciendo: "Quiero que esto sea de este tamaño y quiero que tenga esta entrada, y quiero que tenga esta medida". Luego, en ese punto... esto es lo que estaba diciendo sobre los bloques... luego vas más abajo en la pila y ya has hecho la mayor parte del trabajo en ese punto.

Andy: Así que te brindan esta manera de trabajar realmente eficiente, y debido a que HTML también se transmite por la tubería, es muy bueno abstraer la carga de trabajo en HTML en lugar de CSS también, según he descubierto. Solía ​​entrar realmente en las clases de utilidad, como en este tipo de viejo estilo cascarrabias de "Oh, separación de preocupaciones", pero en realidad creo que es una forma muy decente de trabajar. Menciono en el artículo que realmente me gusta Tailwind CSS. Creo que funciona, y realmente me gusta usarlo para escribir productos porque realmente puedo publicar algo muy rápido. Pero creo que va un poco demasiado lejos, Tailwind, mientras que me gusta llover cuando va más allá de la simple aplicación de una sola regla en una clase. Así que eso es todo, creo. ¿Vos si?

Drew: Entonces, sí, hablas mucho en el artículo sobre tokens de diseño, que es algo de lo que hablamos en el Smashing Podcast con Jina Anne en el episodio tres, creo que lo fue. Entonces parece que los tokens de diseño son un aspecto realmente fundamental.

andy: si Oh, Dios, sí. Recuerdo muy vívidamente cuando Jina estaba haciendo las cosas del Lightning Design System porque yo estaba construyendo un sistema de diseño en ese momento, o algo que se parecía a un sistema de diseño, y estábamos luchando para obtener la aprobación ejecutiva. Cuando salió el Lightning Design System, literalmente les envié enlace tras enlace y les dije: “Esto es lo que estamos haciendo. Estamos construyendo un sistema de diseño. Esto es para lo que Salesforce lo está usando actualmente”. Recuerdo que su trabajo en ese momento realmente me ayudó a pasar cosas por la puerta.

Andy: Entonces, el tema de los tokens de diseño siempre me ha parecido una muy buena manera de aplicar estas reglas. Como soy diseñador de oficio, puedo ver que la organización y la capacidad de organizar y crear una única fuente de verdad son realmente útiles porque es algo que realmente no hemos tenido en el diseño digital, especialmente en Adobe. Era de trabajar con Photoshop y esas cosas, simplemente no teníamos ese lujo. Lo teníamos impreso con el Pantone Book pero no lo teníamos en formato digital con códigos hexadecimales aleatorios por toda la tienda.

Andy: Así que es genial. Me encanta ese nivel de control. En realidad, creo que ayuda a la creatividad porque ya no estás pensando en cosas sin importancia, solo estás pensando en lo que estás haciendo con eso.

Drew: ¿Importa particularmente la implementación de esos tokens de diseño con el enfoque? ¿Son siempre las propiedades personalizadas de CSS?

Andy: Creo que ese es un punto realmente importante con CUBE. Algunas de las respuestas que he tenido, la gente ha tenido problemas con esto un poco. No hay ninguna mención a la tecnología en absoluto. La única tecnología que es consistente es CSS. Puedes hacerlo como quieras. Podrías hacer todo esto con cualquier cosa de CSS y JS que la gente esté haciendo ahora, o podrías hacerlo solo con Vanilla CSS. Podrías hacerlo con Sass. Lo hago con Sass. Menos, si eso es lo que todavía estás haciendo. Todas estas tecnologías disponibles, publicar CSS, todas estas cosas. Puedes hacer lo que quieras, no importa.

Andy: La idea es que si sigues ese tipo de construcciones, estarás bien. Esa es la idea detrás de esto. Es un método muy flexible y no estricto como lo son algunas de las metodologías. Lo he visto especialmente con BEM, las personas se arraigan mucho en los principios de BEM hasta el punto en que es como si ya no estuvieras resolviendo el problema. Creo que tienes que ser flexible. Lo dije en esta charla el año pasado. Yo estaba como, "Si te mantienes demasiado firme en tus armas, en realidad puedes causarte problemas a largo plazo porque tratas de seguir un cierto camino, y sabes que ya no está funcionando". Siempre debe ser flexible y trabajar con un sistema en lugar de trabajar al pie de la letra.

Drew: Entonces la B, la B es Block. Ha hablado sobre esta idea, que para cuando llegue al nivel de bloque, la mayor parte de todo debería estar en su lugar, y luego el estilo de nivel de bloque solo se ocupa realmente de los detalles reales de un componente en particular. En general, ¿el concepto de bloque es similar a lo que la gente conoce?

Andy: Oh, absolutamente, sí. Así que imagina tu componente BEM y sácale todo el material visual, y eso es lo que te queda, esencialmente, el bloque. Esto es lo que luché por articular cuando comencé a pensar en esta metodología. Un bloque es en realidad una C, es una composición, pero eso lo hace realmente difícil porque estás en territorio recursivo allí y creo que los cerebros de las personas explotarían. Pero realmente eso es lo que es un bloque, en realidad es otra capa de composición pero más una especie de contexto estricto, como su tarjeta, su botón, su carrusel, si eso es lo que todavía le gusta hacer, y todo ese tipo de cosas.

Andy: Es como una cosa específica, un componente, y luego, dentro de eso, estableces reglas específicas para que siga, ignorando realmente el resto para que no estés... Podrías aplicar tokens en los bloques, y eso es lo que hago. aún así, pero en realidad está más orientado al diseño, es un bloque, en la medida en que trabajo con ellos, o al menos tomar el token y aplicarlo de una manera específica, como un estado de desplazamiento de botón, cosas así. Entonces, en realidad, su bloque debería ser pequeño para cuando llegue a ellos, en realidad no deberían estar haciendo mucho en absoluto.

Drew: Así que podría ser tan pequeño como un hipervínculo.

andy: si

Drew: ¿Pero también podría ser una colección compuesta de otros bloques?

andy: si Como una especie de módulo. Definitivamente podrías hacer eso. Porque, de nuevo, eso se remonta al tipo de aspecto compositivo, es que lo que sea que entre no debería importar. El buen ejemplo de eso es como la tarjeta. Entonces, el contenido de una tarjeta es, digamos, como un encabezado, un resumen y un botón. Realmente no deberías enfocarte específicamente en esos tres elementos. Deberías estar diciendo: "Mira, cualquier cosa que suceda para encontrarse en el contenido, tiene algunas reglas de flujo allí y tiene algún tipo de reglas de diseño de composición", y luego no importa lo que pongas allí. Puede decidir que quiere poner una imagen en ese contenido y debería funcionar, debería verse bien.

Andy: Ese es el objetivo de trabajar con CSS. Es una forma muy indulgente de trabajar con CSS. Estás haciendo tu vida mucho más fácil al ser menos rígido porque cuando las cosas se encuentran accidentalmente en algo, lo cual sucederá, no se ve tan horrible como podría verse si fueras más específico acerca de las cosas, es lo que he fundar.

Drew: ¡Definitivamente necesito mucho perdón con respecto a mi CSS!

Andy: ¡Sé que lo haces!

Drew: Saludos! Así que esa es la B. Lo último es E: E es Excepción. Ahora no estamos hablando de mensajes de error, ¿verdad?

andy: no, no Es una especie de-

Drew: No estamos hablando de excepciones de JavaScript.

andy: si, si No debería haber nada de eso en este momento. De todos modos, espero que no, de lo contrario, en ese momento realmente estás en el bosque: ¡no creo que pueda ayudarte! La idea general de esto es... así que ha creado el contexto con su bloque, y una excepción es exactamente eso, es como una excepción a la regla: una carta volteada, o podría ser un botón fantasma. ¿Conoces esos botones que acaban de tener un borde y un fondo transparente? Esa sería una excepción porque un botón probablemente tenga un color de fondo sólido y luego el color de la etiqueta. Así que está creando una especie de estado distinto de variación.

Andy: La razón por la que hago esto con atributos de datos en lugar de clases, y la razón por la que es porque a) creo que es bueno tener una distinción. Entonces, cuando está escaneando una gran cantidad de HTML, puede ver datos, poner guiones en algo, es como: "Bien, está bien, definitivamente algo ha cambiado en este elemento". La otra cosa es que es muy bueno dar acceso a JavaScript a ese estado, y viceversa también. Así que me gusta mucho aplicar el estado con atributos de datos en JavaScript. Creo que es esencialmente para lo que son, una especie de capa de comunicación. La armonía entre ellos parece funcionar muy bien.

Andy: Entonces, un buen ejemplo es, digamos que tiene un mensaje de estado y luego JavaScript agregará datos. El estado es correcto, error o información, o algo así. Luego puede conectarse con eso con sus estilos de excepción en CSS. Así que sabe que es una excepción del componente de estado y va en contra de su estado predeterminado. Así que es una forma muy práctica de trabajar con las cosas. Es predecible en ambos extremos: es predecible en el extremo CSS y también es predecible en el extremo JavaScript.

Drew: Supongo que es bastante bueno que algo que los nombres de las clases no te den sea una propiedad y un valor. Entonces, si desea tener algo como eso que es el estado, y puede ser un éxito o un fracaso o una advertencia o lo que sea, puede abordar específicamente esa propiedad del estado y cambiar su valor. Mientras que con una gran lista larga de nombres de clase, si está manipulando eso en JavaScript, por ejemplo, tendrá que mirar cada uno de ellos y agregar esa lógica comercial allí que dice: "Solo puedo establecer uno de estos”, y ¿qué sucede si dos de esas clases se aplican al mismo elemento? No puede obtener eso con un atributo de datos, solo tiene un valor.

andy: si Esa es una buena manera de decir eso, sí. He descubierto que es muy útil trabajar así.

Drew: Eso es bastante interesante. No creo haber visto ninguna otra metodología que adopte ese enfoque. ¿Es completamente exclusivo de CUBE hacer eso?

andy: puede ser Realmente no presto mucha atención a otras cosas, lo que debería hacer. Probablemente alguien más esté haciendo eso. Te lo diré ahora, ha sido el aspecto más controvertido. A algunas personas realmente no les gustó la idea de usar atributos de datos. La cosa es así, y como te respondo, es, haz lo que quieras. No te estamos diciendo que hagas las cosas de cierta manera, son solo sugerencias. Si desea hacer excepciones a las clases CSS, como modificadores, entonces déjese llevar. La policía de CUBE no va a llamar a tu puerta. Está absolutamente bien.

Andy: Lo del CUBO es algo que piensa, es una estructura. Aplica esa estructura como quiera aplicarla, con las herramientas que desee o con la tecnología que desee. Mientras mantengas las cosas consistentes, eso es lo importante.

Drew: ¿Entonces no existe el CUBO puro?

Andy: La forma en que escribo es puro CUBO, Drew. Todos los demás son solo falsos, es solo una imitación débil.

Drew: Aparte de ti, nadie puede decir: "Ese no es un CUBO de libro de texto".

Andy: No, eso es todo. Nadie puede discutir eso realmente, ¿verdad? Entonces, sí, iré con eso. Te da un poco de influencia o algo así, creo, algo así.

Drew: ¿Puedes mezclar y combinar un enfoque CUBE con otras metodologías? ¿Puedes usar bits de BEM?

Andy: Sí, creo que sí. Lo he estado pensando un poco porque voy a hacer más cosas pronto porque se ha vuelto bastante popular, por lo que la gente querrá más trabajo. Una cosa que voy a ver es cómo abordar el uso de la metodología CUBE con algo existente.

Andy: Así que hay dos extremos opuestos de la escala. Una buena pregunta que la gente ha hecho es: "¿Cómo funciona esto con cada diseño, las otras cosas?" Básicamente, cada diseño es la C. Eso es lo que es cada diseño, es la capa de composición. Luego, alguien más preguntó: “Bueno, ¿cómo funcionaría esto con algo como Atomic Web Design, como las cosas que hizo Brad Frost? Es como, bueno, podrías dividir esas piezas y aplicarlas en cada nivel. Atomic Design llega hasta el micro detalle. Es abstraer eso en usar, bien, está bien, bueno, puedo aplicar esto con utilidades, así que creo que las moléculas. Puedo aplicar eso con las utilidades, y está traduciendo lo que ya sabes en esta estructura de trabajo ligeramente diferente.

Andy: Realmente, es un cambio de nombre para muchas cosas. No he inventado nada aquí, solo he, como digo, he robado cosas que me gustan. Me encanta la forma en que se piensa en algunas de las cosas del Diseño Atómico. Eso es realmente un trabajo inteligente. Y BEM. Lo que hizo Harry, el CSS del Triángulo Invertido, me pareció genial. Así que simplemente he cortado partes que me gustan de cada uno de ellos y los he unido todos en esta otra cosa híbrida, enfoque. Más por venir, creo.

Drew: ¿Se puede aplicar el enfoque CUBE a proyectos existentes que ya tienen CSS o es algo con lo que realmente necesita comenzar un nuevo proyecto?

Andy: Eso depende mucho. Entonces, si tiene un trabajo de arranque y solo tiene miles de líneas de CSS personalizado, en las que definitivamente he estado involucrado antes, entonces creo que podría estar tratando de apagar un incendio con una botella de agua. punto. But if you… say, for instance, if you've got a rough BEM setup and it's gone a bit layer-y, you could use CUBE to refactor and actually pull it back into shape again.

Andy: It depends, the answer to that one. But it's doable, as with everything. If you really want it to work, Drew, you can do it if you want, can't you? The world is our oyster!

Drew: Especially if your BEM site's gone layer-y.

Andy: Yeah. Nothing worse than a layer-y BEM site!

Drew: I've noticed in the examples that you've given… and I've got an eagle eye, I've seen you've been doing this for a while… a lot of your class values in the HTML attribute are wrapped in square brackets.

Andy: Oh, God, yeah. Tell you what, Drew-

Drew: What is that about? ¿De qué se trata?

Andy: I'll tell you what, if there's ever one thing that I've done in my whole career that's just been absolutely outrageously controversial… and you follow me on Twitter, you've seen what comes out of my mouth… it's those bloody brackets! My, God! People either love them or hate them. They're Marmite, they are.

Andy: The reason I do them is a grouping mechanism. So if you look at the way that they're structured, the way I do it is, block at the start and then I'll do a utilities after that. Then what I might do is, in between a block group and a utility group, there might be another block class. So a good example of that would be… we'll go back to the card again. But then say that there's a specific block called a CTA, like a call to action. You might have that applied to the card as well, and then your utilities are enforcing the design attributes, so the colors and all that business. So then you've got three groups of stuff.

Andy: When you come to it, if you've got that order in your head each time, you know, okay, right, this first group's blocks. Oh, that's looks like another block. I've got that one. Then it's like, right, they're definitely utility classes. Then what I might even do is, if there's a lot of design token implementation, have that in a separate group. So it's just very clear what each group is doing, and there's a separation inside of the classes there as well. I've found it really helpful. Some people find it incredibly offensive. It's definitely a do it if you want to do it. Definitely you don't have to do it.

Andy: It's quite funny, when I published that article, so many people finished halfway through to ask me, “What is it with these brackets?” I was like, “Did you finish the article? Because there's a big section at the end where it explains exactly what they're doing,” to the point where I actually had to write a bit in the middle of the article of, “If the brackets are essentially doing your head in, click here and I'll skip you all the way down to that explanation bit so you can just read about them.” It can be quite controversial.

Andy: When I've worked on really, really complex front-ends… and we did a little bit of stuff together, didn't we, last year?

Drew: Sí.

Andy: You've seen the sort of design implementation on that project that we were on. It requires that sort of grouping because there's just so much going on at the time, there's so much different stuff happening. I've just found it really, really useful over the years, and also get lots of questions about it, to the point where I was almost going to write just one page on my website that I could just fire people to to answer the question for them.

Drew: Slash, what's with the brackets?

Andy: Yeah. Slash, brackets. Have you seen that new Hey Email thing that's just come out? They've bought a domain of itsnotatypo.com, just to answer the whole Imbox, like im with an M rather than an in. Basically, I was like, “I think I need to do that,” like, whatswiththebrackets.com, and just do a one-pager about it.

Drew: It strikes me that the approach with brackets actually could be something that might be useful when using things like Tailwind or something that has a lot of classes because that can-

Andy: Yeah. Oh, God, yes.

Drew: You have classes that are addressing your break points and what have you, and then you'll have things that are for layout, things that are for color or type, or what have you. So it might also be a useful way of dealing in situations like that.

Andy: I'd definitely agree with that. A good analogy… not analogy. A good bit of info about Tailwind is that I actually quite like Tailwind. I've used that on very big projects. The one thing that really opened my eyes to Tailwind though was when I saw a junior developer try to work out what was going on, and it was really, really eye-opening because they just didn't have a clue what was happening.

Andy: I think that's one problem I've found with these sort of over-engineered approaches, which I think it's fair to say Tailwind is, is that there's a certain skill level that is required to work with it. I know the industry tends to have an obsession with seniority now, but there's still people that are just getting into the game that we need to accommodate, and I think having stuff that's closer to the language itself is more helpful in those situations because they're probably learning material that is the language as it is. So I think it's just a bit more helpful. Especially having a diverse team of people as well. Just food for thought for everyone.

Drew: People might look at all the different methodologies that are out there and say, “This is evidence that CSS is terrible and broken, that we need… all these problems have to be solved by hacking stuff on top. We need tools to fix bits of CSS. We need strict procedures for how we implement it, just to get it to work.” Should the platform be adapting itself? Do we need new bits of CSS to try and solve these problems or are we all right just hacking around and making up funny acronyms?

Andy: I think the power of CSS, I think, is its flexibility. So if you're going to program CSS, a lot of the knowledge is less of the syntax and more of the workings of a browser and how it works. I think that might be a suggestion, that the problem is that people might not have learnt CSS quite as thoroughly as they thought they might have learnt it, who created these problems. I've seen that in evidence myself. I spotted a spacing mechanism that had been invested, which was very complicated, and I thought, “This person has not learnt what padding is because padding would actually fix this problem for them, understanding how padding works and the box model.” That's not to be snidey about it.

Andy: We work in an industry now that moves at an even faster pace than it has done previously and I think there's a lot less time for people to learn things in detail. But, on that front, I think CSS still does have work to do in terms of the working group, who I think do a bloody good job. A great, shining example of their work was the Grid spec which was just phenomenal. The way that rolled out in pretty much every browser on day one, I thought that was so good.

Andy: But we've got more work to do, I think, and I think maybe the pace might need to increase a little, especially with stuff like container queries, we all love talking about them. Stuff like that I think would help to put CSS in a different light with people, I think. But I think CSS is brilliant, I love it. I've never had a problem with it in lots of years really. I do find some of the solutions a bit odd, but there you go.

Drew: What's the response been like to CUBE since you published the article?

Andy: Mind-blowing. I honestly published it as just supporting material, and that's all I expected it to be, and it's just blown up all over the place. A lot of people have been reading it, asking about it, been really interested about it. There's definitely more to come on it.

Andy: I did say in the article, I said, “Look, if people are actually quite interested in this, I'll expand on this post and actually make some documentation.” I've got bits of documentation dotted around all over the place, but to sort of centralize that, and then I was thinking of doing some workshops and stuff. So there's stuff to go. It's how Every Layout started as well. We both had these scattered ideas about layout and then we sort of merged them together. So something like that, I suppose, will come in the future.

Drew: Are there any downsides that you're aware of to using CUBE? Are there problems that it doesn't attempt to solve?

Andy: Yeah. This accent, Drew, it just won't go way, no matter what I do! In all seriousness, I think CUBE's got as close as I can get to being happy with the front-end, which is saying a lot, I think. You never know, things might change again. This has evolved over more recent years. Give it another five years, I'll probably be struggling with this and trying something else. I think that's the key point, is to just keep working on yourself and working on what you know and how you approach things.

Andy: This definitely won't work for everyone as well, I know that for a fact. I know that from my comments. I don't expect it to work for everyone. I don't expect anything to work for everyone. It's the same with JavaScript stuff: some people like the reactive stuff and some people don't. It is what it is. We're all people at the end of the day, we all have different tastes. It's all about communicating with your teammates at the end of the day, that's the important thing.

Drew: I know you as a very talented designer and developer and you, like many of us, you're just working on real projects all day, every day. But you've recently started publishing on this site, Piccalilli, which is where the CUBE CSS introduction article was. So Piccalilli is kind of a new venture for you, isn't it? What's it all about?

Andy: Very kind of you to say, Drew. You've actually worked with me, so that's high praise. But the Piccalilli thing is an evolution. So I'm a freelancer. I do client work, but I think this has become apparent with the pandemic, that that is not the most sustainable thing in the world in some industries. I think freelancing can be very, very tough, as a developer and designer. It's something that I've been doing it for so long now, 10 years… well, 12 years now actually.

Andy: Me gustaría hacer algo un poco diferente y aplicar el conocimiento que tengo y compartirlo con la gente. Siempre he sido muy abierto y he compartido, y quería formalizar eso. Entonces creé Piccalilli para escribir tutoriales, pero principalmente para los cursos que estoy produciendo: esa es la carne y las papas principales. Y luego está el boletín que es... la gente realmente disfruta del boletín porque comparto cosas interesantes que he encontrado en Internet todas las semanas. Esa es la columna vertebral de esto. Simplemente va muy bien. Eso es esencialmente donde quiero verme haciendo más y más tiempo completo, a medida que pasan los años, creo.

Drew: Entonces, ¿qué sigue para Piccalilli? ¿Tienes algo que esté saliendo?

Andy: ¡Gracias por abrir la puerta allí, Drew! Para cuando salga esta grabación, el primer curso estará en vivo: Learn Eleventy From Scratch, ¡y ahí es donde aprenderemos cómo construir un sitio web de Gatsby! No, aprendes a crear un sitio de Eleventy. Así que comienzas con un directorio completamente vacío, no hay nada en él, está vacío, y luego al final terminarás con este sitio de agencia realmente atractivo. Aprendemos todo tipo en él. Aprendes a ir realmente a la ciudad con Eleventy. Obtenemos datos remotos de lugares. Usamos CUBE CSS para construir un front-end realmente bueno para él.

Andy: Si desea ingresar al Jamstack y desea ingresar a los generadores de sitios estáticos, o simplemente cómo construir un buen sitio web, es solo un curso realmente útil, espero, para eso. Actualmente se está editando dentro de una pulgada de su vida mientras estamos hablando. Va a ser genial, espero, y útil. Pero eso es una acumulación de muchas cosas que he estado haciendo en los últimos años. Así que debería ser divertido.

Andy: Así que cómprelo, y haré un código de descuento, haga clic en smashingpod con un 40% de descuento, y podrá obtenerlo cuando salga.

Drew: Impresionante. Vincularemos eso. ¿Ya has descubierto cómo deletrear Piccalilli de forma fiable?

Andy: Estuve con Chris y Dave en ShopTalk Show y dije: "Si hay algo para lo que quieras contratarme es para escribir Piccalilli a mano la primera vez sin siquiera pensarlo", porque tengo Escribí esa palabra tantas veces que sé exactamente cómo deletrearla de memoria. Así que la respuesta a tu pregunta es sí.

Drew: Bueno, todavía estoy luchando, ¡te lo diré!

andy: es dificil Oh Dios. Empatizo totalmente. Me tomó mucho tiempo aprender a deletrearlo pero es una de esas palabras en nuestro vocabulario. ¡Este año estoy tratando de deletrear necesario sin cometer un error de ortografía!

Drew: He estado aprendiendo todo sobre CUBE CSS. ¿Qué has estado aprendiendo últimamente, Andy?

andy: ¿sabes qué? Esto te va a sorprender, Drew. MySQL es lo que he estado aprendiendo recientemente. Entonces, básicamente, Piccalilli es totalmente autoeditado. Es un sitio de Eleventy pero tiene una API detrás y una base de datos MySQL detrás. Las cosas que brindan a las personas el contenido que han comprado requieren algunas consultas bastante importantes. Así que en realidad invertí correctamente en algo de MySQL... especialmente en la diferencia entre uniones, que en realidad no me di cuenta de que había una diferencia entre cada tipo de unión. Eso ha sido realmente útil y ha resultado en algunas interacciones bastante rápidas con la base de datos.

Andy: Solía ​​​​ejecutar esta cosa llamada Front-End Challenges Club y cuando lo lancé por primera vez simplemente colapsó y murió porque MySQL era de mala calidad, por decir lo menos. Así que realmente he estado aprendiendo cómo hacer eso porque no soy una persona de back-end en absoluto, soy un empujador de píxeles. Así que definitivamente no es de mi competencia. Eso es más tu cuello de los bosques, ¿no? Lo encuentro realmente genial, MySQL. De hecho, me gusta mucho escribirlo. Es un lenguaje instructivo realmente agradable, ¿no es así?

Drew: Lo es, es genial. Aprendí SQL en la escuela.

Andy: ¡Guau!

Drew: Estamos hablando como hace 20 años ahora.

Andy: ¿Tenían computadoras en esos días?

Drew: Lo hicieron, sí. Tuvimos que enrollar-

Andy: ¿Tuviste que escribirlo a mano?

Drew: ¡Tuvimos que darles cuerda! Lo hicimos. Pero, les digo, para un desarrollador, es similar a aprenderse las tablas de multiplicar: una de esas cosas que parece un poco tediosa, pero una vez que lo dominas, se vuelve útil una y otra vez.

andy: si Con seguridad. También hay diferencias realmente tangibles. Realmente ves la diferencia en la velocidad. Realmente me gusta trabajar con Node porque es muy rápido, pero Node y MySQL simplemente... no son una opción muy común, pero creo que es una opción bastante buena. Creo que funciona muy, muy bien. Así que estoy feliz con eso. Como saben, no me gusta escribir PHP. Así que eso nunca va a ser una opción.

Drew: Si a ti, querido oyente, te gustaría saber más de Andy, puedes seguirlo en Twitter donde está en hankchizljaw. Puede encontrar Piccalilli en piccalil.li, donde también encontrará el artículo que describe CUBE CSS, y también agregaremos enlaces a todos ellos en las notas del programa, por supuesto.

Drew: Gracias por acompañarnos hoy, Andy. ¿Tuviste alguna palabra de despedida?

Andy: Mantente a salvo y usa tu máscara.