|
所在平台: Udemy |
课程主页: https://www.udemy.com/course/bem-css-itcss-metodologia-bemit-diseno-web-avanzado/
课程评论:没有评论
课程名称:BEM CSS + ITCSS = Metodología BEMIT - Diseño web avanzado 课程概述: 本课程专为在项目中处理复杂CSS选择器的开发者设计。例如,选取`#main.post div:first-child > a.button`的情况。如果你无法快速回答以下问题:这个选择器在哪里定义?文件和文件夹是什么?这个选择器影响了网页的哪些部分?是否在JavaScript中被使用?那么,这个课程将是你所需的解决方案。 通过本课程所学习的方法,你将能够迅速回答这些问题,甚至仅通过浏览器的HTML检查器就能知道每个类的样式定义文件及其之间的关系,并了解其对整个网站的影响。而这一切都无需大量的文档支持,简单明了。 讲师Ricardo将会教导你关于命名法、方法论和最佳实践。编写CSS虽然简单,但维护和管理却是一项挑战。项目中经常会有嵌套选择器,这会影响多个网站部分并可能破坏其他部分的样式。因此,保持代码的整洁和结构化显得尤为重要。课程内容精炼,仅需3小时,便于快速学习和应用。 在这门课程中,你将学习到: 1. BEM命名法 2. ITCSS系统 3. BEMIT方法论的结合 不论你使用的是React还是其他技术,这些概念都将对你有所帮助。最终目标是写出透明且自我文档化的代码,减少对额外文档的依赖。 此外,本课程还提供了类命名及其CSS处理的规范,从而带来最佳的文件和文件夹组织方式,提升项目的可维护性和扩展性。你可以根据自己的需要选择全盘实施或部分实施。 无论你选择关注BEM部分、ITCSS组织方式,还是两者兼顾,这门课程都会带给你新的视角和方法。Ricardo在过去两年里一直在实战中应用这一系统,并深信它将极大改善你的工作流。期待在课程中见到你!
¿Tratas con selectores de CSS de este tipo en tus proyectos?#main.post div:first-child > a.buttonEntonces, 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!