Tener un código limpio y mantenible es realmente un reto en el área de desarrollo. Podemos decir que cuando hablamos de un código mantenible nos estamos refiriendo a minimizar la cantidad de modificaciones necesarias para hacer un cambio.

 

Tener un Css flexible nos permitirá crear de ese mismo código variaciones. Vamos a ver el siguiente código, donde podemos hacer varios cambios de mantenibilidad. Si bien tenemos un botón pero los valores en las propiedades no nos van a ayudar mucho si en un futuro quisiéramos hacer más grande el botón, pues tendríamos que ajustar también el line-height para que el botón se viera uniforme.

.button {
  padding: 6px 16px;
  border: 1px solid #446d88;
  background: #58a linear-gradient(#77a0bb, #58a);
  border-radius: 4px;
  box-shadow: 0 1px 5px gray;
  color: white;
  text-shadow: 0 -1px 1px #335166;
  font-size: 20px;
  line-height: 30px;
}
 

Lo que podemos hacer es utilizar porcentajes o ems para tener una mejor control de nuestro botón.

.button {
  padding: .3em .8em;
  border: 1px solid #446d88;
  background: #58a linear-gradient(#77a0bb, #58a);
  border-radius: .2em;
  box-shadow: 0 .05em .25em gray;
  color: white;
  text-shadow: 0 -.05em .05em #335166;
  font-size: 125%;
  line-height: 1.5;
}
 

Un placer,

@telecristy.

¿Te gustó esta publicación? Márcala como favorita