Cómo hacer que tu código sea fácilmente mantenible con las guías de estilo de vida

Las guías de estilo de antaño generalmente se consideran documentos orientados al diseño que se centran en la marca y el uso del color. Pero con el advenimiento de bases de código increíblemente grandes para sitios web como Facebook o la amplia gama de productos de Google, desde entonces han evolucionado las guías de estilo.

Estos días, las guías de estilo de vida contienen siempre documentación actualizada de la base de código actual y sus casos de uso. Con estos documentos podemos escribir un código mucho más fácil de mantener y reutilizable mientras vemos al instante la optimización de nuestra base de códigos.

¿Qué hay en una guía de estilo de vida?

Las guías de estilo de vida son similares a las contrapartes más antiguas; contienen información sobre el logotipo y la marca, el uso del color, así como una descripción general del uso del código. La sección del esquema del código es donde puede encontrar fácilmente código duplicado o muy similar y combinarlo para optimizar su base de código, o ver los componentes que ya están en uso. La mayoría de las guías muestran un enfoque de estilo "log" donde cada instancia de código está documentada, o solo el código intencionalmente modular está documentado.

Estas guías no solo se enfocan en HTML y CSS, sino también en otros lenguajes que se pueden modularizar para rendimiento como JavaScript y PHP. Algunos ejemplos sólidos de guías de estilo de vida se pueden encontrar en Github , Mozilla y MailChimp . Como se puede ver en esos ejemplos, es común tener una página o un subsitio para mostrar los casos de uso al lado del código para cada componente. Esto hace que sea más fácil ir y tomarlos cuando los necesite, y para diseñadores o desarrolladores desconocidos para ver cómo funcionan los componentes de una manera interactiva.

Comenzando tu propia guía de estilo de vida

Comenzar su propia documentación de guía de estilo de vida desde cero puede parecer desalentador, especialmente para proyectos más grandes. Pero, por lo general, hay un retorno en la inversión del tiempo requerido para hacerlo. Los proyectos más grandes se benefician enormemente de una documentación viva de los estilos del sitio y la estructura del código. Los proyectos más pequeños tienen un rendimiento menos notable, pero a veces valioso, de su inversión de tiempo. En cualquier caso, si está trabajando en un proyecto que algún día se le puede pasar a otro diseñador o desarrollador, será su día para ver dicha documentación.

Comience con la base

Los componentes que utiliza con frecuencia son el mejor caso de uso para una guía de estilo de vida, los botones vienen a la mente de inmediato. Una breve lista de cosas que puede considerar documentar son las opciones de diseño (posiblemente delineando un sistema de cuadrícula), la tipografía, el uso del color, los botones y estilos de enlace, el estilo del formulario, las notificaciones o alertas y el estilo de la lista. Casi cualquier cosa que pueda beneficiarse de ser reutilizable podría agregarse esencialmente. Al delinear, recuerde mantener las cosas flexibles. Nunca aplique estilo a una alerta o botón específico para una página o caso de uso, a menos que sea absolutamente necesario. En su lugar, agregue clases de modificador para construir sobre la base básica de cosas como el color, la tipografía o los cambios estéticos. De esta forma, siempre puede contar con la clase .button para designar un ancho, altura y tamaño de texto consistentes, al mismo tiempo que permite que las clases de modificador cambien las características particulares de cada caso de uso.

Los objetivos del código de mantenimiento

El objetivo del código que se puede mantener es hacer las cosas reutilizables y a prueba del futuro. Componentes como barras de notificación, botones, encabezados y pies de página son excelentes ejemplos de código reutilizable: cosas que puede usar varias veces en el sitio o en la misma página. Si está rompiendo código viejo o ya escrito para hacerlo más fácil de mantener después del hecho, en realidad es bastante simple. Comience por eliminar el CSS hasta lo básico. Deberías quedarte con una clase de componente que define elementos estructurales como altura, ancho y posición. Mientras que las clases modificadoras adicionales se pueden usar para cambiar cosas estéticas como el color o la tipografía. Además, si su proyecto está utilizando una ID de cuerpo o clase para cada página, puede diseñar casos de uso únicos por página de esta manera. Asegúrese de no recurrir demasiado a esta práctica, ya que puede agregar peso fácilmente a su guía de estilo.

los Principio de KISS es un principio de diseño también adecuado para el proceso de desarrollo modular. Escribir un código sencillo y fácil de mantener suele ser más sencillo al mantener sus componentes simples. Cuando se trata de simplicidad, si es posible hacer las cosas más eficientes y / o usar menos código mientras se logra el mismo resultado, nuestros componentes deben estar escritos para hacerlo. El objetivo final de una estructura de código sostenible es tener algo reutilizable, pequeño y mucho más eficiente que una contraparte no mantenible.

Convenciones de nombres en CSS

Cuando se trata de trabajar con una estructura de código mantenible, las convenciones de nomenclatura se vuelven muy importantes. Escribir clases descriptivas de CSS será de gran ayuda para garantizar que el mantenimiento de su código base sea una tarea fácil. Ahi esta sin límite en las longitudes de clases de CSS, así que utilízalo para tu ventaja. Sin embargo, asegúrese de apegarse a una convención de nomenclatura clara, ya que mezclar guiones frente a guiones bajos o camello frente a todos los nombres en minúscula puede confundir fácilmente. Por lo general, es una buena idea hacer que las clases que lo componen sean muy descriptivas, mientras que las clases de modificador son menos descriptivas. A continuación se muestra un ejemplo de un botón, una regla única de caso de uso y clases modificadoras.

  / * Esta es una clase de componente, solo debe contener reglas estructurales básicas * /. Button {display: block; width: 250px; height: 48px; line-height: 48px;} / * Este caso de uso único describe un botón utilizado en la página de inicio * /. homepage-cta-button {display: blockmargin: 0 auto 50px; ancho: 180px; altura: 60px; altura-línea: 60px;} / * A continuación se encuentran las clases modificadoras, que se agregan además del componente clase para agregar color u otros cambios estéticos * /. red {background: # C54F48} .rounded {border-radius: 5px;} 

Soluciones automatizadas

Los generadores automatizados de guías de estilo han comenzado a aparecer a izquierda y derecha para ayudar a impulsar las guías de estilo. Prototipo de estilo es un generador SASS construido por Ram Richard y Mason Wendell de Equipo SASS . Es una de las mejores opciones disponibles en este momento, con generadores similares como Holograma , Kalei , StyleDocco y KSS también demostrando ser útil.

Automatizado versus hecho a mano

Como siempre, existen pros y contras para usar cualquiera de los métodos aquí. Las soluciones automatizadas son rápidas y se pueden usar después del hecho, pero a veces también son estrictas. Las guías de estilo hechas a mano te dejan conocer los pormenores de todo, pero te llevan más tiempo. Personalmente, el enfoque artesanal es el mejor para mí en la mayoría de los casos, ya que es el más flexible en términos de trabajar con otros desarrolladores. Pero ciertamente vale la pena probar algunas de las soluciones automatizadas, solo para tener una idea de cómo funcionan y qué dicen sobre su código.

Revisando tu código

Los sitios web nunca terminan. Modificamos las cosas, la transición a nuevos estilos y tendencias, y al final podemos terminar con un montón de código de revisiones anteriores. Es importante tomarse un momento y mirar hacia atrás al "final" de cada revisión para asegurarse de que todo esté lo más limpio posible. En este punto, también me gusta tirar cada componente (y las clases de modificador) en un Codepen para probar el soporte del navegador y tomar notas en consecuencia. Esto podría ahorrar toneladas de tiempo más tarde si está diseñando una página con restricciones de soporte. Mientras revisa, también asegúrese de estar atento a los componentes que pueden entrar en conflicto entre sí de maneras extrañas o causar problemas en el modelo de caja.

Conclusión

En conclusión, las guías de estilo deberían dar como resultado un código que sea muy manipulador y flexible, y aún así fácil de mantener y leer. Teniendo en cuenta cuánto tiempo debemos invertir para alcanzar dicho resultado, las guías de estilo de vida tienen un efecto mucho más cuantificable en proyectos más grandes que los más pequeños. Los proyectos complejos o grandes se benefician tanto de la optimización y el rendimiento que merece la pena el tiempo invertido para alcanzar dichos resultados. Sin embargo, la creación de una guía de estilo de vida para un pequeño sitio web o proyecto puede no ser digna de invertir en el tiempo.

En conclusión, todos deberíamos esforzarnos por escribir un código limpio y sostenible que se centre en la protección del futuro. Las guías de estilo de vida tienden a alentar tal flujo de trabajo y ayuda a hacer tanto más felices a los desarrolladores y a los espectadores.

Imagen / miniatura destacada, imagen de programación a través de Shutterstock.