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.

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.

¿Te ha resultado útil??

SiNo

0 / 0

#css