💅 Styling

• Preferir Grid para layout global y componentes complejos que requieran distintos layout segun breakpoint, especialmente con elementos distribuidos en 2 ejes

• Flex para la distribucion de elementos a lo largo de 1 eje

• Evitar inline-css , en lo posible siempre extraer las clases a la hoja de estilos

• Utilizar unidades de medida relativas (rem) o porcentaje (%, vh,vw)

  • ✅ 2rem
  • ❌ 32px

• En cuanto a variables preferir siempre css variables en lugar de sass variables

  • ✅ --var
  • ❌ $var

• Utilizar siempre las variables globales para tipografia, colores , breakpoints y espaciado.

  • ✅ font-size: var(--text-lg)
  • ❌ font-size: 2rem

• Ordena las propiedades dentro de la reglas

  • poniendo al principio lo que tenga que ver con dimensiones, luego posicionamiento, a continuación el estilo y terminar con lo respectivo al texto.
  • Mas info en este articulo de @Luke You need to write CSS like that to improve your code quality 🧐

• Si no lo hiciste, o el framework nunca lo hizo por vos , agrega a mano un css reset

  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

• Los nombres de las clases para los componentes tomarlo de los nombres del Figma siguiendo las normas de nomenclado de CSS

• La convencion de nombrado de clases sera la BEM block--element__modifier

  • Names are written in lowercase Latin letters.
  • Words are separated by a hyphen (-).
  • The block name defines the namespace for its elements and modifiers.
  • The element name is separated from the block name by a double underscore (__).
  • The modifier name is separated from the block or element name by a single underscore (_).
  • The modifier value is separated from the modifier name by a single underscore (_).
  • For boolean modifiers, the value is not included in the name.