Saltar al contenido

10 trucos CSS que todo desarrollador web debe conocer

Si bien CSS no se usa tan ampliamente como JavaScript, todavía se encuentra entre los 10 principales lenguajes de codificación, según Redmonk. Dado que CSS es bastante sólido, razonablemente fácil de aprender y universal en diferentes navegadores, es popular entre los desarrolladores de sitios web.

Como ocurre con todos los lenguajes de codificación, existen varios atajos o trucos con CSS que le permiten escribir código más limpio, mejorar los elementos de diseño y ahorrar un tiempo valioso. Además, puede insertar directamente estos fragmentos en su sitio utilizando un editor de código.

También es importante saber que no es necesario ser un desarrollador web senior para utilizar CSS. Los datos de W3Techs muestran que el 96 por ciento de todos los sitios web utiliza CSS, y poder utilizar CSS para mejorar el diseño y la apariencia de un sitio web es fundamental para el funcionamiento de los principales CMS de código abierto como WordPress.

De hecho, la mayoría de las herramientas de creación de sitios web más importantes (generalmente conocidas por promover un enfoque “Lo que ves es lo que obtienes” o WYSIWYG) ahora permiten a los usuarios insertar código CSS personalizado.

Si es nuevo en CSS, freeCodeCamp tiene un excelente video tutorial en Youtube donde puede aprender los conceptos básicos. Si ya conoce los aspectos fundamentales, comencemos con estos diez trucos CSS.

1. Cómo posicionar el contenido en el centro con CSS

Colocar contenido en el medio de la pantalla puede resultar complicado. Sin embargo, puede utilizar position: absolute para anular la ubicación dinámica y colocar siempre el contenido en el centro.

También funciona con todas las resoluciones en todos los dispositivos. Sin embargo, siempre verifique si todo está colocado como lo desea y si el elemento se ve natural incluso en pantallas más pequeñas.

Fragmento de ejemplo:

2. Cómo arreglar la posición de un elemento en CSS

A pesar de que los sitios web son dinámicos, es posible que tenga algunos elementos que desee corregir en determinadas posiciones. Puede hacerlo utilizando el position:absolute texto.

Sin embargo, use este método con cuidado y pruébelo de antemano en cada tamaño y resolución de pantalla para que no rompa el diseño de su sitio.

Seguir este script con un nodo de posición específico asegura que el elemento permanece en la misma posición para todos los usuarios.

Fragmento de ejemplo:

3. Cómo ajustar imágenes a la página en CSS

Hay pocas cosas peores que las imágenes que se derraman sobre la pantalla de los visitantes de su sitio. Puede romper absolutamente el diseño de su sitio y desanimar a los usuarios.

Sin embargo, con este simple truco, puede asegurarse de que sus imágenes siempre se ajusten a la pantalla del visitante, independientemente del dispositivo que estén usando.

Fragmento de ejemplo:

4. Cómo editar el estilo en una sola página en CSS

Si desea que algunas de las publicaciones de su página se vean diferentes a otras, puede usar el .single-post script para anular el estilo CSS del sitio. Esto garantiza que solo modifique una página y deje el formato de las otras páginas como predeterminado.

Sin embargo, si utiliza mucho este método, es mejor modificar el estilo CSS general para evitar escribir líneas de código innecesarias.

Fragmento de ejemplo:

5. Cómo consolidar el estilo en CSS

Si sabe que desea agregar estilo CSS a varios elementos, entonces escribir estos fragmentos de código uno por uno lleva tiempo. Sin embargo, cuando separa elementos con comas y escribe el estilo CSS en el interior, el estilo se agrega a todos ellos.

Esto le ayuda a ahorrar tiempo y reducir el peso de su código porque no tiene que escribir una línea similar de código varias veces.

Fragmento de ejemplo:

El estilo predeterminado de los enlaces visitados en los que los usuarios han hecho clic puede no funcionar bien con el estilo actual de su sitio. Puede utilizar el código CSS para modificar el aspecto de los enlaces antes y después de que los visitantes hayan hecho clic en ellos.

Luego, puede combinarlos con el estilo general de su sitio para crear una experiencia única.

Fragmento de ejemplo:

7. Retrasos del efecto de desplazamiento en CSS

La :hover selector es una pseudoclase CSS que le permite crear un efecto flotante. Sin embargo, puede estilizar aún más esto agregando un transition elemento para retrasar el efecto flotante.

Si bien se ve ordenado, también crea una sensación de movimiento en los ojos de los usuarios, lo que atrae aún más la atención sobre el elemento.

Fragmento de ejemplo:

8. Cómo deshabilitar el ajuste de texto y agregar puntos suspensivos en CSS

Si tiene poco espacio para su texto, es posible que deba acortarlo para que se ajuste a otros elementos. Claro, puede modificar manualmente cada uno de los elementos de texto, pero eso lleva tiempo y algo de prueba y error.

Lo que puede hacer en su lugar es combinar overflow, white-space, y text-overflow para crear una ruptura natural en el texto que sea agradable a la vista.

El siguiente ejemplo establece el límite en el ancho del texto, oculta la parte desbordante, deshabilita el ajuste del texto y agrega puntos suspensivos (…) para indicar que hay más texto para los usuarios.

Fragmento de ejemplo:

9. Estilo de letra inicial en CSS

La letra inicial estilizada o las letras mayúsculas se han utilizado en el diseño de libros y revistas durante mucho tiempo. Funciona al captar la atención de los lectores y hacer que se interesen en leer la primera línea.

Si bien puede pensar que este estilo ha envejecido, también puede diseñarlo para que se vea moderno y aún así capitalice el efecto psicológico que crea para sus visitantes. Además, la opción de mayúsculas también está escrita en el lenguaje CSS, por lo que puede usarla sin esfuerzo y darle a sus párrafos una nueva apariencia.

Fragmento de ejemplo:

10. Cómo restablecer los estilos CSS

Por último, pero no menos importante, es posible que deba anular todos los atributos de estilo predeterminados en diferentes navegadores para que su diseño funcione sin problemas.

Cada navegador tiene su propia hoja de estilo, con estilos predeterminados integrados, y esto a veces puede ser un problema cuando intenta que su sitio web se vea coherente en todos los navegadores.

Puede utilizar un restablecimiento completo de CSS de Eric Meyer que cubre casi todas las bases. Sin embargo, también puede lograr un resultado de reinicio mínimo, que puede pedir prestado a Jeff Starr:

Y ahí lo tiene, diez trucos para hacer que su código CSS se vea más ordenado, disminuir el tiempo de codificación y agregar elementos amigables para los visitantes.

¡Gracias por leer!

Soy un escritor apasionado por el marketing digital, el desarrollo web y la ciberseguridad. Puedes contactarme en LinkedIn aquí.

Este contenido se publicó originalmente aquí.