marzo 29, 2024

7 errores de CSS que debes evitar como principiante

Trabajar con hojas de estilo en cascada (CSS) puede ser un desafío para los principiantes. Con CSS, puede estructurar, actualizar y mantener la apariencia de su aplicación. Pero el lenguaje requiere habilidad para manipular páginas HTML para obtener el diseño deseado.


Aquí hay algunos errores que debe evitar al trabajar con CSS. Le ahorrarán tiempo y facilitarán su proceso de desarrollo.


1. Usar px para tamaños de fuente

La unidad “px” representa píxeles. Puede usarlo para expresar varias longitudes en una página web, desde el ancho y alto de un elemento hasta el tamaño de la fuente.

Sin embargo, px bloquea su diseño a un tamaño fijo para todas las pantallas. Una imagen en px puede ocupar todo el ancho de una pantalla y solo una pequeña parte de otra. Si desea un elemento más proporcional, use medidas relativas como rem o porcentajes (%).

La mejor medida relativa a utilizar es rem. Esta unidad se refiere al tamaño de fuente del elemento raíz que un lector a menudo puede establecer en la configuración de su navegador. Puede ver el impacto de px y rem en un elemento en el siguiente ejemplo:

 <!DOCTYPE html>
<HTML>
    <head></head>
    <body>
        <h1>This is heading 1</h1>
        <h2>This is heading 2</h2>
        <p>This is a paragraph.</p>
        <p>This is another paragraph.</p>
    </body>
</html>

Puede diseñar tamaños de fuente en este documento usando unidades px con el siguiente CSS:

 h1 {
    font-size: 50px;
}

h2 {
    font-size: 30px;
}

p {
    font-size: 15px;
}

La página resultante se ve aceptable cuando la ves en una pantalla grande:

Impacto de PX en el párrafo

Pero no se ve presentable en una pantalla más pequeña, como en un teléfono:

efecto px en pantalla pequeña

Después de eso, aplique rem en el mismo contenido. Especifique un tamaño de fuente base en el elemento html y cambie el tamaño de otros elementos usando rems, como se muestra a continuación:

 html {
    font-size: 16px;
}

h1 {
    font-size: 3rem;
}

h2 {
    font-size: 2rem;
}

p {
    font-size: 1rem;
}

Tenga en cuenta la diferencia entre pantallas grandes y pequeñas. Con rem, el contenido escala mejor sin importar el tamaño de la pantalla. Los elementos nunca superarán el tamaño de pantalla que establezca. Por eso es mejor usar longitudes relativas en lugar de píxeles.

En una pantalla de escritorio:

efecto rem en texto en pantalla grande

En una pantalla pequeña, el texto en unidades rem aún se puede leer:

efecto de rem en la pantalla chica

2. Pon todos tus estilos en un solo archivo

Usar un archivo CSS para un proyecto grande puede resultar confuso. Tendrá un archivo con largas líneas de código que será confuso durante la actualización. Intente usar diferentes archivos de hojas de estilos en cascada para diferentes componentes.

Por ejemplo, puede tener diferentes archivos para la navegación, el encabezado y el pie de página. Y otra para secciones del cuerpo. Separar sus archivos CSS ayuda a estructurar su aplicación y fomenta la usabilidad del código.

3. Uso inapropiado de CSS en línea

En Vanilla CSS, puede escribir estilos en páginas HTML al igual que en marcos CSS como Bootstrap y TailwindCSS. CSS en línea le permite aplicar un estilo único a un elemento HTML. Utilice el atributo de estilo del elemento HTML.

El siguiente código es un ejemplo de CSS en línea.

 <h2 style="color:green;">This is a Green Heading</h2>

<p style="color:red;">This is a red paragraph.</p>

El texto se verá así:

efecto css en línea en el texto

Sin embargo, el HTML de solo CSS en línea puede ser complicado. Dado que no hay otra ubicación para CSS, todo CSS existe en el mismo archivo que el HTML. Se verá abarrotado. Editar un archivo como este es difícil, especialmente si no es su código.

Además, con CSS en línea, debe escribir el código para cada elemento. Esto aumenta la repetición y reduce la reutilización de código. Utilice siempre una combinación de hojas de estilo externas y CSS en línea para diseñar sus páginas web.

4. ¡Uso excesivo! importante

En CSS, el !importante la regla agrega más importancia a una propiedad/valor. Anula otras reglas de estilo para esa propiedad en ese elemento.

Solo debes tener unos pocos !importante reglas en su código. Úselo solo cuando sea necesario. No tiene sentido escribir código y luego sobrescribirlo. Su código se verá desordenado y causará problemas cuando se ejecute en algunos dispositivos.

 <!DOCTYPE html>
<html>
    <head></head>
    <body>
        <p> I am orange </p>
        <p class="my-class"> I am green </p>
        <p id="my-id"> I am blue. </p>
    </body>
</html>

CSS:

 #my-id {
    background-color: blue;
}

.my-class {
    background-color: green;
}

p {
    background-color: orange !important;
}

El resultado es así:

efecto del comando !important sobre el estilo

5. No seguir las convenciones de nombres

CSS tiene convenciones de nomenclatura que guían a los desarrolladores sobre cómo escribir código estándar. Esto es esencial si termina depurando el archivo CSS en una fecha futura.

Uno de esos estándares incluye el uso de guiones para separar palabras agrupadas. Otra es nombrar un selector en función de lo que hace. Así que quien lo mire no tendrá que adivinar. También hace que el código sea más fácil de leer, mantener y compartir. Por ejemplo:

En lugar de esto:

 .image1 { margin-left: 3%; } 

Escribe así:

 .boy-image { margin-left: 3%; } 

Cuando mire la hoja de estilo, sabrá exactamente para qué imagen está destinado el código. La guía de estilo HTML/CSS de Google enumera muchas otras convenciones que todo desarrollador debe conocer.

Escribir comentarios es la habilidad más subestimada en la programación. Muchas personas se olvidan de escribir comentarios para explicar su código. Pero ahorra tiempo. Los comentarios son esenciales para leer y mantener el código.

Dado que CSS está poco estructurado y cualquiera puede desarrollar sus propias convenciones, los comentarios son vitales. Usar comentarios bien estructurados para explicar su hoja de estilo es una buena práctica. Puede escribir comentarios que expliquen secciones del código y lo que hacen.

 
.video {
    margin-top: 2em;
}


.salutation {
    margin-top: 1em;
}

7. No planees con anticipación

Mucha gente lo hace, pero es un gran error comenzar a programar sin un plan. CSS determina la apariencia de su estructura de front-end. El diseño dice mucho sobre tus habilidades de programación.

dibujo en el bloc de notas

Un diseño para su sitio aclara su visión y los recursos necesarios para llegar allí. Tener una imagen mental del proyecto. Luego, diséñelo en papel o use un conjunto de herramientas de diseño como Canva para visualizar lo que desea.

Cuando tenga una imagen completa del proyecto, reúna todos sus activos y comience a codificar. Le ahorrará tiempo y redundancia.

Por qué debería considerar estas recomendaciones

Si está desarrollando aplicaciones en la web, utilizará CSS. Trabajar bien con CSS requiere práctica y seguir las convenciones estándar. Las convenciones no solo hacen que su código sea legible sino también mantenible.

Escribir código estandarizado le ahorrará tiempo y esfuerzo. El tiempo que hubiera dedicado a formatear el front-end puede dedicarse a funciones más complejas. También garantiza que pueda reutilizar su código y compartirlo con otros. Escriba mejor código siguiendo las convenciones establecidas y conviértase en un mejor desarrollador.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *