CSS para el minimalista: exploración de CSS sin clases

CSS para el minimalista: exploración de CSS sin clases

En 2011, salió la primera versión de Bootstrap (entonces llamada Twitter Bootstrap). Era un producto del equipo de UI de Twitter y era un marco destinado a simplificar la creación de aplicaciones de aspecto profesional en la Web.

Su lanzamiento revolucionó la forma en que los desarrolladores usaban CSS – tomó lo que a menudo era un enfoque rebelde y a medida para la estilización web y brindó a los desarrolladores las herramientas para crear fácilmente sitios web de aspecto profesional con componentes estándar y un esfuerzo mínimo.

A medida que más y más desarrolladores comenzaron a usar Bootstrap, surgieron otros marcos CSS, a medida que se multiplicaban los requisitos de los desarrolladores y las aplicaciones.

Ahora, en la versión 4, Bootstrap es una biblioteca de 160 kb (en forma minimizada) que ofrece a los desarrolladores un conjunto de utilidades de todo menos el fregadero de la cocina. Uno puede generar fácilmente etiquetas que se vean así:

En otras palabras, «hinchazón de clase». Al abordar la multitud de requisitos que necesitan las aplicaciones, Bootstrap y sus hermanos han creado una gran cantidad de componentes HTML anidados, clases de utilidad, temas complejos e interacciones javascript.

Si bien los enfoques más nuevos, como Tailwind.CSS, intentan minimizar la hinchazón de la clase al integrarse más profundamente en la cadena de herramientas del desarrollador, la curva de aprendizaje puede ser empinada.

Recientemente en Solitario, hemos estado explorando todo lo contrario. Queremos deshacernos de la hinchazón de la clase y pasar a «sin clases». Creemos que permitirá que nuestros juegos de solitario funcionen de forma más fluida y mejorará la experiencia del usuario para nuestros jugadores.

Classless significa exactamente lo que dice: crear sitios que minimicen, o idealmente eliminen, la necesidad de clases para crear un sitio web atractivo.

En otras palabras, todo lo que necesita hacer es usar HTML estándar y colocar un estilizador sin clases en la parte superior para obtener un sitio web con un formato limpio, receptivo y fácil de administrar.

Si bien la ausencia de clases puede no ser realista para muchas aplicaciones web, puede ser absolutamente un enfoque para sitios estáticos, sitios de cartera, blogs personales o incluso aplicaciones pequeñas.

¿Cuáles son las mejores bibliotecas sin clases de 2020?

Water.css

El agua es mi biblioteca CSS preferida, sensible y bonita, y comprimida a 2.67kb. Uno de los aspectos más interesantes de Water es que tiene modos claro y oscuro. Puede optar por utilizar uno o se ajustará automáticamente según las preferencias del usuario. ¿Quién iba a imaginar que podrías tener tanto poder en una biblioteca tan pequeña?

Si necesita temas, Water incluye documentación sobre cómo hacerlo. El enfoque predeterminado se basa en variables personalizadas de CSS, que son compatibles con todos los navegadores excepto Internet Explorer. A pesar de esa incompatibilidad, las variables personalizadas hacen que sea increíblemente fácil cambiar el tema water.css predeterminado. Para los sitios que requieren compatibilidad con IE, aún puede personalizar utilizando yarn.

Water tiene 5.3K estrellas al momento de escribir este artículo, por lo que posiblemente sea la biblioteca sin clases más popular que existe. Por nuestra parte, migraremos nuestro descifrador de palabras a esto en los próximos meses.

Cómo utilizar:

Agregue a la etiqueta.

Tufte CSS

Nombrada en honor al destacado profesor y pionero de la visualización de datos Edward Tufte, esta biblioteca CSS intenta implementar sus sugerencias en una biblioteca CSS fácil de implementar. Tufte CSS puede ser la opción preferible para artículos más extensos, académicos o proyectos personales, ya que usa un serif y tiene un énfasis en gráficos de apoyo, cuadros y notas al margen.

Tufte tiene una compresión de 7.71kb y ha sido destacado 4.5K veces.

Cómo utilizar:

Descargue la biblioteca en el enlace de Github anterior y agregue a su etiqueta.

New.css

Con 4.8kb comprimido, new.css está en el medio del paquete de tamaños de bibliotecas CSS sin clases. Similar a Water, new.css crea páginas limpias y receptivas fácilmente. New.css también viene con un par de temas adicionales si desea estilos adicionales.

New.css también utiliza variables personalizadas de CSS para facilitar la creación de temas.

Cómo utilizar:

Agregue a la etiqueta. También recomiendan agregar la fuente Inter, usando .

Sakura

El tema predeterminado de Sakura tiene como objetivo un estilo tranquilo y limpio. En el repositorio de GitHub también hay una serie de temas que se pueden utilizar desde el primer momento. Con 2.8K estrellas, es una de las opciones de CSS sin clase más populares.

Sakura sugiere usar normalize.css, que agregará algunos kb más a su carga útil principal de ~ 2kb comprimidos. Su metodología de tematización es un poco más complicada que la de Water, y se basa en SCSS para actualizar las variables en el CSS principal. Sin embargo, una ventaja de este enfoque es la compatibilidad, ya que las variables CSS nativas no son compatibles con ninguna versión de Internet Explorer.

Cómo utilizar:

Agrega a tu etiqueta.

Marx

Con un lema de «El reinicio de CSS sin clases (perfecto para los comunistas)», Marx estaría en esta lista sin importar qué, pero también resulta ser muy popular, con más de 1.4K estrellas de Github.

Marx también es fácilmente configurable con SCSS y la documentación tiene algunas instrucciones útiles sobre cómo usar esto con Jekyll. Eso es bueno, porque los sitios web estáticos serían un caso de uso común y excelente para los marcos sin clases.

Cómo utilizar:

Agrega a tu etiqueta.

Como puede ver fácilmente arriba, lo bueno de CSS sin clases es que no son demasiado para ellos. Una línea convierte una página web fea en algo agradable. Además, la mayoría de estos marcos registran un reloj mucho menor que 10 kb, lo que los hace al menos 16 veces más pequeños que Bootstrap.

Obviamente, una de las grandes desventajas de las clases sin clases es que no obtienes los tipos de componentes complejos e interacciones listas para javascript como lo harías con Bootstrap, Foundation o algunas de las otras bibliotecas que existen. Sin embargo, hay un lado positivo aquí. Dado que depende principalmente de las etiquetas para formatear, esto lo impulsará a ser más semántico en su página, lo que es mejor para el SEO y la accesibilidad.


Imagen destacada de Scott Webb sobre Unsplash


Espero que classless se convierta más en un movimiento y que la biblioteca predeterminada que la gente agregue a sus aplicaciones ya no sea Bootstrap, sino algo más pequeño, más limpio y más simple.

#CSS #para #minimalista #exploración #CSS #sin #clases

Publicaciones Similares

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *