Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Web Design
  2. CSS
Webdesign

Comprendiendo las Estadísticas de CSS: Cómo Sacarle Provecho a los Números

by
Difficulty:IntermediateLength:LongLanguages:

Spanish (Español) translation by James Kolce (you can also view the original English article)

En caso de que no te hayas dado cuenta, el sitio de análisis CSS cssstats.com recibió recientemente una revisión. Es una herramienta muy bien diseñada que te da un montón de información objetiva sobre tu código, pero ¿cómo puedes hacer un mejor uso de las estadísticas de CSS? ¿Qué debes buscar? ¿Qué significan y como puedes usarlas en el día a día?

Hoy vamos a hablar sobre las mejores prácticas CSS, especificidad y capacidad de mantenimiento, además aprenderás cómo interpretar adecuadamente y hacer un mejor uso de las estadísticas de CSS. ¡Vamos a sumergirnos!

Guía de Inicio Rápido a las Estadísticas de CSS

Ve a cssstats.com, escribe bien la url de tu sitio web, su hoja de estilos, o pega el CSS directamente en el área de texto en la parte inferior y pulsa Go.

Una vez analizado, se te darán un montón de estadísticas sobre el CSS; del número de reglas que has utilizado, su tamaño promedio, desgloses de cada tipo de declaración, colores de fuente y fondo, familias de fuentes, tamaños y gráficos de especificidad.

Eso es lo que las estadísticas de CSS te dan, ahora vamos a ver qué podemos hacer con todos los datos.

Centrarse en la Mantenibilidad

Como desarrolladores de front-end, estamos constantemente preocupados por el rendimiento y experiencia de usuario. También somos responsables de construir software, pero la palabra "software" es ajena a muchos desarrolladores front-end que provienen del mundo del diseño. A menudo es fácil ignorar las mejores prácticas cuando estamos escribiendo nuestro CSS.

Sin embargo, la verdad es que el desarrollo front-end, al igual que cualquier otro desarrollo de software, requiere centrarse en las mejores prácticas. Las normas de buenas prácticas se analizan abundantemente en la web, pero por el bien de este artículo, vamos a enfocarnos en lo que es posiblemente la práctica más importante en lo que se refiere a CSS: mantenibilidad.

El mantenimiento de CSS se centra en diferentes facetas.

  • ¿Qué tan fácilmente puedes diseñar un módulo determinado?
  • ¿Cómo puedes diseñar fácilmente una versión modificada de ese módulo?
  • ¿Puede un nuevo desarrollador entender integralmente los sistemas que emplea tu CSS?
  • ¿Es tu CSS predecible, consistente y organizado?
  • ¿Estás confiando en un preprocesador (u otra herramienta) para hacer el desarrollo y segmentación más flexible?
  • ¿Te repites a ti mismo a menudo?
  • ¿Estás usando convenciones de nombres y estilos previamente establecidas?

No vamos a sumergirnos en cada uno de estos elementos individualmente, pero cuando hablamos de mantenimiento, cada una de estas consideraciones afectan el mantenimiento general de tu código base.

Así que, ¿qué dicen estas estadísticas sobre el mantenimiento?

¿La respuesta honesta? Nada, necesariamente. No aprendes nada de mantenimiento simplemente observando las estadísticas de CSS. También debes entender el contexto de CSS particular, así como el contexto del desarrollo activo.

La primera forma de analizar tus estadísticas CSS es buscar signos de abultamiento de CSS.

Abultamiento

Por abultado queremos decir CSS no utilizado, redundante o de lo contrario innecesarios.

¿Qué escala de sitio está cargando el CSS?

Tomemos, por ejemplo, una aplicación de una página que cuenta con cinco diferentes módulos de contenido. ¿Qué tipo de estadísticas de CSS esperarías que una sola página tenga? Una aplicación típica de una página puede tener una fracción de la cantidad de reglas CSS y tal vez la mitad el número de declaraciones de color como un sitio de publicación de noticias grandes o una aplicación SAAS multi-facetica.

Si estás viendo un enorme número de selectores (por ejemplo, si tu sitio de una página simple incluye tanto CSS como un framework de web como Bootstrap, que llega a al menos 2400 selectores), es probable que hayas ido mal en alguna parte. Si cargas 30 tamaños de fuente y tu diseño pide 10, es probable que tengas estilos no utilizados, abultados, o posiblemente inconsistentes.

Una posible excepción a esta regla, en lo que se refiere a la capacidad de mantenimiento, es si realmente estás usando Bootstrap u otro popular y bien documentado framework; porque la documentación de esos proyectos es relativamente profunda y el uso ha saturado la web, los desarrolladores front-end no necesariamente mantienen Bootstrap, mientras las fuente principal mantiene la implementación principal de Bootstrap. Sin embargo, si estás incluyendo el framework Bootstrap simplemente por la rejilla o algunos elementos de interfaz de usuario, en lugar de ello debes crear una versión personalizada que no incluya las CSS adicionales que nunca vas a utilizar.

¿Qué tipo de páginas carga el sitio?

Es posible que la aplicación haga algo que requiera un gran número de selectores, colores o tamaños de fuente. Por ejemplo, si tienes una tienda en línea que utiliza los colores del producto, es posible que un gran número de colores podrían aparecer en tu CSS y es un caso totalmente legítimo. Otro ejemplo es si tienes un sitio web que permite a los usuarios seleccionar una lista de tamaños de letra y fuentes para el contenido que creen. En estos ejemplos, es lógico ver grandes números en esas categorías particulares.

medium font size
Medium.com utiliza un tamaño de fuente de 301px en algún lugar...

Sin embargo, si estás creando algo así como, por ejemplo, un blog con un esquema de color limitado, tus estadísticas de CSS deben reflejar ese conteo de declaraciones de selección y color de fuente.

Redundancia entre Reglas

¿Defines el mismo tamaño de fuente 20 veces a través de tu CSS? Muy a menudo esto se puede evitar y es generalmente el resultado de una falta de planificación. Si determinas el tamaño de la fuente antes de escribir cualquier otro CSS, será más fácilmente aplicar esos tamaños en todo el resto del sistema.

Lo mismo vale para cualquier estilo repetitivo; ¿Si tienes que escribir lo mismo varias veces, tal vez ese conjunto de estilos merecen su propia clase de presentación o semántica u otra definición modular?

No te vayas por la borda aquí; la redefinición de algunos tamaños de letra o colores de fondo no es gran cosa. Sin embargo, redefinir una serie de estilos múltiples veces en módulos muy similares puede significar que debes extender una clase base. Por ejemplo, si tienes una clase de botón:

Digamos que quieres una versión azul de ese mismo botón. ¿Cómo debes ir sobre la definición? Si se redefine la misma clase btn, se vería algo como esto:

Por supuesto, hay muchos problemas con esto. En primer lugar, viola el principio DRY (No te Repitas a ti Mismo-Don't Repeat Yourself). Pero, ¿por qué importa? Capacidad de mantenimiento. Por ejemplo, digamos que el diseño cambia y exige una fuente más pequeña en los botones. Luego tienes que ir a la clase .btn y .btn-blue para cambiar el tamaño de fuente. Más complicación ocurre cuando necesitas variantes de los botones azules y gris regulares, como una versión de esquema de azul. Todos los cambios a cualquier botón tienen que hacerse a muchos botones.

Esto es increíblemente ineficiente. En lugar de eso, debes tomar ventaja del hecho de que las clases son modulares y permiten definir estilos de botón que extienden la clase base .btn.

¡Ajá! Y ahora tenemos una solución mucho más fácil de mantener, que también elimina un número importante de líneas de CSS y sigue el principio DRY.

Especificidad

La especificidad es uno de los rincones oscuros de CSS que es difícil de entender incluso para los desarrolladores más experimentados. En las estadísticas de la CSS, se puede ver un gráfico de especificidad que muestra lo específico son los selectores en tu CSS, así como donde aparecen.

BBC specificity
Especificidad CSS de la Página Web de la BBC

Este gráfico muestra la especificidad de los selectores como se encontraron en el CSS de bbc.co.uk. Imagina que la izquierda del gráfico es la parte superior de la hoja de estilos, a continuación, se mueve en el eje x como avanza hacia abajo la hoja de estilos. Entre más específica la regla, mayor será la línea azul oscuro en el eje y.

Reglas de Especificidad

Te brindamos tres generales "reglas de pulgar" para comenzar y luego las explicaré.

  1. Ir de menor a más específico
  2. Buscar menor especificidad promedio posible
  3. Reducir los picos en el gráfico

Vamos a hablar sobre cada uno de estos más en profundidad, pero primero vamos a hablar un poco sobre cómo funciona la especificidad.

A los selectores CSS se les asignan una puntuación de especificidad para informar al motor de renderizado del navegador que reglas se aplican a qué elementos. La razón de que esto es necesario es también la razón de que CSS sea tan poderoso: en CSS los estilos pueden ser heredados y puestos en cascada. Esto significa que puedes aplicar más de un conjunto de estilos a cualquier elemento. El motor de renderizado debe consolidar todas estas reglas y presentar algo, pero ¿qué sucede cuando se establecen dos valores diferentes para la misma declaración de estilo? Por ejemplo:

Cuando el motor CSS encuentra una etiqueta <a> con una clase button, debe determinar si el atributo color debe ser #fff, #000, o el valor predeterminado del navegador. La especificidad CSS es el conjunto de reglas que el navegador utiliza para hacer esta determinación.

Puntos

Así que, ¿cómo funciona la especificidad? Usar este sistema de puntuación como guía, tomado directamente de CSS Tricks:

  • Pseudo-elementos y selectores de elemento reciben 1 punto.
  • Selectores de clase y pseudo-clases reciben 1,0 puntos.
  • Selectores de ID reciben 1,0,0 puntos.
  • Estilos en línea reciben 1,0,0,0 puntos.
  • ! importante supera a todos
  • Selectores * consiguen una puntuación de especificidad de todos 0.

Ten en cuenta que en este sistema de puntuación, cuando algo pasa de 10, no entra en la siguiente columna, por ejemplo si tuvieras un selector con 11 elementos largos, no se pasaría a tener una especificidad de 0,0,1,1. En su lugar sería 0,0,0,11.

Aquí hay algunos selectores y sus puntajes resultantes.

Muy bien, ahora que ya tenemos una cartilla básica de la especificidad CSS, ¿cómo debe influir en nuestro código? Volvamos a nuestras tres reglas de pulgar para la especificidad CSS.

#1 Ve de menor especificidad a más especificidad

Esta regla dice esencialmente que los selectores generales deben ir al principio de tu CSS y selectores más específicos deben venir más adelante en tu CSS. Son muchas las razones para esta regla.

En primer lugar, poner reglas generales al principio de tu aplicación generalmente prepara el escenario para el código de módulos básicos que se creará. Junto con #2, con los estilos menos específicos al principio aseguran que escribes con la especificidad de lo menos posible en primer lugar. Más tarde, mientras tu código evoluciona, añadiendo estilos más específicos puede ser necesario reemplazar o ampliar estilos anteriores.

apple css specificity
Los estilos en el sitio web de Apple son muy específicos al inicio de la hoja de estilos
pure css specificity
La especificidad de del framework PureCSS generalmente aumenta hacia el final de la hoja de estilo

Esto lleva a nuestro segundo punto: ¿Qué pasa cuando el motor de representación CSS encuentra dos selectores que tienen la misma puntuación? Todavía tiene que elegir, por lo que se opta por el último de las dos reglas. Poniendo los menos específicos al inicio del archivo, te aseguras de que las anulaciones de especificidad sean mas especificas mientras avances por el archivo. Esto significa que una sola clase en el archivo debe considerarse capaz de reemplazar clases únicas en el archivo.

Esta práctica asegurará que el desarrollo próximo en el mismo proyecto pueda comprender rápidamente el sistema en cascada.

#2 Buscar la especificidad promedio mas baja posible

Si has sido un desarrollador front-end por mucho tiempo, probablemente has experimentado la "guerra de especificidad CSS". Escribes un selector y unas reglas, luego actualizas el navegador sólo para encontrar que los cambios no han sido aplicados. Sabes de proyectos anteriores o de conversaciones acerca de la especificidad que es porque tu selector no es suficientemente específico, por lo que en lugar de tratar de rastrear el problema del selector que es demasiado específico, decides hacer uno nuevo pero más específico. Agregas un ID o dos, y si no hace el truco, solo pones important! en él. Y, voilá,tus estilos se muestran.

Este enfoque funciona, técnicamente hablando; pero por desgracia, en cualquier momento que quieras extender ese estilo, tendrás que seguir aumentando la complejidad y sin darte cuenta tus selectores serán extremadamente específicos, y tenderás a repetir el código en lugar de simplemente reutilizar clases. Además, es casi imposible determinar exactamente qué nivel de especificidad cualquier nuevo estilo debe tener sin añadir más IDs y declaraciones important!.

Mantener tus selectores menos específicos es una manera mucho más sana y más fácil de mantener para manejar tu CSS.

Algunos consejos profesionales:

  • Por defecto, es preferible clases en lugar de IDs. Esta práctica soluciona la mayoría de problemas de especificidad en un solo paso.
  • No anidan sus selectores más allá de tres o cuatro niveles de profundidad y asegúrese de que usted necesita anidar. El anidamiento debería solamente ocurrir al extender clases previamente definidas y no debe ser utilizado exclusivamente para la organización del código. El anidamiento puede utilizarse para hacer tus definiciones de clases a prueba del futuro, pero las clases reusables deberían de ser usadas cuando sea posible.

#3 Reduce los picos en el gráfico

Esta regla se encuentra sobre todo en su lugar para evitar reglas extrañamente posicionadas. Por ejemplo, si estás definiendo algunas clases para la presentación de texto y de repente tienes una regla que anida seis clases y un ID, esta regla particular debe colocarse contextualmente con selectores más específicos a los que se relaciona.

Conclusión

Las estadísticas de CSS pueden proporcionarte un vistazo a la forma en que tu CSS está escrito, pero esto sólo es útil si tienes una idea de lo que debes buscar en las estadísticas antes de analizarlas. Esto significa tener una comprensión profundamente contextual de lo que está escrito en tu CSS y por qué. Si tu CSS es mantenido y apropiado para el sitio, las estadísticas de CSS no son razón suficiente para refactorizar el código.

En lugar de seguir las reglas ciegamente, como un desarrollador front-end responsable, debes centrarte en hacer tu código mantenible y reducir el abultamiento. Las estadísticas sobre el código pueden ayudar a encontrar áreas problemáticas, pero sólo puede ir hasta cierto punto.

Lectura Adicional

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.