Share
En caso de que no se haya dado cuenta, el sitio de análisis de CSS cssstats.com recibió una revisión recientemente. Es una herramienta bellamente diseñada que le brinda una gran cantidad de información objetiva sobre su código, pero ¿cómo puede hacer el mejor uso de las estadísticas CSS? ¿Para qué debes disparar? ¿Qué significan? ¿Cómo pueden usarlos día a día??
Hoy, hablaremos sobre las mejores prácticas, especificidad y mantenibilidad de CSS, además aprenderá cómo interpretar correctamente y hacer un mejor uso de las estadísticas de CSS. Vamos a bucear en!
Dirígete a cssstats.com, ingresa la URL de tu sitio web, su hoja de estilo, o pega el CSS sin formato directamente en el área de texto en la parte inferior y pulsa Ir.
Una vez analizado, se le dará una tonelada de estadísticas sobre el CSS; a partir del número de reglas utilizadas, su tamaño promedio, los desgloses de cada tipo de declaración, los colores de fuente y fondo, las familias y tamaños de fuente y los gráficos de especificidad.
Eso es lo que le da CSS Stats, ahora veamos qué podemos hacer con todos los datos.
Como desarrolladores front-end, estamos constantemente preocupados por el rendimiento y la experiencia del usuario. También somos responsables de crear software, pero la palabra "software" es ajena a muchos desarrolladores front-end que provienen de un fondo de diseño. A menudo es fácil ignorar las mejores prácticas cuando estamos codificando nuestro CSS.
Sin embargo, la verdad es que el desarrollo de front-end, al igual que cualquier otro desarrollo de software, requiere centrarse en las mejores prácticas. Las reglas para las mejores prácticas se discuten abundantemente en la web, pero por el bien de este artículo, vamos a enfocarnos en lo que podría decirse que es la práctica más importante relacionada con el CSS: capacidad de mantenimiento.
La capacidad de mantenimiento de los centros de CSS en muchas facetas diferentes.
No bucearemos en cada uno de estos elementos individualmente, pero cuando hablamos de mantenibilidad, cada una de estas consideraciones afecta la mantenibilidad general de su base de código..
¿La respuesta honesta? Nada, necesariamente. No aprendes nada acerca de la capacidad de mantenimiento simplemente mirando las estadísticas de CSS. También debe comprender el contexto de ese CSS en particular, así como el contexto de desarrollo activo.
La primera forma de analizar las estadísticas de CSS es buscar signos de la acumulación de CSS.
Por inflar Nos referimos a CSS no utilizado, redundante o innecesario..
Tomemos, por ejemplo, una aplicación de una página que tiene cinco módulos de contenido diferentes. ¿Qué tipo de estadísticas CSS esperaría que tuviera una sola página? Una aplicación típica de una sola página puede tener una fracción del número de reglas CSS y tal vez la mitad del número de declaraciones de color como un gran sitio de publicación de noticias o una aplicación SAAS de múltiples facetas..
Si está viendo una gran cantidad de selectores (por ejemplo, si su sitio simple de una sola página incluye tanto CSS como un marco web como Bootstrap, que se registra en poco menos de 2400 selectores), es probable que se haya equivocado en algún lugar . Si está cargando en 30 tamaños de fuente y su diseño requiere 10, es probable que tenga estilos no utilizados, hinchados o posiblemente estilos inconsistentes..
Una posible excepción a esta regla, en relación con la capacidad de mantenimiento, es si está actualmente usando Bootstrap u otro framework popular y bien documentado; Debido a que la documentación de esos proyectos es relativamente profunda y el uso ha saturado la web, los desarrolladores front-end no necesariamente mantener Bootstrap, siempre y cuando la fuente principal retenga las implementaciones básicas de Bootstrap. Sin embargo, si está incluyendo el marco de Bootstrap simplemente para la cuadrícula o unos pocos elementos de la interfaz de usuario, debe crear una versión personalizada que no incluya el CSS adicional que nunca planea usar.
Es posible que su aplicación haga algo que requiera una gran cantidad de selectores, colores o tamaños de fuente. Por ejemplo, si está ejecutando una tienda en línea que utiliza colores de productos, es posible que aparezca una gran cantidad de colores en su CSS y que sea un caso completamente legítimo. Otro ejemplo es si está ejecutando un sitio que permite a los usuarios seleccionar de una lista de tamaños de fuente y fuentes para el contenido que crean. En estos ejemplos, tiene sentido ver grandes números en esas categorías particulares.
Medium.com utiliza un tamaño de fuente de 301px en algún lugar ... Sin embargo, si está creando algo como, por ejemplo, un blog con un esquema de color limitado, sus estadísticas CSS deben reflejar esa selección de colores y el número de declaraciones de fuentes..
¿Definen el mismo tamaño de fuente veinte veces en su CSS? Muy a menudo esto puede evitarse, y suele ser el resultado de una falta de planificación. Si determina sus tamaños de fuente antes de escribir cualquier otro CSS, podrá aplicar esos tamaños más fácilmente en el resto del sistema.
Lo mismo es cierto para cualquier estilo repetido; Si se encuentra escribiendo lo mismo varias veces, tal vez ese conjunto de estilos merezca su propia clase de presentación o semántica u otra definición modular.?
No exageres aquí; la redefinición de algunos tamaños de fuente o colores de fondo no es un gran problema. Sin embargo, la redefinición de varios estilos varias veces en módulos muy similares puede significar que debería extender una clase base. Por ejemplo, si tienes una clase de botón:
.btn font-size: 1.2em; peso de la fuente: 400; espacio entre letras: .06em; color: #fff; color de fondo: # 4a4a4a; relleno: 6px 8px;
Digamos que quieres una versión azul de ese mismo botón. ¿Cómo deberías definir eso? Si redefinimos lo mismo btn clase, se vería algo como esto:
.btn-blue font-size: 1.2em; peso de la fuente: 400; espacio entre letras: .06em; color: #fff; color de fondo: # 0C508D; relleno: 6px 8px;
Por supuesto, hay muchos problemas con esto. Primero, viola el principio DRY (no te repitas). Pero ¿por qué importa eso?? Mantenibilidad. Digamos, por ejemplo, que el diseño cambia y requiere una fuente más pequeña en los botones. Entonces tienes que ir a la .btny la .btn-blue Clase para cambiar el tamaño de fuente. Aún más complicación ocurre cuando necesita variantes de los botones azules y grises regulares, como una versión de contorno azul. Todos los cambios realizados en cualquier botón se deben realizar en muchos botones.
Esto es increíblemente ineficiente. En su lugar, debería aprovechar el hecho de que las clases son modulares y le permite definir estilos de botones que amplíen su base. .btn clase.
.btn font-size: 1.2em; peso de la fuente: 400; espacio entre letras: .06em; color: #fff; color de fondo: # 4a4a4a; relleno: 6px 8px; .btn.btn-blue background-color: # 0C508D;
Jajaja Y ahora tenemos una solución mucho más fácil de mantener, que también elimina un número significativo de líneas de CSS y sigue el principio DRY.
La especificidad es uno de los rincones oscuros más difíciles de entender de CSS que a menudo hace tropezar incluso a los desarrolladores más experimentados. En Estadísticas de CSS, puede ver un gráfico de especificidad que muestra qué tan específicos son los selectores en su CSS, así como dónde aparecen esos selectores..
Especificidad CSS del sitio web de la BBC.Este gráfico muestra la especificidad de los selectores según se encuentran en el CSS de bbc.co.uk. Imagina que la parte izquierda de la gráfica es la parte superior de la hoja de estilo, luego se mueve a lo largo del eje x ya que lee la hoja de estilos. Cuanto más específica sea la regla, mayor será la línea azul oscura en el eje y.
Proporcionaremos tres "reglas generales" generales para comenzar, y luego explicaremos las reglas..
Hablaremos sobre cada uno de estos más en profundidad, pero primero hablemos un poco sobre cómo funciona la especificidad..
A los selectores de CSS se les asigna una puntuación de especificidad para informar al motor de representación del navegador qué reglas se aplican a qué elementos. La razón por la que esto es necesario es también la razón por la que CSS es tan poderoso: los estilos se pueden heredar y colocar en cascada en CSS. Esto significa que puede aplicar más de un conjunto de estilos a cualquier elemento dado. El motor de renderización 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:
a color: #fff; a.button color: # 000;
Cuando el motor CSS encuentra un etiqueta con una clase de botón, debe determinar si el color atributo debe ser #fff, # 000, o el navegador por defecto. La especificidad de CSS es el conjunto de reglas que usa el navegador para hacer esta determinación..
Entonces, ¿cómo funciona la especificidad? Utilice este sistema de puntuación como una guía, tomada directamente de CSS Tricks:
Accentsconagua
!importante los supera a todos* Los selectores obtienen una puntuación de especificidad de todos los 0s..Tenga en cuenta que en este sistema de puntuación, cuando algo supera los 10, no pasa a la siguiente columna, por lo que, por ejemplo, si tenía un selector que tenía 11 elementos de longitud, no se convertiría en una especificidad de 0, 0,1,1. En su lugar sería 0,0,0,11..
Aquí hay algunos selectores y sus puntuaciones resultantes..
nav li a / * 0,0,0,3 * / .nav-item / * 0,0,1,0 * / nav .nav-item / * 0,0,1,1 * / #logo / * 0,1,0,0 * /
a background-color: blue! important; / * En el ejemplo anterior, usamos estilos en línea para establecer el color de fondo en rojo. Sin embargo, si aplicáramos este estilo con el calificador! Important, reemplazaría el estilo en línea. * /
Bien, ahora que tenemos un manual básico fuera del camino para la especificidad de CSS, ¿cómo debería influir en nuestro código? Volvamos a nuestras tres reglas de oro para la especificidad de CSS.
Esta regla esencialmente establece que los selectores generales deben estar al principio de su CSS, y los selectores más específicos deben aparecer más adelante en su CSS. Las razones de esta regla son muchas.
Primero, al colocar reglas generales al principio de su aplicación, por lo general se establece la etapa en su código para la creación de módulos básicos. En conjunto con el # 2, tener los estilos menos específicos al principio asegura que usted esté escribiendo primero con la menor especificidad posible. Más adelante, a medida que su código evolucione, puede ser necesario agregar estilos más específicos para anular o extender los estilos anteriores..
Los estilos en el sitio web de Apple son muy específicos desde el principio en la hoja de estilo
La especificidad del framework Pure CSS generalmente aumenta hacia el final de la hoja de estiloEsto nos lleva a nuestro segundo punto: ¿qué sucede cuando el motor de representación de CSS encuentra dos selectores que tienen la misma puntuación? Todavía tiene que elegir, por lo que optará por la última de las dos reglas. Al equivocarse al menos específico al principio de su archivo, se asegura de que las anulaciones de su especificidad sean más específicas a medida que ingrese posteriormente al archivo. Esto significa que una sola clase más adelante en el archivo debe considerarse capaz de anular clases individuales más temprano en el archivo.
Esta práctica asegurará que el desarrollo posterior en el mismo proyecto pueda comprender rápidamente el sistema en cascada.
Si ha sido un desarrollador de aplicaciones para usuario por mucho tiempo, probablemente haya experimentado la "guerra de especificidad de CSS". Usted escribe un selector y algunas reglas, luego actualiza el navegador solo para encontrar que los cambios no se han aplicado. Usted sabe de proyectos anteriores o de conversaciones sobre especificidad que es porque su selector no es lo suficientemente específico, por lo que en lugar de intentar rastrear el problema hasta el selector que es demasiado específico, decide hacer uno nuevo. Más específico. Usted agrega una identificación o dos, y si eso no funciona, simplemente lanza !importante en eso Y, voila - tus estilos aparecen.
Este enfoque funciona, técnicamente hablando; pero, desafortunadamente, cada vez que desee extender ese estilo, debe continuar aumentando la complejidad, y antes de darse cuenta, sus selectores son extremadamente específico, y tendrá que repetir el código en lugar de simplemente reutilizar las clases. Además de eso, es casi imposible determinar exactamente qué nivel de especificidad deberían tener los nuevos estilos sin agregar más y más ID y !importante declaraciones.
Mantener sus selectores menos específicos es una manera mucho más sensata y más fácil de manejar de su CSS.
Esta regla se aplica principalmente para evitar reglas colocadas de forma extraña. Por ejemplo, si está definiendo algunas clases para la presentación de texto, y de repente tiene una regla que anida seis clases y una ID, esa regla en particular se debe colocar contextualmente con selectores más específicos con los que se relaciona.
Las estadísticas de CSS pueden proporcionarle información sobre la forma en que se escribe su CSS, pero esto solo es útil si tiene una idea de cómo deberían ser esas estadísticas antes de intentar analizarlas. Esto significa tener una profunda comprensión contextual de la forma en que se escribe tu CSS y por qué. Si su CSS es mantenible y apropiado para el sitio en el que se usa, las estadísticas de ese CSS no son razón suficiente para refactorizar su código.
En lugar de seguir las reglas numéricas a ciegas, como desarrollador front-end responsable, debe concentrarse en hacer que su código sea mantenible y reducir la hinchazón. Las estadísticas sobre su código pueden ayudarlo a encontrar áreas problemáticas, pero solo pueden ir tan lejos.
