Trucos

1. Usa rem para tamaños flexibles

• rem es relativo al tamaño de la fuente raíz (html), lo que facilita la escalabilidad global.

2. Usa em para componentes dependientes

• em es relativo al tamaño de la fuente del elemento padre, útil para crear componentes que escalan dentro de su contexto.

3. Prefiere rem para márgenes y paddings

• Facilita el escalado de todo el diseño si se cambia el tamaño de la fuente raíz.

4. Utiliza vh y vw para tamaños dinámicos

• vh y vw son porcentajes de la altura y anchura del viewport, ideales para tamaños dinámicos.

5. Usa min-width en media queries

• Prioriza min-width sobre max-width para un diseño mobile-first.

6. Flexbox para layouts responsivos

• Flexbox simplifica la alineación y distribución de elementos en contenedores flexibles.

7. CSS Grid para layouts complejos

• CSS Grid es perfecto para crear layouts bidimensionales complejos, con control preciso sobre filas y columnas.

8. clamp() para valores adaptativos

• Combina valores fijos y flexibles para un control avanzado de tamaños adaptativos.

9. Usa max-width en contenedores

• Evita que el contenido se extienda demasiado en pantallas grandes usando max-width.

10. Unidad ch para un mejor control tipográfico

• ch se basa en el ancho del carácter «0», útil para controlar el ancho de textos.

11. Tamaños de fuente fluidos

• Usa calc() o clamp() para fuentes que escalen de manera suave entre dos tamaños.

12. @supports para compatibilidad de CSS

• Usa @supports para aplicar estilos solo si el navegador soporta una característica.

13. Colores con opacidad (rgba y hsla)

• rgba y hsla permiten añadir opacidad a los colores, útil para fondos semitransparentes.

14. Evita unidades fijas para elementos responsivos

• Usa flex, %, vw, o rem en lugar de px para adaptabilidad.

15. Usa aspect-ratio para mantener proporciones

• Asegura que los elementos como imágenes o videos mantengan una proporción correcta.

16. Simplifica la responsividad con flex-wrap

• Permite que los elementos se envuelvan en líneas adicionales cuando no caben en la principal.

17. Centrado vertical con Flexbox

• Usa align-items: center; para centrar elementos verticalmente en su contenedor.

18. Botones accesibles con :focus-visible

• Aplica estilos específicos a elementos cuando son enfocados con teclado, usando :focus-visible.

19. Evita valores mágicos con CSS Custom Properties

• Define variables CSS (--mi-variable) para manejar valores reutilizables y escalables.

20. Diseños de tarjeta con grid-template-areas

• Simplifica la creación de layouts de tarjetas asignando áreas específicas en CSS Grid.

21. Transiciones suaves con transition

• Usa transition para añadir suavidad a los cambios de propiedades como color, background, transform.

22. Animaciones simples con @keyframes

• Crea animaciones CSS con @keyframes para efectos como fade-in, slide, etc.

23. Usa line-height en vez de padding para espaciado en textos

• Mantiene el texto centrado verticalmente sin necesidad de ajustar padding.

24. Utiliza scroll-behavior: smooth;

• Implementa desplazamiento suave en anclajes de página y navegación.

25. Media queries para print

• Asegura que tu sitio sea imprimible con @media print.

26. Hacer botones grandes en pantallas táctiles

• Usa tamaños mínimos de 48x48px para áreas táctiles, siguiendo las guías de accesibilidad.

27. tabindex para control del foco

• Controla el orden de tabulación en elementos interactivos con tabindex.

28. Definir fuentes fallback

• Usa una lista de fuentes en font-family para asegurar una buena presentación en caso de fallos.

29. Evita el texto truncado con white-space: nowrap;

• Usa esto junto con overflow: hidden; y text-overflow: ellipsis; para manejar textos largos.

30. Alternativas de texto en imágenes (alt)

• Siempre proporciona texto alternativo en imágenes para accesibilidad.

31. Prefiere SVGs sobre PNGs para gráficos escalables

• SVGs son más ligeros y escalan sin perder calidad, ideales para gráficos y logos.

32. Usa object-fit para ajustar imágenes

• Asegura que las imágenes llenen su contenedor adecuadamente con object-fit: cover;.

33. Evita el uso de !important

• Usa especificidad de CSS en su lugar para mantener el código limpio y predecible.

34. Hacer tipografía accesible con font-size mínimo de 16px

• Asegura que el texto sea legible en todas las pantallas con un tamaño mínimo adecuado.

35. Usa box-sizing: border-box;

• Facilita el cálculo del tamaño de los elementos incluyendo padding y border dentro del ancho/alto.

36. Configura lang en HTML

• Ayuda a los lectores de pantalla y buscadores a interpretar correctamente el idioma del contenido.

37. Evita colores de bajo contraste

• Asegura que el contraste entre texto y fondo cumpla con las pautas de accesibilidad (AA/AAA).

38. Utiliza pointer-events: none; para elementos no interactivos

• Desactiva la interacción de usuario en elementos que no deberían ser clicables.

39. Usa outline: none; con precaución

• No elimines el outline sin ofrecer una alternativa accesible para el foco visual.

40. Mantén el encabezado visible con position: sticky;

• Usa sticky para hacer que los elementos se mantengan visibles al desplazarse.

41. Utiliza aria-label para mejorar la accesibilidad

• Añade descripciones a elementos interactivos que no tienen texto visible.

42. display: none; vs visibility: hidden;

• display: none; elimina el elemento del flujo del documento, mientras que visibility: hidden; lo oculta pero conserva su espacio.

43. Usa ::before y ::after para añadir contenido decorativo

• Agrega iconos, líneas o cualquier contenido que no sea parte del DOM principal.

44. background-size: cover; para fondos de pantalla completa

• Asegura que el fondo cubra todo el contenedor sin deformarse.

45. Configura text-transform para consistencia tipográfica

• Usa uppercase, lowercase, o capitalize para controlar la capitalización del texto.

46. Usa letter-spacing para mejorar la legibilidad

• Ajusta el espaciado entre letras en textos grandes o pequeños para mejorar la legibilidad.

47. Define un grid modular con repeat en CSS Grid

• Simplifica la repetición de columnas o filas con repeat().

48. Configura :root para variables globales

• Define todas las CSS Custom Properties en :root para un fácil mantenimiento.

49. Usa text-shadow para mejorar la legibilidad en fondos complejos

• Añade sombras a los textos para asegurar que sean legibles sobre imágenes o fondos detallados.

50. Prefiere @media queries en lugar de JavaScript para cambios de estilo

• Siempre que sea posible, usa CSS Media Queries en lugar de JavaScript para cambios basados en el viewport.

51. Utiliza container queries

• Permiten aplicar estilos basados en el tamaño del contenedor en lugar del viewport.

@container (min-width: 500px) { 
  .card { grid-template-columns: 1fr 2fr; } 
}

52. CSS Nesting para estructurar mejor el código

• CSS ahora permite anidar estilos sin preprocesadores.

.nav { background: black; 
  a { color: white; } 
}

53. Subgrid en CSS Grid

Permite que los elementos secundarios hereden la estructura de grid de su padre.

.container { display: grid; grid-template-columns: 1fr 2fr; } 
.child { display: subgrid; grid-column: span 2; }

54. Usa prefers-reduced-motion para accesibilidad

• Evita animaciones innecesarias para usuarios con sensibilidad al movimiento.

@media (prefers-reduced-motion: reduce) { 
  * { animation: none; transition: none; } 
}

document.documentElement.style.setProperty('--main-color', 'blue');

.glass { backdrop-filter: blur(10px); }

.video { aspect-ratio: 16 / 9; }

input[type="checkbox"] { accent-color: #ff6600; }

article:has(img) { border: 2px solid red; }

background-image: image-set("low.jpg" 1x, "high.jpg" 2x);

.wrapper { container-type: inline-size; }

.container { container-type: inline-size; container-name: card; }
@container card (min-width: 600px) { 
  .content { font-size: 1.5rem; } 
}

@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.scroll-element { animation: fade-in linear forwards; scroll-timeline: --timeline block; }

.container { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); grid-auto-rows: masonry; }

:root { --btn-bg: color-contrast(white vs black, blue); }

.button { background: rgba(255, 255, 255, 0.2); backdrop-filter: blur(10px); border-radius: 10px; }

@keyframes move-gradient { 0% { background-position: 0% 50%; } 100% { background-position: 100% 50%; } }
.bg-animated { background: linear-gradient(270deg, #ff7e5f, #feb47b); background-size: 400% 400%; animation: move-gradient 5s infinite alternate; }

@font-face { font-family: 'CustomFont'; src: url('font.woff2') format('woff2'); font-display: swap; }

Estos trucos y mejores prácticas te ayudarán a crear sitios web más eficientes, responsivos y accesibles, mejorando tanto la experiencia del usuario como la mantenibilidad del código.