Hojas de estilo en cascada (CSS) es un lenguaje de hojas de estilo utilizado para aplicar estilos en etiquetas HTML. La mayoría de la gente piensa que CSS es fácil de aprender, pero el hecho es que CSS es realmente sencillo de aprender pero difícil de dominar. Se requiere mucha práctica para dominar CSS. Hay algunos errores comunes que todos los desarrolladores web cometen al usar CSS. No es gran cosa cometer errores, pero los pequeños errores pueden convertirse en un dolor de cabeza para ti cuando estás trabajando en un proyecto a gran escala. Por lo tanto, debe conocer sus errores y debe aprender de ellos. En este artículo, conoceremos los 5 errores de CSS más comunes que cometen los desarrolladores web.
1. No usar nombres consistentes: es una buena práctica usar una sola convención de nombres en su proyecto porque si está trabajando en un equipo, es importante mantener la coherencia; de lo contrario, todo se estropeará. También deberíamos usar nombres significativos para la clase y la identificación para que nos resulte fácil depurar nuestro código y también lo haga más legible.
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<style>
.spiderMan {
color: red;
}
.black-widow {
font-size: 3rem;
}
</style>
</head>
<body>
<h2 class="spiderMan">
Welcome To GFG
</h2>
<p class="black-widow">
Top 5 CSS mistakes that
web developer makes
</p>
</body>
</html>
En el ejemplo anterior, los nombres de clase que se utilizan son «spiderMan» y «black-widow». Esta práctica hace que nuestro código sea difícil de leer y también parece poco profesional, si estamos usando nombres de clase e identificación inapropiados. Aquí, se utilizan dos convenciones de nomenclatura (es decir, caso de camello y caso de kebab). Hace que nuestro código parezca inconsistente y feo. Por lo tanto, es una buena práctica usar una convención de nomenclatura única para su proyecto y usar la clase y el nombre de identificación apropiados.
Podemos usar una sola convención de nomenclatura (en este caso estamos usando camelCase) y nombres apropiados de la siguiente manera:
HTML
<!DOCTYPE html>
<html>
<head>
<style>
.exampleHeading {
color: red;
}
.exampleContent {
font-size: 3rem;
}
</style>
</head>
<body>
<h2 class="exampleHeading">
Welcome To GFG
</h2>
<p class="exampleContent">
Top 5 CSS mistakes that
web developer makes
</p>
</body>
</html>
El código anterior se ve mucho mejor y consistente que el anterior. Esta práctica también le ahorra tiempo porque ahora no tiene que pensar en nombres de variables sofisticados como «spiderman» y «blackwidow».
2. Uso de CSS en línea: CSS en línea es un método para vincular CSS a HTML. Podemos usar este método para vincular CSS, no tiene nada de malo, pero debemos saber cuándo debemos vincular CSS usando en línea y cuándo no. Como programadores, siempre debemos seguir el principio DRY (Don’t Repeat Yourself). El CSS en línea evita la posibilidad de reutilizar nuestro código porque en él las propiedades CSS son específicas de un solo elemento, por lo que es una mejor práctica usar clases CSS porque están destinadas a la reutilización.
Ejemplo:
HTML
<!DOCTYPE html> <html> <head> <title>INLINE EXAMPLE</title> </head> <body> <h2 style="color:blue;font-size:3rem;">RAY</h2> <h2 style="color:blue;font-size:3rem;">SHYAM</h2> <h2 style="color:blue;font-size:3rem;">RIDHIMA</h2> <h2 style="color:blue;font-size:3rem;">MAYANK</h2> <h2 style="color:blue;font-size:3rem;">ARJUN</h2> </body> </html>
En el ejemplo anterior, tenemos cinco elementos h2 y todos ellos tienen las mismas propiedades de estilo y aquí estamos usando CSS en línea que viola el principio DRY. Entonces, en lugar de CSS en línea, podemos definir una clase que le ahorrará tiempo y lo salvará del desorden que puede crear el CSS en línea.
Podemos reescribir el código anterior de una mejor manera de la siguiente manera:
HTML
<!DOCTYPE html>
<html>
<head>
<title>INLINE EXAMPLE</title>
<style>
.example {
color: blue;
font-size: 3rem;
}
</style>
</head>
<body>
<h2 class="example">RAY</h2>
<h2 class="example">SHYAM</h2>
<h2 class="example">RIDHIMA</h2>
<h2 class="example">MAYANK</h2>
<h2 class="example">ARJUN</h2>
</body>
</html>
Se recomienda usar CSS interno o externo en lugar de CSS en línea porque puede causar un gran desorden en su código y también es difícil actualizar el CSS en línea.
3. Usar unidades absolutas en lugar de unidades relativas: está bien usar unidades absolutas en ciertos casos, pero si solo usa unidades absolutas, es un gran error. En el mundo de hoy, queremos que nuestros sitios web sean receptivos para que podamos usarlos en diferentes dispositivos, por lo que es necesario que los elementos obtengan escala en relación con el tamaño de la ventana. Las unidades absolutas no se escalan cuando cambia el tamaño de la ventana, por lo que son menos favorables para nuestros sitios web adaptables. Por lo tanto, es muy recomendable utilizar unidades relativas en lugar de unidades absolutas. Algunas de las unidades del relativo son vh, %, em, rem, etc.
Ejemplo:
h1 {
font-size: 16px;
line-height: 20px;
margin-bottom: 8px;
}
En el código anterior, se utilizan unidades absolutas que son menos favorables para nuestros sitios web receptivos, por lo que en lugar de unidades absolutas podemos usar unidades relativas de la siguiente manera:
h1 {
font-size: 1rem;
line-height: 1.25;
margin-bottom: 0.5em;
}
4. No incluir comentarios en el código: como desarrolladores, hemos escuchado muchas veces que es una buena práctica incluir comentarios en el código. Los comentarios pueden ahorrarle horas de depuración. Si está trabajando en un equipo o si está trabajando a gran escala, es necesario incluir comentarios en su código para que sea fácil para sus compañeros de equipo entender su CSS rápidamente y también para usted depurar. . Es necesario comentar su código CSS porque incluso una sola página HTML puede tener muchos CSS vinculados, por lo que se recomienda utilizar comentarios. Tenga en cuenta que no debe usar comentarios largos e inapropiados, los comentarios deben ser breves y apropiados.
5. Usar una sola hoja de estilo: está bien usar una sola hoja de estilo si está trabajando en un proyecto pequeño. Pero si está trabajando en un proyecto a gran escala, es muy recomendable dividir las hojas de estilo en diferentes porque será más fácil de mantener y proporcionará una mejor modularidad. Podemos tener diferentes archivos CSS para diferentes correcciones.
Ejemplo:
En el ejemplo anterior, hay dos hojas de estilo. Uno es para el tema oscuro y otro para el tema claro.
Publicación traducida automáticamente
Artículo escrito por ayushharwani2011 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA