Implementación de CSS Modules en Next.js para Estilizar Componentes

Contenido del curso

Conceptos básicos de Next.js 14

Manejo de estilos y estáticos en Next.js 14

Data Fetching en Next.js

Next.js Avanzado

Autenticación y autorización

Inteligencia Artificial

Performance

Frontend Ops

Next.js es parte de tu nuevo stack

57
Next.js: Backend y Frontend con React Server Components
01:25 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:006:45

Implementación de CSS Modules en Next.js para Estilizar Componentes

Curso de Next.js 14

Clase 10 de 57

Clase 10 / 57

Comentarios (16)16 comentarios

DANIEL STEVEN RODRIGUEZ VERANO

Hace 3 años

Luis Herrera

Hace 2 años

Cristian Contreras

Hace 3 años

Jhoan Sebastian Rodriguez Sanchez

Hace 3 años

Johnner Alexander Gambacica Ortiz

Hace 2 años

Guido Juliano Mazzuchini Ubaldi

Hace 3 años

Juan Diaz

Hace 3 años

Diego OQUENDO

Hace 3 años

Johann Camilo Belosareos Colmenares

Hace 3 años

Juan Felipe Gutiérrez Torres

Hace 2 años

Mariangelica Useche

Team Platzi

Hace 3 años

Juan David Vanegas Roldán

Hace 3 años

Zaidibeth Ramos

Hace 9 meses

Juan Miguel Garcia Moreno

Hace un año

Jorge Morales

Hace 2 años

Platzi

Hace 2 años

Sergio Enrique Mercado Salazar

Hace 3 años

Jesus Heriberto Lara Juarez

Hace 3 años

Hernán Arica

Hace 3 años

Andrés Villarraga

Hace 9 días•editado

Recursos

CSS Modules es una tecnología innovadora que resuelve uno de los problemas más comunes en el desarrollo front-end: la colisión de nombres de clases y la sobrescritura de estilos. A lo largo de este artículo, exploraremos qué son los CSS Modules, cómo funcionan y por qué son tan beneficiosos, especialmente cuando se utilizan en aplicaciones Next.js. Asimismo, te proporcionaré consejos clave para implementarlos eficientemente y te orientaré para que puedas estilizar tus componentes de React manteniendo un código limpio y mantenible.

¿Qué son los CSS Modules?

Los CSS Modules son hojas de estilos que garantizan que los nombres de clase sean únicos al convertirlos en locales para el componente que los está utilizando. La técnica consiste en generar un hash junto al nombre de la clase para evitar conflictos y colisiones de estilos a nivel global.

¿Cómo funcionan los CSS Modules?

Trabajar con CSS Modules en Next.js es increíblemente sencillo y eficaz. Para aplicarlos, seguimos estos sencillos pasos:

Creamos un archivo de estilos con la convención nombreComponente.module.css.
Escribimos los estilos como si fueran para uso global, sin preocuparnos por colisiones de nombres.
Importamos el archivo de estilo en nuestro componente y accedemos a los estilos como propiedades de un objeto.

¿Por qué usar CSS Modules en Next.js?

La preconfiguración de CSS Modules en Next.js simplifica el proceso de aplicación de estilos. Al importar un archivo .module.css, Next.js se encarga de gestionar la unicidad de las clases, lo cual proporciona:

Scoping local que impide que los estilos se filtren en otros componentes.
Fácil mantenimiento y actualización de los componentes sin temor a afectar otros elementos.

¿Cómo implementar CSS Modules en Next.js?

Implementar CSS Modules comienza con la creación de un archivo correspondiente al componente. Por ejemplo, si tu componente se llama Hero, crearás Hero.module.css. Luego, para vincular estos estilos a tu componente en React, debes importar el archivo y utilizar las clases referenciadas como un objeto. Este proceso te permite aplicar estilos específicos al componente sin interferir con otros estilos globales.

¿Cuáles son las mejores prácticas con CSS Modules?

Al adoptar CSS Modules, se recomienda seguir ciertas prácticas para un mejor aprovechamiento:

Utilizar camelCase para el nombre de las clases facilita el acceso a ellas mediante JavaScript.
Seguir una convención de CSS; se sugiere utilizar BEM (Block Element Modifier) para una mayor legibilidad y mantenimiento.
Para componentes pequeños, modifica directamente los elementos hijos. Si el componente crece, puedes crear clases auxiliares utilizando BEM o dividir el componente para manejar mejor su complejidad.

¿Cómo trabajar eficientemente los estilos con pocos elementos?

Para componentes con un número reducido de elementos, estilizar los hijos directamente es una práctica limpia y efectiva. Por ejemplo, en un componente Hero con un título h1 y un subtítulo h2, aplicaríamos estilos directamente a Hero h1 y Hero h2 dentro del archivo CSS Module correspondiente.

CSS Modules juega un papel crucial en el desarrollo de aplicaciones modernas y escalables. Al mantener los estilos contenidos y específicos para cada componente, garantizamos una base de código más organizada y fácil de mantener. Al implementar estas prácticas en tus proyectos Next.js, no solo mejoras la eficiencia en el desarrollo, sino también el rendimiento de tus aplicaciones. Y recuerda, si surge alguna duda o necesitas profundizar en BEM u otras metodologías, siempre es un excelente momento para investigar y aprender más sobre las mejores técnicas en el mundo del desarrollo web. ¡Manos a la obra!

dale al corazón si eres team TailwindCSS 💙

Si estan utilizando TailwindCSS no eliminar el archivo globals.css y si lo hace se posicionan en la barra lateral izq donde estan todos los archivos y le dan Ctrl + z

Lo siento, estos dias ando enamorado de TailwindCSS 😎

agiliza mucho, pero es mejor empezar con css vanilla or css in js, lo que no me gusta de tailwind es los class Name crece mucho.

a mi no me gusta =/ prefiero sass. pero tengo que aprender tailwind =)

Excelente, dejo mi aporte sobre BEM CSS.

BEM CSS es una metodología de nomenclatura para definir las clases en los nodos HTML del documento.

Es decir, es una manera de nombrar las clases de los nodos de tu HTML para posteriormente atacarlos con CSS de una manera fácil, sencilla y clara.

El objetivo de BEM es dar mucha más transparencia y claridad en tu estructura HTML y CSS.

BEM te dice cómo se relacionan las clases entre sí, lo que es particularmente útil en secciones complejas del documento.

Todas las clases del proyecto pueden encajar con esta filosofía.

BEM son tres siglas.

B de bloque.
E de elemento.
M de modificador.

Un bloque es una sección independiente que tiene significado propio por sí solo. Contiene todos los nodos HTML de una estructura a la que te estés refiriendo.

Un elemento son porciones más pequeñas internas a un bloque. Se usa para ir dividiendo el bloque en segmentos más pequeños.

Un modificador sirve para modificar algunas propiedades de un bloque o elemento.

Puede que CSS modules sea mejor que CSS pero aun asi siento que sigue siendo mucho trabajo.

Soy flojo. Prefiero Tailwind CSS.

IT DOES THE JOB!

He usado TailwindCSS desde Next.js 10 y sigo considerando que es la mejor forma de implementar estilos, pero me queda la pregunta de ¿Este approach de CSS Modules vs TailwindCSS que ventajas ofrece?

** CSS MODULES **

Sirven para aislar los estilos de componentes y que no colisionen

nomenclaruta: [NombreComponente].module.css

NextJS genera un HASH CODE con scope local y único por cada clase para q no colisionen

convencion: ecribir nombre de clases en CamelCase

usar BEM (Block Element Modifier)

hay algunas alternativas a hacer animaciones con sass. Esta se llama Framer motion, y es clave para dar un toque sutil y creativo a tu pagina web

Si te preguntas para qué sirve el hash que se agrega en las clases, es para que no haya colisión de estilos. Aun si tenemos dos componentes con clase "Hero", los hashes serán diferentes, por lo que no habrá colisión. Eso ahorra un par de dolores de cabeza ;)

También puede ser más sencillo colocar los estilos directamente en el componente resumidos con Tailwind, esta es la práctica profesional. Es importante que instalen la extensión de Tailwind, pero no es necesario tomar un curso de esto. Si ya sabes CSS, Tailwind es muy intuitivo y te puedes ir ayudando de chatgpt o google.

Donde estan los recursos sobre BEM?

Esta clase si que me gusto!

¿Como hacer en caso de configurar las variables y estilos globales?

Para configurar estilos globales en SASS, se crea un archivo llamado globals.sass e importar las variables desde variables.sass. Luego, se hacen cambios generales como ajustar margen y padding a cero, establecer font family y asignar colores de la paleta. Importante importar estos estilos en el root layout, sin usar CSS modules.

El segundo consejo sobre el uso de css modules contradice al primero, ya que la convención de la metodología BEM no es en camelCase, si no algo como: .card__item

Yo tengo la duda de cuando utilizo clases condicionales como se tendria que hacer la implementacion ya que no he podido utilizar modules con clases que dependan de un estado por ejemplo si tengo us state que se llame isActive className={isActive?styles.prop: styles.prop2}

Les dejo una extensión de vscode para autocompletado de css modules: CSS Modules - Visual Studio Marketplace

For the current NextJS version (16.3.7), the SCSS or SASS is not required, by default CSS Modules (CSS itself) supports nested styles, variables (--variable) and native math and utility functions (calc, min, max, ...).

.Hero {
	/// CSS rules for Hero
	h1 {
		/// CSS rules for h1
		&:hover {
			/// CSS rules for h1 on mouse over
		}
	}
}

Conceptos básicos de Next.js 14

Optimización Web con Next.js: Velocidad y Rendimiento Mejorados

Creación de Proyectos Next.js con TypeScript y App Router

Creación de Tienda Online con NextGIS y Shopify

Rutas Estáticas y Dinámicas en Next.js: Creación y Uso Práctico

Implementación de Layouts en Next.js: Globales y Locales

Navegación Optimizada con Next.js Usando el Componente Link

Rutas Dinámicas y Parámetros en Next.js: Implementación Práctica

Uso de React Server Components en Next.js: Cliente vs Servidor

Arquitectura de Componentes para Landing Page en Next.js

Manejo de estilos y estáticos en Next.js 14

Implementación de CSS Modules en Next.js para Estilizar Componentes

Instalación y Configuración de Sass en Next.js

Estilos Globales con SASS para Temas Oscuros en Aplicaciones Web

Agregar Archivos Estáticos en Next.js: Imágenes y Recursos Internos

Optimización de Imágenes con Next.js: Uso de Next.Image

Optimización y Responsividad con NextImage en Next.js

Optimización de Fuentes de Google en Next.js con Roboto

Estilos Dinámicos en React con Classnames y useState

Data Fetching en Next.js

Creación de Tienda en Shopify para Desarrollo con Next.js

Creación y uso de variables de entorno en Next.js

Consumo de APIs con Shopify y React Server Components

Implementación de Loader en Next.js para Carga de Productos

Route Grouping en Next.js sin crear segmentos

error.tsx para manejar errores en Next.js

Next.js Avanzado

Manejo de Errores y Páginas 404 en Next.js

React Server Components en Next.js: Renderizado y Optimización

Diferencias entre archivos Template y Layout en Next.js

Arquitectura Escalable para Aplicaciones de Software

Creación de APIs con Next.js y Road Handlers

Configuración y Creación de Colecciones en Shopify

Patrones de Fetching en Next.js: Secuencial y Paralelo

Filtrar productos por colección en Shopify

params y searchParams en Next.js

Implementación de la Vista de Producto en TypeScript y React

Gestión de Caché en Next.js: Tipos y Recomendaciones Prácticas

Revalidación de Caché en Next.js: Endpoints por Tag y Path

Redirección en Next.js: Server y Client Components

Creación de un Componente React para Sanitizar HTML

SEO Dinámico y Estático en Next.js para Mejorar Posicionamiento Web

Autenticación y autorización

Implementación de API GraphQL en Shopify para Autenticación Segura

Uso de Server Actions en Next.js para Formularios React

Implementación de Signup con GraphQL y Shopify

Implementación de Cookies de Acceso en Shopify con Next.js

Implementación de Flujo de Login con Tokens y Cookies

Validación de Access Tokens en Next.js con GraphQL y Cookies

Implementación de Carrito de Compras con React Icons

Manejo de estado global con Sustant en Next.js 13

Implementación de Carrito de Compras en JavaScript y CSS

Checkout de Shopify sin errores de hidratación

Implementación de Middlewares en Next.js para Control de Acceso

Inteligencia Artificial

Implementación de Chatbots con Next.js y Vercel AI SDK

Creación de un Chatbot de Ventas con Personalidad y Contexto

Performance

Implementación de Parallel Routing en Next.js para Cargas Independientes

Analiza tu bundle en Next.js con Bundle Analyzer

Frontend Ops

"Implementación del Edge Runtime en Next.js"

Despliegue de Aplicaciones NxJS en Vercel

Arquitectura de Proyectos Next.js para Entornos Empresariales

Next.js es parte de tu nuevo stack

Next.js: Backend y Frontend con React Server Components

Implementación de CSS Modules en Next.js para Estilizar Componentes