7 Ways to Write CSS in React With Next.js

TL;DR

There is no universal best way to write CSS in a React app, so the right choice depends on your project’s trade-offs. The seven approaches discussed for Next.js range from global CSS and CSS Modules to SCSS, CSS-in-JS, utility libraries like Tailwind, and component frameworks like Bootstrap. Read on to compare their effects on scoping, bundle size, development speed, and customization.

Transcript

when you get started with web development they say you gotta learn the css fundamentals i agree but when you get out into the real world you'll find that one does not just use plain css to build an app the left side's getting lower than the right side i can see what's happening now twist it all right it's just too painful there are literally hundre... Read More

Key Insights

• 🈸 CSS fundamentals are crucial, but practical applications demand more than plain CSS.
• 🏛️ Options in React for CSS include global CSS, CSS modules, preprocessors like SCSS, CSS-in-JS libraries, utility class libraries, and pre-built CSS frameworks.
• 🧑‍💼 Each CSS approach in React entails trade-offs in terms of scalability, efficiency, learning curve, and customization.
• 💥 CSS modules in Next.js help with local scoping, preventing naming collision issues and reducing bundle sizes.
• 👨‍💻 Preprocessors like SCSS offer advanced features like variables and mixins to enhance CSS code in React projects.
• ✊ CSS-in-JS libraries provide programmatic features with JavaScript power for dynamic styling in Next.js.
• 🥺 Utility class libraries like Tailwind offer rapid UI development in React, but may lead to code organization challenges.

Questions & Answers

Q: What is the best way to write CSS in a React app using Next.js?

There is no universal solution that is best for every React app. The choice depends on trade-offs involving scalability, bundle size, dynamic styling, development speed, code organization, and whether you want pre-built components.

Q: Why does global CSS struggle to scale in a Next.js app?

Because CSS cascades across the application, naming becomes difficult and styles can conflict. Global CSS can also produce a large, inefficient bundle, and a larger bundle makes the app load more slowly.

Q: How do CSS Modules prevent naming collisions in Next.js?

A CSS Module scopes its styles to an individual component. Two module files can therefore use the same class name without interfering with each other.

Q: How can CSS Modules reduce a Next.js app’s bundle size?

CSS Modules tell Next.js which CSS is needed for a given page, allowing it to load only the relevant styles. Modules also support a special composes property for importing and overriding code from another module.

Q: What does SCSS add to plain CSS in a Next.js project?

SCSS is a superset of plain CSS that adds features such as variables, mixins, and functions. In Next.js, you install the Sass compiler and rename the relevant files, after which compilation happens automatically in the background.

Q: Why use CSS-in-JS for React styling?

CSS-in-JS libraries let you write CSS inside JavaScript and use JavaScript’s programmatic capabilities. This makes it easier to compute styles and change them dynamically in response to application state.

Q: How does Tailwind CSS compare with writing CSS directly?

Tailwind provides utility classes that can make implementing a design faster because styles are available directly in component markup with IDE IntelliSense. It can purge unused CSS for an efficient bundle, but the HTML can become difficult to organize, and Tailwind does not provide pre-built components.

Q: How do Bootstrap and Bulma differ from Tailwind?

Bootstrap and Bulma provide pre-built components and styles for elements such as buttons and cards, while Tailwind supplies utility classes rather than finished components. In Next.js, Bootstrap can be installed with npm and used by importing its stylesheet from node_modules.

Summary & Key Takeaways

• Learning CSS fundamentals is important, but in the real world, plain CSS alone isn't sufficient for building apps.

• Seven different approaches to CSS in React using Next.js are discussed, each with its own trade-offs for scalability and efficiency.

• Options range from global CSS, CSS modules, preprocessors like SCSS, CSS-in-JS libraries, utility class libraries like Tailwind, to pre-built CSS frameworks like Bootstrap.