BEM CSS + ITCSS = Metodología BEMIT - Diseño web avanzado

Description

¿Tratas con selectores de CSS de este tipo en tus proyectos?

#main .post div:first-child > a.button

Entonces, este curso es para ti.

Aún así, para demostrártelo, te voy a hacer una serie de preguntas y si no puedes contestarlas todas, definitivamente es para ti.

¿Sabrías decirme dónde está ese selector definido?

¿En qué archivo?

¿En qué carpeta?

Si no utilizas un preprocesador de CSS y lo tienes todo en el mismo archivo, aún podrías contestar rápido a esas preguntas. Eso sí, sin las ventajas que te ofrece el preprocesador.

Pero aún hay más:

¿Sabrías decirme a qué secciones de tu web afecta ese selector?

¿Quizás en un formulario de la página de contacto?

¿En un bloque de la página home?

¿Tal vez en ambos sitios?

¿Está siendo usado ese selector en tu JavaScript?

Lo más seguro es que no lo sepas.

Y podría seguir.

¿Has podido responder todas las preguntas? ¿No?

Entonces, no esperes más, este curso es para ti.

Con la metodología que verás aquí, tendrías respuesta a todas esas preguntas y muchas más.

¿Y si te dijera, que podrías, sólo viendo el código HTML en el inspector del navegador, saber la carpeta y el archivo donde está el estilo definido de cada clase?

Además podrías saber que relación tiene cada clase con las demás y cómo afecta cada clase de manera global en toda tu web. Pero sin documentación extensa, simplemente leyendo tu código, un año después, en menos de 5 segundos.

¿Qué te parece la idea?

Soy Ricardo y esta es la razón que me trae a contarte esto, te voy a hablar de nomenclatura, de metodología, de buenas prácticas.
Porque escribir CSS es fácil, pero cuidarlo y mantenerlo es otra historia.

Cuando haces un proyecto, a nivel front end, pasas mucho tiempo maquetando y manteniendo el código CSS. Es una tarea difícil cuando hay selectores anidados que influyen en varios sitios de la web y pueden romper estilos de otras secciones.

No sabes qué puedes editar o borrar.
Además, como no está bien estructurado el código, acabas añadiendo !important por todos lados, un caos vaya.

¿Quieres mejorar tu metodología de trabajo en el desarrollo web Front End?
¿Quieres optimizar el tiempo y ahorrarte problemas cuando un cliente te pida modificaciones no previstas?

Ya no tendrás que sufrir más con ese tipo de problemas. Este sistema es robusto, escalable, mantenible en el tiempo y con una serie de reglas fáciles de seguir.

Además, el curso está súper concentrado, no hay paja por eso sólo dura 3h. Esto quiere decir que puedes verlo ahora mismo y mañana ya puedes estar aplicándolo.

He hecho este curso porque me hubiese gustado encontrarlo a mi.

Con este método, la maquetación se hace muchísimo más cómoda.

¿Qué aprenderás en este curso?

Pues:

La nomenclatura BEM.

El sistema ITCSS.

Y la unión de ambos, la metodología BEMIT.

Si utilizas por ejemplo react o cualquier otra tecnología, también pueden servirte los conceptos vistos aquí.

Lo que quieres al final es poder escribir código que sea lo más transparente y auto documentado posible.

La transparencia significa que es clara y obvia en su intención y la auto documentación significa que no tenemos que perder tiempo para escribir y leer documentación extensa y complementaria.

De manera muy resumida:

Este sistema son pautas a seguir a la hora de nombrar las clases de HTML y cómo atacarlas desde tu CSS.

Además te da una organización de carpetas y archivos especial que te ofrece ciertas características en tu código.

Puedes implementarlo a lo que estés utilizando, todo o alguna parte solamente. Lo que tu prefieras.

Puede que sólo te interese la sección BEM, o quizás estás interesado en ITCSS para organizar mejor tu proyecto. O quizás te guste todo y lo implementes a lo que ya estás usando.

Pero estoy seguro que este curso te dará otro punto de enfoque, otra perspectiva.

Yo lo uso todos los días en todos los proyectos, de hecho llevo casi 2 años utilizándolo y aún a día de hoy cuando tengo que modificar un proyecto que hice con el sistema BEMIT y veo el código, me doy las gracias por haberlo aplicado.

Bueno, no digo más, nos vemos en el curso!

TAKE THIS COURSE