 Bueno, seguimos con la avalancha de ponencias. Una vez más, otro fantástico oponente, Mauricio Gelves, otro miembro súper activo de la comunidad. Otra vez se vuelve a unir un gran técnico, un gran programador, un gran diseñador con una excelente persona. Otra de esas personas que participa muchísimo en todas las tareas organizativas de la comunidad. Líder del grupo de Warpestv, donde subiremos todos los vídeos de las ponencias. Organizador de la súper exitosa Work on Madrid, hace apenas un mes, que fue algo de un evento absolutamente alucinante. La mejor Work on que hemos tenido en España hasta hoy. No hay color, evidentemente, ahí había tres veces más. Así que estoy súper encantado de que esté Mauricio aquí, donde nos va a dar una ponencia como siempre brillante. Estas son de las ponencias que no hay que perderse nunca, porque es un brillante presentador. Sobre buenas prácticas en programación, entiendo. Así que nada, os dejo con ellos. Buenas. Normalmente, Michala, ¿se me escucha? ¿Sí? ¿Tan función de micrófono? Vale. Normalmente, Michala, suelen comenzar con una historia. Hoy es la excepción, porque voy a hablar de cosas más técnicas, así que no vale la pena. Y hay que hablar de muchos códigos, así que vamos directamente al grano. Vamos a estar viendo código HTML, CCS. Levanta la mano quien esté familiarizado con estos lenguajes. No son lenguajes, pero bueno. Perfecto. La gran mayoría. Vamos a hablar de quién no está muy familiarizado con HTML y CCS. Vale. Uno, dos, tres. Vale. No importa. Alguna idea os vais a llevar. Si ven que estoy muy bien y que hablo de cosas muy avanzadas, me frenáis... Mejor vamos a dejar las preguntas para final. Así lo hacemos más dinámico. Bueno, como bien dijo Pablo, mi nombre es Mauricio Helves. Soy desarrollador freelance de WordPress. Trabajo y hago muchas cosas para la comunidad que si me buscan en Google ya os aburriré por ahí también. Hoy vamos a hablar de que es VEM, que no es buena práctica de programación, sino que es meramente de Frontend. ¿Cómo podemos mejorar la estructura de nuestro CCS? Porque aquí le ha pasado de coger algún proyecto heredado, o inclusive uno mismo, que empieza a hacer un proyecto desde cero y tres meses después abre el style CCS y dice, madre de Dios, los kilómetros de línea de código que tengo aquí, ¿vale? ¿Y cuál es la solución número uno que empezamos a implementar cuando tenemos un problema? El signo de exclamación es importante, por si lo suena. Ya vamos a hablar de eso, ¿vale? Pero bueno, que sepan que hay una solución a todo este problema que se llama VEM, que yo en la charla le he puesto bonito, elegante e involón, pero vamos a ver qué es realmente. Vamos a saber que VEM es una metodología, ¿vale? La actualidad no es una tecnología como tal, sino que una persona ha redactado un documento sobre cómo trabajar de la manera más dinámica y eficaz posible con CCS para que no tengamos estos dolores de cabeza. Obviamente que la palabra VEM, la sigla VEM de bonito, elegante e involón, no significa eso, nos permite generar esta metodología, crear componentes rehusables que lo vamos a ver ahora en ejemplo. No es que este nombre no viene de bonito, elegante e involón, sino que es una sigla en inglés de block element and modifier. Bloque, elemento y modificador. Ahí lo tenemos en español. Vamos a saltar al código. No tenemos mucho contraste, lo siento por si no lo ven bien, ¿vale? Pues voy a tratar de explicarlo. HTML. Si yo muestro este pequeño bloque de HTML a cualquier persona, rápidamente puede entender qué estoy mostrando, ¿vale? Vemos que tenemos un div que abre, que tiene dos clases, card y card light, un H2, con un card H, Luke Skywalker dice en el medio, dos párrafos con unos span incluidos, en el cual tiene un card label de clases. Entonces rápidamente puedo decir, bueno, estamos hablando de una tarjeta, que por algún motivo es una tarjeta clara, o tarjeta light, puede ser de liviana también. Tengo un card H, no sé qué será, pero bueno, simplemente vemos que es un título porque tiene un H2 y después tenemos dos párrafos, en el que nos da un poco de descripción de quién es Luke Skywalker, que bueno, cuando nació y en qué planeta nació. ¿Vale? Hasta ahí, bien. Eso era BEM. Ahora vamos a ir degradándolo paso a paso para ver cómo podemos utilizarlo. Y el punto más importante, ¿por qué utilizar BEM? ¿Vale? Antes de meterlo en la metodología, voy a mostrar unos ejemplos de problemas que solemos tener. Nosotros tenemos algunos proyectos y cómo podemos resolverlo. Primero nos permite definir una estructura de estilos. Cuando nosotros recibimos un diseño de un diseñador o de un user experience, hay como una falta de comunicación entre las dos personas porque no sabemos cómo llamar a estos distintos bloques. La idea es ir definiendo bloques, zonas de ese diseño y buscarles nombres para que entre las dos partes podamos estar comunicados. También podemos utilizarlo para reutilizar el código de esta manera ahorramos tiempo y por ende dinero, lo que decía la comunicación con los diseñadores y para evitar estilos CSS del lado oscuro, ¿vale? ¿Y qué es esto del lado oscuro del CSS? Bueno, el primero y el más importante es el lado oscuro de la exclamación importante, ¿vale? Esto nos puede dar una indicación de que la persona que estuvo tocando este estilo hay ciertas cuestiones del CSS que no la conoce. Vamos a ver esos ejemplos. He creado varias plantillas de CodePen, si no lo conocéis es como una pequeña página web en la que nos permite agregar código HTML, código CSS y automáticamente lo renderiza en una subpágina aquí, ¿vale? Entonces, aquí tenemos un simple ejemplo en el que tenemos un párrafo, vamos a ver si podemos expandir un poco, así se ve mejor. Tenemos un simple párrafo y tenemos ahí un comentario que es lo que yo tengo que decir que ahora el cliente quiere que el texto sea azul nuevamente, ¿vale? Entonces, con CSS yo le he aplicado a la clase Texto el color rojo que tenemos en un principio en el proyecto. Pero ahora el cliente por algún motivo lo quiera azul. Entonces, viene un maquetador que no conoce muy bien de CSS y lo primero que va a hacer va a ser un p, color, blue, ¿vale? Obviamente, esto no funciona. Yo como ahora para hacerlo azul, ¿vale? Esto genera un problema que ahora vamos a ver qué significa, por qué se genera un problema con la exclamación, importan porque de aquí, para abajo, todo lo que yo escriba con respecto a ese párrafo o esa clase Texto no funciona. Por lo más que yo aquí diga pTexto igual color, vamos a poner un yellow, ¿sí? Se sigue aplicando el azul, a menos que siga concatenando más y más problemas. ¿Vale? Este es el lado oscuro de la exclamación y importan, mucho cuidado. Esto se debe al lado oscuro de la especificidad. Esta es una palabra complicada y ahora la vamos a reemplazar por otra así. No nos mordemos las lenguas tratando de pronunciarla. Sí, vete. ¿Vale? Aquí he creado otro ejemplo para ver este tema de la especificidad en el cual tenemos una lista con un montón de Items, con un montón de personajes de Star Wars. ¿Vale? Entonces el comentario que me he puesto aquí para el ejemplo es marcar a Yoda como tu personaje favorito, el mismo tendría que cambiar su color a verde con una clase favorita. ¿Vale? Entonces tenemos aquí nuestra lista, nuestra lista desordenada con todos los Items. Tenemos allí los estilos, ¿no? La lista de personajes, li, color, amarillo, lo que estamos viendo aquí, ¿sí? Y sin los puntitos al costado. Por el listal no. Entonces, de alguna manera el cliente no dice no, yo quiero que el usuario pueda elegir uno de estos personajes y el favorito se ponga en verde. ¿Vale? No hay ningún problema. Yo voy como maquetador y digo podría poner aquí, no sé, con una categoría o alguna forma de marcarlo y con una clase favorite que se marque verde. Obviamente ahora tengo que hacer la clase. Vengo aquí, digo que la clase favorite es de color verde. ¿Vale? Y vemos que Yoda sigue amarillo. Esto se debe al problema de la especificidad. Es otro problema que solemos encontrar que la gente suele resolver con la exclamación importan. Y voy a hacer un pequeño hincapié, lo voy a explicar antes de explicarlo de bem. ¿Vale? Porque creo que es importante que lo sepamos. Muy bien. La especificidad. Palabra complicada, la tachamos y vamos a llamar la jerarquía de SSS. ¿Vale? ¿Qué es esto? Esto es vital. Si sabemos esto, ya con bem sumamos las dos cosas y lo apetamos en el frontend. Los navegadores tienen una forma de renderizar el CCS y se basa en esta jerarquía. Vamos a suponer que A, B, C y D son cuatro números, ¿sí? Con un cierto peso que va desde derecha hacia izquierda. El número más alto a la izquierda significa que tiene más peso de jerarquía. No los mareo, vamos con ejemplos. A sería la sumatoria de atributos in-line. Los atributos in-line son los aquellos que escribimos directamente en el HTML. Párrafo, estilo, negrita. B sería la sumatoria de atributos y D que existe en el CCS. C sería la sumatoria de clases y pseudoclases. Y por último, el D es la sumatoria de etiquetas HTML. No los mareo, vamos a ver ejemplos. Lo mismo, de menor jerarquía a mayor jerarquía de derecha a izquierda. Vamos a suponer que tenemos un CCS de un tipo de elemento en el que decimos todas las imágenes tienen cierto diseño. Eso tiene una jerarquía 00001. Tenemos una clase pues ya tenemos 0010. Esa tiene más peso que el elemento IMG. Tenemos un identificador pues ya tenemos una jerarquía 0100. Y por último, tenemos a más fuerte que es el CCS que está en el HTML el STYLE que es 0000. Siguiendo esta forma de pedir la jerarquía, los navegadores aplican o no aplican ciertos estilos de nuestro STYLE. Si conocemos esto, pues nos podemos evitar el important que destruye absolutamente todo. Vamos a ver ejemplos. Si en nuestro CCS tenemos un enlace tiene ese poder 00001. Si tenemos un párrafo que adentro del párrafo hay un enlace 00002. Si tenemos un párrafo que adentro hay un enlace, que adentro a su vez tiene un SPAN 00003. Si tenemos una clase 0010 un enlace con una clase ya vemos cómo se van mezclando las jerarquías. Un párrafo que adentro tiene un enlace con una clase FU dos clases dos elementos con dos clases un identificador ya vemos cómo el poder va subiendo un elemento con un identificador una clase que tiene un elemento HTML con un identificador y por último el STYLE el más fuerte de todo. A menos que el aliemos parda y volvamos a poner una exclamación important que tiene poder infinito ¿vale? Así que, esto me lo dijo otro día a un amigo que es importantísimo cuando todo ese exclamación important nada es important, ¿sí? Quedaros con eso. Entonces, si volvemos al ejemplo anterior de los personajes de Star Wars ¿por qué cuando marcamos el favorito no se cambiaba verde y seguían manteniendose el amarillo? ¿vale? Simplemente porque son un Darth Vader y dos troopers contra un simple maul ¿vale? Obviamente el navegador dice no, este tiene más fuerza lo ven ¿no? O sea, más pedagógico no lo puedo hacer espero no tener problemas de derecho con Lucas, Finn y todas estas gente porque me la van a liar, vamos Ahora les tengo una pregunta súper buena Si yo tengo un elemento en HTML ¿Qué estilo va a aplicar? El estilo de un identificador o el estilo de 100 mouse ¿Cuál será más fuerte? ¿Entienden la pregunta? Vamos a poner un ejemplo tengo un enlace o el mismo párrafo y le pongo 100 clases todas estas clases y le digo que este es color amarillo y después podría indicarle también una idea que sea color rojo ¿cuál de los dos va a ser más fuerte? Vamos a ver el ejemplo porque obviamente me ocurre el código ¿vale? A ver como hago para ver la parte de abajo ahí está, tengo un párrafo en el que escribí 100 clases ¿vale? Aquí tengo el identificador de color azul y las 100 clases que tengo un color rojo como podemos ver en el HTML todavía estamos indicando las clases con lo cual nos estamos mostrando el color rojo pero si yo haré ese párrafo le digo id ¿Qué nombre le puse? Darth, sin duda Darth Vader es más fuerte No importa la cantidad de clases que nosotros pongamos aquí anidemos que siempre Darth Vader va a ser más fuerte, un id va a ser más fuerte ¿A menos qué? ¿A menos qué? A menos que aquí abajo en el red pongamos el maldito importan que ya nos inutiliza todo ¿vale? Venga, seguimos adelante Vaya parate que hice que estaba hablando de BEM ¿ok? Con lo cual evitemos el lado oscuro de ccs ¿vale? esto podemos solucionarlo simplemente con aprender este tema de jerarquía que yo creo que quedo super claro con un montón de problemas BEM simplemente es para mejorar la estructura que tenemos en nuestros ccs y ya tenemos eso resuelto tenemos medio partido ganado ahora vamos a por la otra mitad vamos a suponer que tenemos un cliente le juro que lucasfilm no me paga y que nos pide una web en la cual no, este un montón de seguidores que les encanta Star Wars y quiero ver qué personaje le gusta más así que tú hazme una página así que es fantástico, te hago un post type tengo de dos tipos personaje del lado bueno personaje del lado oscuro por cierto, ¿cómo se llama el personaje del lado bueno? ¿el lado oscuro o el lado oscuro? ¿de este lado? luminoso personaje luminoso personaje del lado oscuro ¿vale? bueno, aquí podemos entrar en una charla lo dejamos para estar luego en un café ok, genera un custom post type personaje de Star Wars y para identificar de qué color es cada uno taxonomía, luz, oscura, clara vale, ya lo me lo voy haciendo en la cabeza sí, fantástico, genial bien, vamos a implementarlo con bloque porque estamos aprendiendo BEM sí, vamos a hacerlo bien vamos a reutilizar código, no perdamos tiempo ahorremos dinero entonces, ¿qué es un bloque dentro de BEM? un bloque es un componente vamos a recibir este diseño vamos a pasar un diseñador alguien de User Experience y empecemos a ver ese diseño con otros ojos vamos a ver bloques a partir de ahora un componente que se puede reutilizar obviamente está formado por HTML y CCS y que lo vamos a identificar con el nombre de clase simplemente un nombre vale, en este caso es simplemente un nombre en este caso podría ser tarjeta punto card pero que se representa de esa manera hilo bueno que tienes que se puede anidar vamos a verlo con ejemplo, no se preocupen entonces volvemos al diseño que nos pasó el diseñador y tenemos que pensar en cómo podemos empezar a reutilizar el mismo estilo entonces lo que primeramente podemos ver es que aquí tenemos una tarjeta, genial y aquello también es una tarjeta tarjeta, tarjeta, fantástico esto lo hago con una clase, lo tengo pero a su vez dentro de la tarjeta hay un botón vale, y al botón lo pienso, digo, el botón forma parte de la tarjeta no, el botón vamos a separarlo vamos a hacerlo un bloque separado porque seguramente existan más botones dentro de mi web entonces voy a declarar los botones por un lado y las tarjetas que son específicas para esta página dos bloques, bien ahí lo tenemos, lo tenemos ¿no? vale, y ya nos vamos imaginando el HTML tenemos el div class card que esto sería lo que acabo de explicar de cómo se medicina un bloque un nombre, un simple nombre hay veces que se pierde más tiempo buscando el nombre y un botón, esto es lo que tenemos hasta ahora dos bloques distintos, ahí tenemos SSS que de momento está vacío bien bloque element modifier segundo punto, elemento que es un elemento un elemento un bloque puede tener elementos puede no tenerlos también complementan el bloque sí, van a dar más información sobre el bloque, van a llenarlo de información no pueden ser usados independientemente siempre un elemento tiene que estar dependiendo de un bloque y lo vamos a identificar con un doble guión bajo, ¿vale? no os preocupéis si no lo entendéis, porque ahora lo vemos nos acercamos mucho más a la tarjeta al card y vamos a ver esto de los elementos, como ya explicamos anteriormente todo es la tarjeta todo es el card pero ahora vamos a buscar los elementos que componen este bloque tenemos primero una imagen que le hemos llamado card, guión bajo guión bajo, para indicar que es un elemento FET, IMG de feature image, de imagen destacada la misma nombre que suele utilizar WordPress ¿vale? entonces ya no estamos haciendo la idea ah, tengo un custom post type, esto lo puedo utilizar como el thumbnail, podría ser tengo otra sección que es la G, card, guión bajo guión bajo H yo suelo usar ese nombre para headers me evito un montón de letras y yo ya sé y tengo toda esta sección todo este elemento, que le he llamado punto card, guión bajo, guión bajo meta, ya vamos viendo los distintos elementos que componen lo que es una tarjeta un card y por último tenemos un logito ahí al costado que es propio para este para este personaje de star wars al que le he llamado punto card, guión bajo, guión bajo log, bien pues entonces ya la HTML podemos definirlo de esta manera tenemos una tarjeta, tenemos una imagen con la clase card, guión bajo, guión bajo feature image que sí o sí tiene que estar dentro de un card no puede estar en forma independiente esta imagen no puede estar aquí fuera con esa clase tengo un H2 que es el nombre del personaje al que le he puesto card, guión bajo, guión bajo H para identificar que es un encabezado y fíjense como ya podemos acá tener las clases totalmente separadas de lo que son la etiqueta sí, la etiqueta HTML como tal aquí podría ser un párrafo, un H2 lo que sea, sí siempre y cuando los estilos que aquí se apliquen vengan con una etiqueta del tipo texto la semántica es el nombre que quería colocar, la semántica las clases pueden ser totalmente independientes de la semántica y obviamente después tenemos todo un div no, mentira, cierra allí un div en el que vamos a meter toda la información del meta una imagen que es el logo y un botón al que le hemos puesto la clase botón como ven esta clase de aquí totalmente distintas las demás por el simple hecho de que es un bloque totalmente distinto y acuérdense los bloques pueden estar anidados yo aquí dentro de esta tarjeta podría tener otro bloque totalmente muy complejo y no pasaría nada entonces un bloque sus elementos y un bloque anidado ¿seguimos? ok vamos a ver un ejemplo, ah y por cierto con este HTML no se necesita más con CSS Grid funciona bien para poder posicionarlo como lo vimos en el diseño creo que tenemos un enlace por aquí abajo vale, ahí cargué simplemente una tipografía para que se vea un poco más bonito lo he dicho, vamos a tener un montón de tarjetas entonces hago una lista desordenada de tarjetas un montón de ítems con la clase tarjeta y adentro el mismo HTML que hemos visto una imagen, el H2 hay un UL porque podemos tener un montón de información card meta que no he puesto más para no complicar el ejemplo la imagen del logo del costado y el botón para votar si esto lo expandimos aquí un poco vamos a checarlo vale, ahí tenemos la tarjeta y lo he dicho esto está con CSS por aquí con Grid para que vean lo simple de que no hace falta ensuciar el HTML fíjense estoy cambiando la imagen del lugar sin movidas de floats ni clear boats ni nada han visto que es simple bien seguimos adelante que me quedan 5 minutos modificador el último punto de BEM que es esto de los modificadores es una entidad con el cual vamos a cambiar la apariencia o el comportamiento o el estado de un bloque o de un elemento y lo vamos a identificar con el doble guión así que tenemos nombre de clase para bloque guión bajo guión bajo para el elemento y doble guión simple para los modificadores ejemplo la forma correcta e ideal de comenzar a trabajar el frontend de los que nos pidió el cliente es comenzar con una tarjeta pura en este caso tiene una tarjeta de un personaje que no pertenece a ninguno de las dos luces que se llamaría card pero ya después podemos identificarlo este personaje pertenece al lado bueno de la fuerza entonces vamos a decir que es un card pero que es un card light ahí tenemos un modificador no existió nunca el caso de que Luke Skywalker pertenezca al lado oscuro de la fuerza o si tenemos la tarjeta y podemos llamarles card dark y simplemente con esas dos clases tendríamos que ser capaces de modificar todo el diseño de colores que hemos visto imagínense sin trabajar con BEM todo lo que implicaría ir elemento por elemento para cambiar los colores para aplicar esto vamos a ver como es con los modificadores de BEM voy a cerrar aquí un poco que me va a apretar si BET BET y BET esta no es el la se roto solución a lo rápido colecciones medias que no lo tengo ah que susto bueno a ver lo dicho aquí tengo una tarjeta tengo un montón de tarjetas el mismo html y ahora si voy a explicar un poco el ccs aquí tengo un montón de variables lo siento por el contraste nuevamente hay mucha luz y no es lo mejor tengo un montón de variables he definido aquí las variables del color de los rebeldes aquí he declarado las variables del color del lado oscuro de la fuerza y después otras variables que voy a necesitar como tipografías y demás por aquí debajo tenemos el bloque el bloque para la tarjeta como vemos tenemos la tarjeta la imagen destacada el encabezado todo lo demás y por último tenemos los modificadores modificador light en el que digo si la tarjeta es light el encabezado va a cambiar el color de fondo va a cambiar el color de su letra otra cosa si la tarjeta es light si la tarjeta es light el botón también va a cambiar el color y si la tarjeta es light cuando la persona haga over sobre el botón va a cambiar también ese color y el mismo modificador para el lado oscuro en el caso de que la tarjeta sea dark tendrá un color definido vamos a cambiar el encabezado vamos a cambiar el meta así que vamos rápido al ejemplo lo que he dicho hemos comenzado con una tarjeta totalmente estándar que luego podemos definir otros diseños pero si yo digo que esta tarjeta pertenece al lado bueno de la fuerza porque no funciona que susto y fíjense si ahora eso simplemente menciono dark fíjense la potencia que tiene BM simplemente agregando una clase más solo si queda tiempo que no lo tengo porque me acaban de mostrar el cartel de un minuto le voy a mostrar dos enlaces muy importantes que esto ya está compartido en mi twitter la primera es una plantilla que tengo en mi github en mi github tengo una plantilla para crear temas de WordPress personalizados en la cual tengo una carpeta de SAS si perdón este mes lo voy a mirar acá porque si miro ahí me vuelvo loco en el cual puedo dar de alta un montón de componentes lo voy a mostrar en un ejemplo de un trabajo que hice a ver teatro esta es la misma plantilla pero con código real dentro de SAS yo creo una carpeta llamada componentes donde doy de alta todos los bloques que voy a utilizar si a ver si tengo uno por ejemplo vamos a ver el bloque de contacto de un formulario de contacto entonces yo abro el CSS entonces tengo en ficheros totalmente separados puedo trabajar cada uno de esos bloques en forma totalmente independiente tengo un código puro que si tengo algún problema sea que bloque ir a tocar no tengo que meterme en un style CSS kilométrico yo con SAS puedo tener un montón de ficheros separados que luego lo junto en uno solo y si tengo algún problema de necesito cambiar el formulario de contacto ya sé a dónde ir a atacar no os preocupéis por el enlace porque está en la presentación y el segundo enlace que a mí me ha cambiado literalmente la forma de trabajar en Frontend es esta guía de CSS donde aparte de explicar BEM explica ciertas estructuras entre bloque y bloque deja 5 espacios tabula para los elementos modificadores y demás así que creo que con esto ya los he mareado suficiente es que ricasco muchas gracias a todos por escucharme y si no están muertos o fritos tenéis alguna duda o pregunta es el momento y si no cuando me veáis por el pasillo también es un buen momento para pararme y preguntarme lo que queráis mientras te trae en el micrófono en el Twitter ya está la presentación si TweetDec funciona bien y mandó el Tweet programado creo que por ahí la chica mira ahí hola mi duda era los dos guiones y los dos guiones bajos es una cuestión de vuelvo a repetir, no es tecnología es una forma de armar el trabajo si te viene bien poner asterisco asterisco vale porque luego quiero decir a la hora de jerarquía de entendimiento de es una forma de rellenar el trabajo igual lo había explicado antes y llegado tarde no te preocupes, no tiene nada que ver los caracteres que utilizas mi duda es la misma muy buena y muchas gracias no he podido usarlo de una vez, pero por qué dos esos caracteres de división te explico por qué, porque puedes tener bloques que tengan un guión puedes tener bloques en su propio nombre no puedas desarrollarlo en una sola palabra entonces hay veces que necesitas un guión entonces te dejas un guión por si tiene que ser más descriptivo con una clase pero si tú ves doble guión es porque es un elemento o un modificador el nombre del bloque que viene adelante puede que necesites que tenga un guión de la división con el elemento vuelvo a repetir, luego te vas a echar todo el tiempo que te ahorras con esto luego lo pierdes buscando el nombre de la clase se va a pasar por eso nos guardamos el guión para poder ser un poco más descriptivo y tener cuidado, ser lo más conciso que puedas porque hay veces que tenés que utilizar el nombre del bloque más elemento y si tiene un modificador luego se puede concatenar un montón de clases y queda un poco feo al funciona pero queda un poco feo así que cuanto más conciso mejor ya se lo van pasando, están bien aprendidos una pregunta rápida hay alguna circunstancia en la que estaría justificado el uso de importancia? si claro, si por algún motivo por ejemplo tú tienes una imagen o sea, la importancia existe y está bien que exista, el tema es cuando se utiliza mal me pregunté para no volvernos locos intentando no usarlo exactamente, el ejemplo claro es tú tienes un párrafo y tienes una imagen flotada, la típica imagen flotada a la izquierda o a la derecha y luego tenemos la clase de ayuda clear para poder limpiarlo, entonces ese clear si o si tiene que tener un importancia porque si yo voy a usar el clear si o si quiero que se limpie, no me importa si hay una jerarquía que es más fuerte yo quiero que se limpie, entonces en ese caso el importancia está justificado para que se utilice pero solamente ahí o en un caso similar bueno yo tengo una pregunta a ver, bueno vale a saber el css que es en el html como? si tienes un tema que ya te han dado que no lo has hecho tú y tiene parte del css en el html no está mal que haya css en html porque existe algo que se llama css crítico que suele estar arriba y es css para mostrar el primer pantallazo de la página vale, no está mal que haya css pero cuidado, no lo pongamos en el inline esto, ahí sí hay cosas raras claro, que no se puede utilizar los extraes y los pones en un css y perdón, y lo del guión bajo dos para las jerarquías tienen importancia tienen jerarquía los guiones para identificador simplemente o eso afectan los dos guiones tanto de guión bajo como guiones comunes, no afectan la jerarquía lo que afectan las jerarquías son los elementos las clases y la identificador y el inline style vale, esos cuatro puntos si no échale un ojo nuevamente de la presentación ahí bien explica gracias alguna pregunta más chicos por acá tengo una mía pero así queda grabado o se transmite por el streamer el tema del importante cuando creas un tema hijo es exactamente igual porque el css primero se va a cargar el del padre y luego se va a cargar el del hijo si es importante la pregunta entiendo de dónde va necesito modificar algo que está en el padre lo que tienes que hacer en ese caso es, por ahí es probable que si vas a crear un tema hijo no puedas crear un vent puro porque no lo estás creando tú tienes que ajustarte al estilo que ha hecho el padre entonces si tú ves que utilizando las buenas clases no puedes poner tu estilo que sigue ganando del padre lo que tienes que hacer es copiar la estructura del padre copia la misma estructura abre el inspector de elemento sobre ese elemento HTML en el cual no puedes y copia exactamente, por más que sea así tú copias toda esa estructura y la pegas en tu tema hijo y te puedo asegurar que funciona en ese caso obviamente BEM no funciona si lo podemos aplicar mejor es ideal para proyectos personalizados que podemos comenzarlo desde cero pero si tenemos tema hijo puede que a veces se complique como el caso que menciona es eso, no? chicos alguna pregunta más si tenéis alguna duda lo he dicho me podés encontrar en el haul, paradme y encantado de daros respuesta así que muchísimas gracias nuevamente