Trabajar con hojas de estilo en cascada (CSS) puede ser difícil para los principiantes. Con CSS, puede estructurar, actualizar y mantener el aspecto de su aplicación. Pero el lenguaje requiere habilidades 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. Uso de 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 su tamaño de 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 proporción de otra. Si quieres un elemento más proporcional, utilizar 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:
html>
<HTML>
<cabeza>cabeza>
<cuerpo>
<h1>Este es el encabezado 1h1>
<h2>Este es el encabezado 2h2>
<pag>Este es un párrafo.pag>
<pag>Este es otro párrafo.pag>
cuerpo>
html>Puede diseñar los tamaños de fuente en este documento usando unidades px con el siguiente CSS:
h1 {
tamaño de fuente: 50píxeles;
}h2 {
tamaño de fuente: 30píxeles;
}
pag {
tamaño de fuente: 15píxeles;
}
La página resultante se ve aceptable cuando la ves en una pantalla grande:
Pero no se ve presentable en una pantalla más pequeña, como en un teléfono:
A continuación, aplique rem sobre 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 ilustra a continuación:
html {
tamaño de fuente: 16píxeles;
}h1 {
tamaño de fuente: 3movimiento rápido del ojo;
}h2 {
tamaño de fuente: 2movimiento rápido del ojo;
}
pag {
tamaño de fuente: 1movimiento rápido del ojo;
}
Observe la diferencia entre las pantallas grande y pequeña. Con rem, el contenido escala mejor sin importar el tamaño de la pantalla. Los elementos nunca superarán el tamaño de pantalla establecido. Por eso es mejor usar longitudes relativas en lugar de píxeles.
En una pantalla de escritorio:
En una pantalla pequeña, el texto en unidades rem aún se puede leer:
2. Poner todos sus estilos en un solo archivo
Usar un archivo CSS para un gran proyecto puede crear un lío. Tendrá un archivo con largas líneas de código que será confuso al actualizar. Intente usar diferentes archivos para hojas de estilo CSS para diferentes componentes.
Por ejemplo, puede tener diferentes archivos para navegación, encabezado y pie de página. Y otra para las secciones del cuerpo. Separar sus archivos CSS ayuda a estructurar su aplicación y fomenta la usabilidad del código.
3. Usar CSS en línea de manera inapropiada
En Vanilla CSS puedes escribir estilos en las páginas HTML como en Marcos CSS como Bootstrap y TailwindCSS. CSS en línea le permite aplicar un estilo único a un elemento HTML. Utiliza el atributo de estilo del elemento HTML.
El siguiente código es un ejemplo de CSS en línea.
<h2estilo="color verde;">Este es un rumbo verdeh2>
<pagestilo="color rojo;">Este es un párrafo rojo.pag>
El texto aparecerá así:
Sin embargo, HTML con CSS en línea solo puede ser complicado. Dado que no hay otra ubicación para CSS, todo el CSS existe en el mismo archivo que el HTML. Se verá abarrotado. Editar un archivo de este tipo es difícil, especialmente si no es su código.
Además, con CSS en línea, debe escribir código para cada elemento. Esto aumenta la repetición y reduce la reutilización del 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 regla añade 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 anularlo. Su código se verá desordenado y causará problemas cuando se ejecute en algunos dispositivos.
html>
<html>
<cabeza>cabeza>
<cuerpo>
<pag> soy naranja pag>
<pagclase="mi clase"> soy verde pag>
<pagidentificación="mi identificación"> Soy azul. pag>
cuerpo>
html>CSS:
#mi identificación {
color de fondo: azul;
}.mi clase {
color de fondo: verde;
}
pag {
color de fondo: naranja !importante;
}
El resultado es así:
5. No seguir las convenciones de nomenclatura
CSS tiene convenciones de nomenclatura que guían a los desarrolladores sobre cómo escribir código estándar. Esto es esencial si terminas depurando el archivo CSS en una fecha futura.
Uno de estos estándares incluye el uso de guiones para separar palabras agrupadas. Otro es nombrar un selector según lo que hace. Así que cualquiera que lo mire no tendrá que adivinar. También facilita la lectura, el mantenimiento y el intercambio de código. Por ejemplo:
En lugar de esto:
.imagen1 { margen izquierdo: 3%; }Escríbelo así:
.boy-imagen { margen izquierdo: 3%; }Al mirar la hoja de estilo, sabrá exactamente para qué imagen es el código. Guía de estilo HTML/CSS de Google enumera muchas más convenciones que todo desarrollador debería conocer.
Escribir comentarios es la habilidad más infravalorada 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 explicando secciones del código y lo que hacen.
/* los elementos de video necesitan espacio para respirar */
.video {
margen superior: 2ellos;
}
/* diseñar la sección del héroe */
.saludo {
margen superior: 1ellos;
}
7. No diseñar de antemano
Mucha gente lo hace, pero es un grave error comenzar a codificar sin un plan. CSS determina cómo se ve la estructura de su front-end. El diseño dice mucho sobre tus habilidades de programación.
Un diseño para su sitio aclara su visión y los recursos necesarios para llegar allí. Tenga una imagen mental de su proyecto. Luego diséñelo en papel o use un conjunto de herramientas de diseño como Canva para visualizar lo que quieres.
Cuando tenga una imagen completa del proyecto, reúna todos sus recursos 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 lo puede dedicar a funciones más complejas. También garantiza que pueda reutilizar el código y compartirlo con otros. Escriba mejor código siguiendo las convenciones establecidas y conviértase en un mejor desarrollador.
