Fondo

Las hojas de estilo en cascada (CSS) son una poderosa herramienta que se utiliza para diseñar páginas web.

CSS permite la separación del contenido del documento de la presentación del documento, lo que permite a los ingenieros diseñar diferentes aspectos de las páginas web, que incluyen: fuentes, colores, fondos, diseños y animaciones, entre otros.

Sin embargo, escribir CSS que sea mantenible, escalable y eficaz puede ser un desafío, especialmente a medida que las aplicaciones web crecen en escala y complejidad.

En este segmento, compartiré algunas de las mejores prácticas de CSS que pueden ayudarlo a escribir un mejor código CSS, con algunos ejemplos de código de lo que se debe y no se debe hacer.

A nivel personal, CSS me provocó cierta pérdida de cabello. Te salvaré del destino que sufrí. ¡Solo lee esto!

Usar un preprocesador CSS

Los preprocesadores de CSS como Sass, Less y Stylus son herramientas que lo ayudan a escribir código CSS más fácil de mantener y escalable.

Estos preprocesadores brindan funciones como variables, mixins, funciones y anidamiento, entre otras. Con variables, puede definir valores que se reutilizan en todo su código CSS.

Los mixins le permiten agrupar declaraciones CSS y reutilizarlas en diferentes partes de su código.

Las funciones lo ayudan a realizar cálculos y manipular valores. El anidamiento le permite escribir reglas CSS que son más específicas y fáciles de leer.

Haz esto ✅

$primary-color: #007bff;

.button {
  background-color: $primary-color;
  color: #fff;
}

No hagas esto ❌

.button {
  background-color: #007bff;
  color: #fff;
}

Mediante el uso de un preprocesador CSS, puede hacer que su código sea más conciso y más fácil de mantener.

Usa una Metodología CSS

Una metodología CSS es un conjunto de pautas y convenciones que lo ayudan a estructurar y organizar su código CSS.

Una metodología proporciona un enfoque coherente para escribir CSS, lo que facilita que varios desarrolladores trabajen en el mismo código base.

Existen varias metodologías CSS, incluidas BEM (Block-Element-Modifier), SMACSS (Arquitectura escalable y modular para CSS) y OOCSS (CSS orientado a objetos), entre otras.

BEM es una metodología popular que proporciona una convención de nomenclatura para las clases de CSS. La convención de nomenclatura BEM utiliza un guión bajo doble ( __) para separar un bloque y un elemento y un guión doble ( --) para separar un bloque o un elemento y un modificador.

Haz esto ✅

<div class="button button--primary">
  Click Me
</div>

No hagas esto ❌

<div class="primary-button">
  Click Me
</div>

Al usar una metodología CSS, puede hacer que su código sea más consistente, mantenible y más fácil de entender.

Use un reinicio o normalización de CSS

Los diferentes navegadores web tienen diferentes estilos predeterminados para los elementos HTML.

Para asegurarse de que su código CSS funcione de manera consistente en todos los navegadores, debe usar un restablecimiento o normalización de CSS. Un restablecimiento de CSS es un conjunto de reglas de CSS que elimina todos los estilos predeterminados de los elementos HTML.

Una normalización es un conjunto de reglas CSS que normalizan los estilos en diferentes navegadores.

Haz esto ✅

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" />

No hagas esto ❌

body {
  margin: 0;
  padding

En este segmento, exploramos estas tres mejores prácticas de CSS que pueden ayudarlo a escribir un mejor código CSS, que incluyen:

1. Usar un preprocesador CSS
2. Usa una metodología CSS
3. Use un restablecimiento de CSS o normalice

1. Use nombres de clase significativos y descriptivos
2. Usar propiedades y valores abreviados
3. Evitar el uso de!important
4. Use flexbox o grid para diseños
5. Minimizar el uso de selectores globales
6. Evite usar demasiados selectores anidados
7. Mantenga su código CSS organizado y mantenible