¿Tratas con selectores de CSS de este tipo en tus proyectos?
#main .post div:first-child > a.button{}Entonces, este curso sobre BEMIT CSS, 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?
¿Alomejor en un bloque de la página Home?
¿Tal vez en ambos sitios?
Lo más seguro es que no lo sepas.
Pero espera, aún hay más preguntas.
Después de un año, ves este código de un proyecto que has hecho tú pero ya no recuerdas nada de cómo lo hiciste.
<body class="light">
<article class="post postSmall open">
<div class="content">
<div class="content-inner">
<div class="content-column-wrapper">
<div class="content-text">
<p>Lorem ipsum dolor amet</p>
</div>
<div class="content-sep-clear"></div>
<div class="content-separator content-full-width-sep sep-none">
<div class="content-clearfix"></div>
</div>
</div>
</div>
<div class="post-foot">
<p class="container">
<span class="gr-1/3">
<a class="btn btn-negative button-cancel" href="">Cancel</a>
</span>
<span class="hidden">or</span>
<span class="gr-2/3">
<a class="btn btn-positive button-accept" href="">Confirm</a>
</span>
</p>
</div>
</article>
<footer class="page-foot">
<small class="copyright">2019 - All rights reserved</small>
</footer>
</body>
¿Puedes saber algo sólo viendo el código o tendrías que aterrizar en el proyecto de nuevo?
Es decir, revisarlo detenidamente y con tiempo.
¿Qué clases pueden ser reutilizadas en otras secciones?
¿Hay alguna clase relacionada con otra?
¿Alguna de esas clases está siendo usada en tu JavaScript?
¿Cuál?
Y podría seguir.
Entonces qué, ¿has podido responder todas?
¿No? Entonces, no esperes más, este curso es para ti.
Con la metodología BEMIT CSS 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 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 mí.
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 CSS.
Si utilizas por ejemplo ReactJS 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 autodocumentació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 tú prefieras.
Puede que sólo te interese la sección BEM, o alomejor estás interesado en ITCSS para organizar mejor tu proyecto.
O quizás te guste toda la metodología 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 CSS y veo el código, me doy las gracias por haberlo aplicado.
Bueno, no digo más, nos vemos en el curso!
Aquí tienes el enlace:
Curso en Udemy
Mira, en este otro artículo verás un ejemplo donde utilizo BEMIT CSS:
Ejemplo práctico de la metodología