Close

agosto 29, 2018

5 tips para escribir mejor CSS

5 tips para escribir mejor css

Como desarrolladores, es importante siempre seguir las buenas prácticas para hacer nuestro código legible. Esto también ayuda a que la página se muestre de manera más rápido y permita mejorar la experiencia de usuario. Por eso en este artículo te hablaremos sobre 5 tips que te ayudarán a escribir un mejor CSS!

 

 

5- No utilices !important

Utilizar !important en nuestro CSS es un arma de doble filo. El mayor beneficio es que lo que hayas puesto se usará sin importar nada. Pero eso trae muchos contras, entre esos, si quieres cambiar algo, tendrás que hacerlo usando !important y puede que termines llenando toda tu web de esto. Lo cual no es recomendable, sobre todo si puede que alguien más continúe o modifique tu proyecto y esto les dará un buen dolor de cabeza. Esto también lo hará incompatible con los media queries, así que usa !important lo menos que puedas.

 

4- No coloques estilos inline

Colocar estilos inline puede ser un gran error al escribir CSS. El principal problema es que si estás usando dicho elemento en varias páginas, tendrás que colocar este estilo inline en todas ellas. En cambio, si utilizas tu stylesheet globalmente, puedes ahorrarte esto. También, esto hace que la página se dibuje dos veces, y esto dará la sensación de que la página web es lenta. Y por último, cualquier otro desarrollador que vea, modifique o continúe tu proyecto, puede pasar un mal rato revisando el CSS para ver como modificar ese elemento y darse cuenta que estás usando estilos inline.

 

3- Utiliza clases reusables

Usar clases reusables puede disminuir bastante el tiempo de desarrollo y la cantidad de líneas de CSS. Pero ¿Qué son las clases reusables? Muy sencillo, se trata de crear clases que cambien cosas que pueden ser generales pero puede que las debas usar constantemente. Esto quiere decir que las podrías aprovechar una clase para definir los colores de fondo, color de la letra y el color del borde, y luego llamarla en cada elemento que necesites con esto. Haciendo esto, podrías cambiar todos los colores con solo cambiar una clase. Y no tener que estar cambiando muchas clases por separado. Con esto, puedes separar tu CSS y evitar estilizar cada elemento por separado, así te ahorras líneas de CSS, peso y tiempo de carga.

Artículo relacionado:  5 Plugins de Chrome que te ayudarán a crear tu web

 

2- Usa porcentajes en vez de píxeles siempre que puedas

Utilizar porcentajes en elementos como tamaño, márgenes, padding y demás puede ayudarte un montón. Esto te servirá para que no tengas que escribir menos media queries, porque cuando utilices porcentajes, estos tomarán el tamaño completo de la pantalla y lo ajustarán depende al porcentaje que hayas colocado. Por ejemplo, si en una web quieres agregar unos márgenes a los lados de la página. Si utilizas “ margin: auto 100px auto 100px; ” puede funcionar bien para resoluciones altas, pero en resoluciones de teléfono, estarías ocupando 200px de todo el tamaño de la página y deberás crear un media querie que modifique esto, sin embargo, puedes usar ” margin: auto 15% auto 15%; ” y así ocupar 15% de la pantalla en cualquier resolución.

 

1- Utiliza los media queries sabiamente

Un gran poder conlleva a una gran responsabilidad. Y este es el caso con los media queries. Los media queries son geniales a la hora de cambiar y adaptar tu sitio a las diferentes resoluciones. Pero siempre debes tener mucho cuidado como los usas y cuántos usas. He visto que muchas personas se dedican a crear media queries para casi cada resolución, y esto aumenta muchísimo la cantidad de líneas CSS que se usan, aumentando así el tamaño del CSS y disminuyendo el tiempo de carga de la página. Y las resoluciones que no sepas integrar, quedarán por fuera y esos usuarios tendrán una mala experiencia. por eso, debes combinar el tip anterior (Usar  porcentajes en vez de píxeles) y también saber si usar max-width o min-width. Pero yo te recomendaría usar un max-width de aproximadamente 700px, dado que esta suele ser la resolución regular de las tablets. Y así puedes ahorrarte muchísimo código y tiempo.

Artículo relacionado:  5 ideas para botones

 

Conclusión

A la hora de desarrollar y crear páginas web, es importante que sigamos estos tips, que nos pueden ahorrar tiempo, líneas de CSS y además, nuestros productos cargarán más rápido. Esto va a mejorar la experiencia de nuestros usuarios, y nos ayudará a guiarnos sobre las buenas prácticas.

 

3 Comments on “5 tips para escribir mejor CSS

Jonas
agosto 29, 2018 at 3:29 pm

Hola Codedgar!

Mira actualmente estoy finalizando el desarrollo de una plataforma web móvil pero tengo unas dudas en mi siguiente código de media query, ya que quiero reducir todo estos pasos para ocupar lo mínimo, ¿Que consejos? o ¿Como le podría hacer para mejorar todo esto? 🙁

Saludos!

/*media queries*/

@media ( max-width: 450px ) {
body { background: black; } // aquí estoy agregando la mayor concentración del ajuste portrait
}

@media ( min-width:451px ) and ( max-width: 450px ) {
body { background: black; }
}

@media ( min-width: 541px ) and ( max-width: 768px ) {
body { background: red; } // aquí estoy agregando la mayor concentración del ajuste landscape
}

@media ( min-width: 768px ) and ( max-width: 1024px ) {
body { background: pink; }
}

@media (min-width: 1024px ) and ( max-width: 1200px ) {
body { background: purple; }
}

@media ( min-width: 1200px ) {

body { background:red; }

}

/*JavaScript*/

if ( screen.width > 1200 ) { window.location = “https://www.misitio.com/”; }

Responder
Edgar
agosto 29, 2018 at 9:19 pm

Hola Jonas!

Antes de continuar, quería preguntarte, ¿La etiqueta body es la única que estás cambiando mediante media queries? Y quería saber por qué rediriges a los usuarios con una resolución mayor a 1200px :0
Un saludo y avísame para ayudarte!

Responder
Jonas
septiembre 6, 2018 at 6:57 pm

Si, mira es un sitio nuevo, una va para le versión de escritorio y la otra para moviles a resoluciones inferior a 1200, en el body solo estoy pintando el breakpoint donde me va diciendo en que dimensión estoy de la pantalla! 🙂

Responder

Deja un comentario

A %d blogueros les gusta esto: