Si vamos a criticar los marcos de clase de servicios públicos, seamos justos al respecto.

No estoy aquí para levantar un escudo que proteja los marcos de utilidades CSS. Ni siquiera a mí me gusta especialmente el enfoque y nada está por encima de una crítica justa. Pero justo es una palabra clave allí. No puedo decirte cuántas veces he visto estilos de utilidad en comparación con estilos en línea. Sarah Dayan está cansada de esto:

[…] a pesar de los numerosos intentos de desacreditar falacias comunes, los entusiastas de la utilidad siguen teniendo que responder a una asombrosa cantidad de conceptos erróneos. Y, con diferencia, el cliché más usado y usado en exceso es que las clases de utilidad son sólo estilos en línea.

Creo que esta comparación lo dejará claro:

div/divdiv/div

El primer div tiene un colorconjunto directamente en el HTML que es un valor de color azul extremadamente específico. El segundo tiene un colorvalor que se establece fuera del HTML, usando el nombre de clase que puede usar para configurar el tono de azul en CSS. Claro, ese segundo es un nombre de clase bastante limitado porque, como sugiere el nombre, hace un trabajo, pero aún ofrece cierta abstracción en el sentido de que el color azul se puede cambiar sin cambiar el marcado. Es la misma historia con una clase de utilidad de tamaño, digamos size-xl. Esa también es una abstracción que podríamos usar para definir el relleno de un elemento en CSS usando ese nombre de clase como selector. Pero si usáramos style="padding: 10px;"directamente el elemento en HTML, eso es un valor absoluto que requiere cambiar el valor en el marcado.

Sin embargo, para ser justos (que es lo que buscamos), hay bastantes clases en marcos de utilidades que se nombran de tal manera que se parecen mucho y actúan como estilos en línea. Por ejemplo, top-0en Tailwind significa top: 0y no hay configuración ni abstracción al respecto. No es que esa clase se actualice en el CSS con un valor distinto de cero porque está en el nombre. “Utilidad” es una buena manera de describir eso. Es muy parecido a un estilo en línea.

Todo ese asunto de lo configurable con valores predeterminados inteligentes coloca a los marcos basados ​​en utilidades en una categoría diferente. Los estilos en línea no ofrecen restricciones sobre cómo diseñar las cosas (aparte de limitaciones estrictas, como pseudoselectores o consultas de medios), mientras que un conjunto limitado de clases de utilidad ofrecen bastantes restricciones de estilo. Esas limitaciones suelen ser deseables porque conducen a un diseño que parece consistente y agradable en lugar de inconsistente y descuidado.

Para tomar prestada una metáfora que escuché una vez en un contexto ligeramente diferente: los marcos de trabajo de clase utilitaria son como bolos de estilo. Usa las clases y todo saldrá bien. Puede que no consigas un strike, pero tampoco una bola de alcantarilla.

Otra crítica injusta que escucha en conversaciones sobre marcos de servicios públicos es que incluyen mucho más CSS con ellos. Si es así, definitivamente estás metiendo la pata. En mi opinión, el punto principal de este enfoque es enviar menos CSS (solo las clases que usamos). Soy el primero en decirle que un proceso de compilación que haga esto de manera precisa y perfecta es complicado y podría generar una cantidad insalubre de deuda técnica, pero admitiré que si lo hace bien, enviar menos CSS es bueno para el rendimiento. . Tailwind en particular te anima y ayuda a hacer esto.

Dicho todo esto, creo que hay todo tipo de cosas que criticar sobre el enfoque. Por ejemplo, a mí personalmente no me gusta mirar todas esas clases. Simplemente no lo hago. No soy un absolutista acerca de las clases perfectamente abstractas, pero ver de 10 a 20 clases en div tras div interfiere con lo que intento hacer cuando estoy creando plantillas HTML. Parece más difícil refactorizar. Resulta más difícil ver lo que sucede semánticamente. Es más difícil analizar esa lista para otras clases en las que necesito hacer cosas que no sean de estilo. Algunas de las ventajas que obtendría de las utilidades, como definir el alcance de los estilos exactamente donde los necesito, a menudo las obtengo a través de otras herramientas.

También creo que los marcos de utilidades funcionan mejor en la configuración de componentes de JavaScript donde tienes Hot Module Reloading. De lo contrario, los cambios de HTML tienden a activar actualizaciones de toda la página. Por ejemplo, una herramienta como Browsersync es bastante buena. Realice la inyección de CSS cuando su CSS cambia. Pero no se pueden realizar inyecciones de nuevo HTML; Simplemente actualice la página. Entonces, sin Hot Module Reloading, que generalmente no es para su sitio HTML genérico o Static Site Generator, el DX empeora durante la creación.