Curso de preprocesadores

Curso de preprocesadores by Platzi

¿Qué es un preprocesador?

En pocas palabras extiende el poder de CSS y HTML al nivel de un lenguaje de programación más potente com caracteristicas tales como variables, funciones y mixins.

• Variables

Pedazo de memoria reservado para almacenar un valor, correspondiente a un tipo de dato.

• Funciones

Las funciones tienen la posibilidad de tener parametros o argumentos que son variables que modifican su comportamiento.

• Mixin

Es una clase cuya finalidad es ofrecer una funcionalidad que pueda ser reutilizada en otras clases pero que no está pensada para usarse de forma autonoma.

¿Por qué utilizarlos?

• Te salva tiempo y dinero al tener la opción de reutilizar código.
• Tener un código más sencillo de mantener y editar.
• Modularizar nuestros proyectos de una forma lógica y sencilla.

Metodologías para estructurar código

• ¿Qué son?

Sistemas preestablecidos formales y bien documentados, que te ayudan a escribir y organizar código mantenible y escalable en sistemas grandes y complejos.

• Ventajas

  Evitar redundancia al momento de crear componentes escalables y reutilizables.

  Evitar el mal uso de propiedades como !important.

  Solucionar problemas de manejo en sistemas grandes y complejos.

• Ejemplos metodologías \

• BEM
• SMACCSS
• Atomic CSS
• OOCSS

Estado pre procesadores CSS

BEM

Bloques, Elementos y Modificadores

Es una metodología de trabajo creada por Yandex para proyectos web grandes o pequeños. El objetivo de BEM es dividir lógicamente las piezas de las que se compone una web.

• Bloque.

• Elemento.

• Modificador.

• Sintaxis:

  • .bloque{}
  • .bloque__elemento{}
  • .bloque--modificador{}

• Ventajas:

  • Menos repeticiones.
  • Independencia Absoluta.
  • Mejoría en la herencia múltiple.

Guías para creación y mantenimiento de código

"Tener un código que luzca como si solo una persona lo haya escrito"

• Recomendaciones

  • Ser concistentes con la identación.
  • Concistencia con espacios, corchetes, puntos y comas.
  • Concistencia de números, de selectores y divisiones.
  • Agrupaciones de propiedades.
  • Uso de ID's y clases.

Guía de código de platzi games

Pug

Pug es un generador de templates implementado con javascript para Node.js y navegadores.

Estado CSS