Mobile First y Utility First

Clase 4 de 29 • Curso Básico de Tailwind 2 y 3

Resumen

¿Cuáles son los principios claves de Tailwind CSS?

Tailwind CSS es un framework que revoluciona la manera de desarrollar sitios web al basarse en dos principios fundamentales: Mobile First y Utility First. Estos principios permiten una experiencia de usuario mejorada y un desarrollo más eficiente. Si estás buscando formas innovadoras de optimizar el diseño y la funcionalidad de tus proyectos, ¡sigue leyendo!

¿Qué es Mobile First en el desarrollo web?

Mobile First es una estrategia que se centra en desarrollar sitios web optimizados desde dispositivos móviles, y luego escalar esos diseños a pantallas más grandes. Este enfoque es crucial en un entorno donde el uso de dispositivos móviles predomina.

Optimización desde dispositivos móviles: Usar Mobile First en proyectos garantiza que los aspectos esenciales del diseño se adapten primero a dispositivos móviles.
Cómo implementarlo:
- Accede al modo de desarrollo del navegador seleccionando "Inspeccionar".
- Cambia la vista del navegador a versiones móviles ajustando a las dimensiones, por ejemplo, del iPhone X.
- Trabaja desde esta perspectiva para asegurar que tu diseño es responsivo.

¿Qué es el principio Utility First en Tailwind CSS?

El concepto de Utility First en Tailwind CSS redefine la creación de estilos mediante clases de utilidad que permiten desarrollar de forma precisa y eficiente directamente en HTML.

Estructura limpia y rápida: Las utilidades hacen que los estilos sean más organizados y el desarrollo sea menos tedioso. En lugar de escribir largos bloques de CSS, todo se integra dentro del archivo HTML, evitando la necesidad de hojas de estilo complejas.
Ejemplo de utilidad:
- Las propiedades como P refieren a padding, y las clases de Tailwind como max-w determinan el ancho máximo.
- Así, en vez de definir cada propiedad al detalle, puedes usar utilidades como bg-white para fondos y rounded para bordes redondeados.

¿Cómo contrastan los estilos CSS tradicionales con Tailwind?

A diferencia de crear una hoja de estilos CSS tradicional, donde las clases deben definirse individualmente, con Tailwind CSS este proceso se simplifica en el HTML. Tailwind permite:

Integración directa y simplificada: Todas las propiedades necesarias están predefinidas, evitando redundancias y generando un código más limpio y ágil.
Ejemplos concretos:
- La clase shadow en Tailwind añade sombras automáticamente, simplificando la sintaxis.
- También facilita la implementación de Flexbox de manera integrada.

Este enfoque no solo mejora la eficiencia del desarrollo, sino que también facilita una experiencia de usuario fluida y atractiva, proponiendo un desarrollo ágil y de gran versatilidad.

¡Anímate a compartir tus experiencias con Utility First y cuéntanos cómo ha mejorado tus proyectos en los comentarios! Ah, y no dudes en seguir aprendiendo más sobre Tailwind, ¡próximamente veremos más sobre su instalación y directivas!

Juan Jiménez

student•

Hay dos principios para trabajar con Tailwind:

Mobile First → Pensado principalmente para mejorar la experiencia de usuario. Permite identificar las partes más importantes de nuestro proyecto. En otras palabras, prioriza el desarrollo pensando en los dispositivos móviles.
Utility First → Basado en utilidades el cual permite tener una estructura más limpia de nuestros estilos, el desarrollo es más rápido ya que todo se trabaja dentro del mismo archivo. En otras palabras, es la forma en que se nombran y se crean las clases de estilos, es decir, son clases descriptivas de la utilidad que nos dan. Se trata de construir componentes a partir de clases con nombres descriptivos.

Fernando Quinteros Gutierrez

student•

📲 Mobile First y Utility First

Apuntes

Mobile First

Está pensado principalmente para mejorar la experiencia de usuario
Este principio nos permite identificar las partes más importantes de nuestro proyecto
Se enfoca en dar prioridad principalmente a los estilos en forma de móvil, este principio es popular, ya que estadísticas mencionan que el 80% del tráfico de la web proviene de los dispositivos móviles.

Utility First

Los frameworks basados en utilidades nos permiten tener una estructura más limpia de nuestros estilos.
Además, el desarrollo es más rápido porque todo se trabaja dentro del mismo archivo.

Ejemplo

🌚 Desarrollo de estilos tradicional

<div class="chat-notification">
  <div class="chat-notification-logo-wrapper">
    <img class="chat-notification-logo" src="/img/logo.svg" alt="ChitChat Logo">
  </div>
  <div class="chat-notification-content">
    <h4 class="chat-notification-title">ChitChat</h5>
    <p class="chat-notification-message">You have a new message!</p>
  </div>
</div>

<style>
  .chat-notification {
    display: flex;
    max-width: 24rem;
    margin: 0 auto;
    padding: 1.5rem;
    border-radius: 0.5rem;
    background-color: #fff;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  }
  .chat-notification-logo-wrapper {
    flex-shrink: 0;
  }
  .chat-notification-logo {
    height: 3rem;
    width: 3rem;
  }
  .chat-notification-content {
    margin-left: 1.5rem;
    padding-top: 0.25rem;
  }
  .chat-notification-title {
    color: #1a202c;
    font-size: 1.25rem;
    line-height: 1.25;
  }
  .chat-notification-message {
    color: #718096;
    font-size: 1rem;
    line-height: 1.5;
  }
</style>

🌝 Desarrollo de estilos con utilidades

<div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-lg flex items-center space-x-4">
  <div class="shrink-0">
    <img class="h-12 w-12" src="/img/logo.svg" alt="ChitChat Logo">
  </div>
  <div>
    <div class="text-xl font-medium text-black">ChitChat</div>
    <p class="text-slate-500">You have a new message!</p>
  </div>
</div>

Como se puede observar cada clase tiene una funcionalidad simple y es descriptiva

📌 **RESUMEN:** Tailwind se basa en dos corrientes, Mobile First, la cual te dice que debes dar prioridad a los dispositivos móviles y Utility First el cual son clases las cuales tienen un propósito o utilidad en específico.

Enrique Zárate

student•

Top comment! 👏👏

Anfernee Valera

student•

Por cierto. Algo que me parece un desacierto de platzi es las explicaciones tan vagas de los temas como en este caso fue Utility First. Podrían explicar como funcionan las utilidades un poco por detrás, su diferencias con inline-styles. Entiendo que las clases cortas son parte de sus metas. Pero no así, no sacrificando explicación del contenido.

No se agregaron ni siquiera los enlaces para indagar más a fondo xd.

Solo quiero recordar que los cursos que mas engancharon en un principio fueron el de programación básica, y el curso de Git y github de freddy. En los cuales se da el tiempo para explicar todo

Alejandro Ivan Mendieta

student•

tampoco agregan si esa tema se ha visto en otro curso...

Oscar Rabadan Martinez

student•

Tailwind CSS esta pensado para diseñar nuestros sitios web pensando primero en su versión para dispositivos móviles y desde ahí adaptar mediante las media-queries a otros formatos. Hacerlo de esta forma resulta muy sencillo con Tailwind y les recomiendo que se acostumbren a hacerlo de esa forma si no es que lo hacen ya. Van a ahorrarse un montón de código CSS con Tailwind!

José Reinaldo Duque Serna

student•

El paradigma Mobile First hace referencia a diseñar pensando primero en interfaces para smartphones o tables y luego para computadores de escritorio. Me parece excelente este principio ya que en la actualidad la mayoría de las personas usan un smartphone para conectarse a internet!

Alejandro Ivan Mendieta

student•

Mobile First nos hace iniciar el proyecto pensando en dispositivos moviles.
Utility First nos permite tener todo el desarrollo en un mismo archivo.
- En tailwind son las clases que le damos a los elementos HTML

Code Conqueror7

student•

Grax bro

Josué Ramírez Hernández

student•

📝 Mis apuntes:

¿Qué es Mobile First?

Mobile First está pensado principalmente para mejorar la experiencia de usuario en un dispositivo móvil. Este principio nos permite identificar las partes más importantes de nuestro proyecto. .

¿Qué es Utility First?

El concepto Utility First hace referencia a basar la implementación de estilos utilizando clases de utilidad como primera opción, no como única opción. . Los frameworks basados en utilidades nos permiten tener una estructura más limpia de nuestros estilos. Además el desarrollo es más rápido ya que todo se trabaja dentro del mismo archivo.

Luis Enrique Rios

student•

Gente, vengo porque estoy desarrollando websites pero a la hora de subir mis proyectos veo que cambia DEMASIADO el como se ve en el navegador y como se ve en celulares

¿saben si esto se resuelve con este tipo de herramientas?

Ana María Díaz

teacher•

Hola Luis Enrique, puede ser que no estés trabajando de manera resposiva tu website. Recuerda que tailwind css es un framework mobile first!

Mario Alberto Ruiz Leyva

student•

Si el estilo con Tailwind se hace directamente desde el HTML no tiene un impacto negativo en el rendimiento del sitio o app?

Fabricio Bencomo

student•

Los estilos no estan dentro del html, hay distintas maneras de traer tailwind, puedes traer el cdn o importarlo localmente, sin importar lo que escojas todas las utilidades se van a encontrar encontrar aparte del html haciendo referencias con un link en el head como un archivo styles.css de toda la vida, el unico problema que podría ver es que tienes un archivo con muchas utilidades que no vas usar, pero creo que existe una manera de dejar solo las que requieres

Diego Vergara

student•

Tailwind se trabaja desde node (en la mayoria de los casos) por lo cual existe un procesamiento de los archivos de tu proyecto, de hecho la version numero 3 mejoran aun mas esto.

De todas maneras si usaras estilos en linea con html no afectaría al rendimiento, en el curso de optimización web se explica como se usan estilos en lineas para acelear el FCP.

Horacio Javier Tena Medrano

student•

Creo que esto puede provocar inconsistencia de estilos en los componentes que creemos o al menos prestar mucha atención para no estar aplicando estilos distintos y también creo que va a hacer la lectura del HTML muy latosa.

Veamos que nos ofrece Tailwind.

Anfernee Valera

student•

Oye, a ver. Siento que lo de "Más limpio" es algo muy subjetivo, ya que agregar todas las utilidades a los elementos html, dependiendo del componente y su complejidad, puede ser muy engorroso para la lectura de este, en mi opinión al menos. Por eso pienso que es muy subjetivo

Alejandro Ivan Mendieta

student•

creo que se refería a menos código CSS

Carlo Andre Caraza Mendoza

student•

ojo con las definiciones

Mobile first , una forma de mejora progresiva , es un enfoque de desarrollo y diseño web que se centra en priorizar el diseño y el desarrollo para tamaños de pantalla móviles sobre el diseño y desarrollo para tamaños de pantalla de escritorio.

fuentes

Code Conqueror7

student•

Grax

Maria Tohabanda Duchi

student•

Me gusta más el utility first porque es más limpio. :)

Gustavo Victoria Ramirez

student•

Estilos Tradicionales en HTML

CSS Inline:
- Método: Aplicar estilos directamente en los elementos HTML utilizando el atributo style.
- Ejemplo:
```
<div style="color: red; font-size: 20px;">Texto en rojo</div>
```
- Desventajas: Dificultad para mantener y actualizar estilos a gran escala.
CSS en el Head del Documento:
- Método: Incluir estilos dentro de una etiqueta <style> en el <head> del documento.
- Ejemplo:
```
<head>
  <style>
    .mi-clase {
      color: red;
      font-size: 20px;
    }
  </style>
</head>
<body>
  <div class="mi-clase">Texto en rojo</div>
</body>
```
- Desventajas: Aún puede ser difícil de mantener, especialmente con archivos HTML largos.
CSS en Archivos Externos:
- Método: Crear archivos .css separados y enlazarlos en el <head> del documento HTML.
- Ejemplo:
```
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="mi-clase">Texto en rojo</div>
</body>
```
  Con un archivo styles.css:
```
.mi-clase {
  color: red;
  font-size: 20px;
}
```
- Ventajas: Mejora la organización y la capacidad de mantenimiento de los estilos.

Estilos Modernos con Frameworks de Estilos

Bootstrap:
- Método: Utilizar una biblioteca predefinida de clases CSS que se aplican directamente a los elementos HTML.
- Ejemplo:
```
<head>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0/css/bootstrap.min.css">
</head>
<body>
  <div class="text-danger fs-4">Texto en rojo</div>
</body>
```
- Ventajas: Acelera el desarrollo, proporciona un diseño consistente y responsivo con mínimas personalizaciones.
Tailwind CSS:
- Método: Utilizar utilidades de clases para aplicar estilos directamente en el HTML.
- Ejemplo:
```
<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css">
</head>
<body>
  <div class="text-red-500 text-2xl">Texto en rojo</div>
</body>
```
- Ventajas: Ofrece gran flexibilidad y control sobre el diseño, permite una personalización detallada sin escribir CSS adicional.
Materialize:
- Método: Aplicar estilos utilizando una biblioteca basada en el diseño de Material Design de Google.
- Ejemplo:
```
<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
</head>
<body>
  <div class="red-text text-darken-2">Texto en rojo</div>
</body>
```
- Ventajas: Proporciona una apariencia moderna y consistente, con componentes preconstruidos que siguen las directrices de Material Design.

Joan Alexander Valerio Rodríguez

student•

Utility First, viene muy bien en especial como en pocas lineas de código, puedes crear una estructura con su estilo.

Un ejemplo de uso, seria una vista de detalles, donde tengas que mostrar información y utilices clases para que dinámicamente el framework le vaya asignando el estilo y como deben presentarse los datos 🤓

Julian Ricardo Gaviria Lugo

student•

Mi opinion como aprendiz de Tailwind: A mi la verdad el utility first se me hace mas enredado, ya que añade la dificultad de aprender una sintaxis nueva, ademas que cuando parendemos css basico, lo primero que nos dicen es que estilos inline no!. es verdad que en un proyecto grande tener 500 lineas de css se pueden hacer inteligibles, pero creo que para eso estan los preprocesadores como Sass donde puedes trabajr modularmente. Esperemso que este curso me cambi de opion

Oscar David Rodríguez manjarres

student•

sinceramente utility first me parece un poco engorroso y feo , desde mi punto de vista es mas organizado tener siempre otro archivo con los estilos

Alejandro Ramos

student•

Suenan cool!

Christian Velázquez

student•

Es interesante hacer "Utility First". En "CSS Puro", trataba de hacerlo con "@imports". Para ser honesto, pues te tardas un poco.

César Palma

student•

Lo mejor de tailwind no mencionado en este video y diferenciador a otras alternativas es su rapidez a la hora de mantener un proyecto ya realizado.