Top 7 ways to write CSS code in a React or Next.js app. Learn the tradeoffs between different tools like CSS modules, CSS-in-JS, Sass, Tailwind, Bootstrap, component libraries, and more. https://fireship.io/courses/react-next-firebase/

#css #javascript #webdev

🔗 Resources

NextJS CSS docs https://nextjs.org/docs/basic-features/built-in-css-support
CSS Modules https://github.com/css-modules/css-modules
SCSS Docs https://sass-lang.com/documentation
Mantine Library https://mantine.dev/

🔥 Get More Content - Upgrade to PRO

Upgrade to Fireship PRO at https://fireship.io/pro
Use code lORhwXd2 for 25% off your first payment. 

🎨 My Editor Settings

- Atom One Dark 
- vscode-icons
- Fira Code Font

🔖 Topics Covered

Best ways to write CSS in React
How to use Sass in Next.js
CSS modules tutorial
How to use CSS-in-JS
How to use Tailwind in Next.js
How to use Bootstrap in Next.js
Best component libraries for react
2024-02-04T05:33:56.852Z
nova-2
2-general-nova
2024-01-09.29447
30089e05-99d1-4376-b32e-c263170674af
04067d34-b37f-446a-bdfb-3db10daa5d63
b7f231e84e27c31d8758a3b1327ddb68909fcc75c987674a6417fbfb9d1a219b
67875a7f-c9c4-48a0-aa55-5bdb8a91c34a
deprecated
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.
Left side is getting lower than the right side.
I can see what's happening.
Now twist it.
Alright.
It's just too painful.
There are literally hundreds of libraries app.
There is that attempt to make CSS better, but so far, there's no universal solution.
Today, we'll take a look at 7 different ways to write CSS, app, specifically in a React app using Next JS.
But most importantly, we'll look at the trade offs of each approach so you can decide what's best for your project.
App.
If you're new here, like and subscribe, and check out my full courses on FireShip IO to learn even more by building complete projects.
Now, let's talk about CSS.
Here, I have a pristine Next.
Js app, And the most primitive way to style it is to create global CSS that applies to the entire application.
That might work okay for a small application, but it doesn't scale well at all.
The first problem you'll run into is that naming things gets really hard because CSS cascades.
To address this, you'll likely need to use a naming convention like app, but it's not going to be very fun.
It's hard to do perfectly and you'll probably end up using important everywhere because you've got more important things to do than figure out how to not use important.
App.
The other problem is that it generally results in a very large and inefficient CSS bundle.
The larger the bundle size, the slower the app loads.
App.
Luckily, Next.
Js supports a tool called CSS modules out of the box to address some of these concerns.
A CSS module file app.
It looks just like regular CSS, but it can be scoped to an individual component, and that means you don't have to worry about name collisions when writing your code.
In other words, you can have 2 different module files that define the same class name, but because they're scoped locally, you don't have to worry about them interfering with each other.
In addition, app.
It tells Next.
Js exactly which CSS to load for a given page, which can reduce the bundle size.
Now that may sound inefficient because you may want to share styles between multiple components, but modules have a special composes property that can import and override code from a different module.
App.
Overall, modules will make your life much easier, but we're still dealing with plain CSS here.
And one thing it lacks is programmatic features like loops, functions, app, mix ins, and things like that.
The classic way to make CSS better is to use a preprocessor, which allows you to write a different syntax like sass, less, s or stylus, then use a compiler to convert that code back into plain CSS.
The most popular version is scss, which is a superset app plain CSS, allowing you to write regular CSS with additional features on top of it.
In Next.
Js, all you have to do is install the Sass compiler, then change the file name in your project.
All the compilation will happen in the background for you automatically.
And now you can use features like variables, mixins, and functions to make your code way more concise and efficient.
Sass is app and all, but the problem is that it's an entirely different language to learn, and it's completely decoupled from our main application code.
We already have our JavaScript and HTML together, app.
Why not add our CSS there as well?
And that's where your CSS and JS libraries come in.
There are many different libraries out there like styled components, emotion, app.
Jss, Styletron, and many others, but the characteristic they all share is they allow you to write CSS in your JavaScript code.
That allows you to do many of the program attic things you can do in Sass, but you have the full power of JavaScript at your fingertips.
But more importantly, it makes it easy to create dynamic styles based on the state of your application.
App.
In Next.
Js, there's a homegrown solution called style.
Jsx.
To use it, all you have to do is open up a style tag in a component, use the JSX attribute, then write your CSS as a template literal string.
The cool thing about this is that you can now compute or interpolate values app, use directly inside the style, which means you can dynamically change the styles based on state changes to the application.
In addition, these styles are scoped to the location where they're defined, end, which means that like modules, they won't bleed out to affect other styles.
That's pretty cool, but we still have one major problem.
We need to figure out how to write code that will make the application actually look good.
One way to address that is to bring in a utility class library like tailwind or windy CSS to provide a huge collection of utility classes as they can help us rapidly build out a good looking UI.
Tailwind is very powerful, but it does require some additional tooling and configuration to get Once installed, you'll be able to style your components with utility classes instead of writing the CSS directly.
In my experience, this tends to be a much faster way to implement the design you're going for, because all your styles are right at your fingertips with IDE IntelliSense.
In addition, it can purge all of your unused CSS automatically ID to result in a very efficient bundle size.
But not everybody likes the utility class approach because your component HTML code can get out of control very quickly.
Eddy.
It is a big commitment and you'll have to learn how to organize your code properly.
The other thing about Tailwind is that it doesn't provide pre built components for you, so you still need to do a lot app, work on your own.
There are other popular CSS frameworks out there like Bootstrap or Bulma.
What makes it different than Tailwind is that it provides as prebuilt components, giving you a solid collection of styles for things like buttons, cards, and so on.
To use it in Next.
Js, all you have to do is install it with npm, then import the bootstrap stylesheet from your node modules.
It doesn't have the tooling that Tailwind does, but to use it, all you have to do is start referencing the classes in your component.
App.
It's simple, effective, and has a minimal learning curve.
However, if you're only using the bootstrap style sheet, you might find yourself creating your own components app, to wrap those styles in a way that can be efficiently used with other components, like you might have a bootstrap button component to avoid repeating the same class names over and over again.
N.
Another problem is that using Bootstrap like this will result in a large bundle size, because there are a lot of unused classes that will get included in the final SCSS.
When it comes to React, a more tightly integrated approach is to use a full blown component library.
There are ones that already do that for Bootstrap, but the React ecosystem has many other design systems that you'll wanna check out.
An awesome one I've been using lately is Mantine.
Not only does it handle much of your CSS, but it provides a ton of utilities to handle things that you would otherwise have to do in JavaScript as well, like hooks to use the intersection of server API to know when an element app, it is visible.
It also has tools to manage modals and notifications, calendars, and a ton of other stuff.
Now, libraries like this tend to be fairly opinionated, So make sure to choose one that you really like.
Other ones worth checking out are Ant, Material Design, rebase, chakra, and tomaguie.
That's not a complete list, so let me know your favorite library in the comments.
Congratulations.
You now know 7 different ways to deal with CSS and React.
App.
Keep in mind that you can mix and match all these different techniques to use whatever works best for your application.
If you wanna learn more advanced concepts with full project courses, app.
Become a pro member at Fireship IO.
Thanks for watching, and I will see you in the next one.

Speaker 0: 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. Left side is getting lower than the right side. I can see what's happening.

Now twist it. Alright. It's just too painful. There are literally hundreds of libraries app. There is that attempt to make CSS better, but so far, there's no universal solution.

Today, we'll take a look at 7 different ways to write CSS, app, specifically in a React app using Next JS. But most importantly, we'll look at the trade offs of each approach so you can decide what's best for your project. App. If you're new here, like and subscribe, and check out my full courses on FireShip IO to learn even more by building complete projects. Now, let's talk about CSS.

Here, I have a pristine Next. Js app, And the most primitive way to style it is to create global CSS that applies to the entire application. That might work okay for a small application, but it doesn't scale well at all. The first problem you'll run into is that naming things gets really hard because CSS cascades. To address this, you'll likely need to use a naming convention like app, but it's not going to be very fun.

It's hard to do perfectly and you'll probably end up using important everywhere because you've got more important things to do than figure out how to not use important. App. The other problem is that it generally results in a very large and inefficient CSS bundle. The larger the bundle size, the slower the app loads. App.

Luckily, Next. Js supports a tool called CSS modules out of the box to address some of these concerns. A CSS module file app. It looks just like regular CSS, but it can be scoped to an individual component, and that means you don't have to worry about name collisions when writing your code. In other words, you can have 2 different module files that define the same class name, but because they're scoped locally, you don't have to worry about them interfering with each other.

In addition, app. It tells Next. Js exactly which CSS to load for a given page, which can reduce the bundle size. Now that may sound inefficient because you may want to share styles between multiple components, but modules have a special composes property that can import and override code from a different module. App.

Overall, modules will make your life much easier, but we're still dealing with plain CSS here. And one thing it lacks is programmatic features like loops, functions, app, mix ins, and things like that. The classic way to make CSS better is to use a preprocessor, which allows you to write a different syntax like sass, less, s or stylus, then use a compiler to convert that code back into plain CSS. The most popular version is scss, which is a superset app plain CSS, allowing you to write regular CSS with additional features on top of it. In Next.

Js, all you have to do is install the Sass compiler, then change the file name in your project. All the compilation will happen in the background for you automatically. And now you can use features like variables, mixins, and functions to make your code way more concise and efficient. Sass is app and all, but the problem is that it's an entirely different language to learn, and it's completely decoupled from our main application code. We already have our JavaScript and HTML together, app.

Why not add our CSS there as well? And that's where your CSS and JS libraries come in. There are many different libraries out there like styled components, emotion, app. Jss, Styletron, and many others, but the characteristic they all share is they allow you to write CSS in your JavaScript code. That allows you to do many of the program attic things you can do in Sass, but you have the full power of JavaScript at your fingertips.

But more importantly, it makes it easy to create dynamic styles based on the state of your application. App. In Next. Js, there's a homegrown solution called style. Jsx.

To use it, all you have to do is open up a style tag in a component, use the JSX attribute, then write your CSS as a template literal string. The cool thing about this is that you can now compute or interpolate values app, use directly inside the style, which means you can dynamically change the styles based on state changes to the application. In addition, these styles are scoped to the location where they're defined, end, which means that like modules, they won't bleed out to affect other styles. That's pretty cool, but we still have one major problem. We need to figure out how to write code that will make the application actually look good.

One way to address that is to bring in a utility class library like tailwind or windy CSS to provide a huge collection of utility classes as they can help us rapidly build out a good looking UI. Tailwind is very powerful, but it does require some additional tooling and configuration to get Once installed, you'll be able to style your components with utility classes instead of writing the CSS directly. In my experience, this tends to be a much faster way to implement the design you're going for, because all your styles are right at your fingertips with IDE IntelliSense. In addition, it can purge all of your unused CSS automatically ID to result in a very efficient bundle size. But not everybody likes the utility class approach because your component HTML code can get out of control very quickly.

Eddy. It is a big commitment and you'll have to learn how to organize your code properly. The other thing about Tailwind is that it doesn't provide pre built components for you, so you still need to do a lot app, work on your own. There are other popular CSS frameworks out there like Bootstrap or Bulma. What makes it different than Tailwind is that it provides as prebuilt components, giving you a solid collection of styles for things like buttons, cards, and so on.

To use it in Next. Js, all you have to do is install it with npm, then import the bootstrap stylesheet from your node modules. It doesn't have the tooling that Tailwind does, but to use it, all you have to do is start referencing the classes in your component. App. It's simple, effective, and has a minimal learning curve.

However, if you're only using the bootstrap style sheet, you might find yourself creating your own components app, to wrap those styles in a way that can be efficiently used with other components, like you might have a bootstrap button component to avoid repeating the same class names over and over again. N. Another problem is that using Bootstrap like this will result in a large bundle size, because there are a lot of unused classes that will get included in the final SCSS. When it comes to React, a more tightly integrated approach is to use a full blown component library. There are ones that already do that for Bootstrap, but the React ecosystem has many other design systems that you'll wanna check out.

An awesome one I've been using lately is Mantine. Not only does it handle much of your CSS, but it provides a ton of utilities to handle things that you would otherwise have to do in JavaScript as well, like hooks to use the intersection of server API to know when an element app, it is visible. It also has tools to manage modals and notifications, calendars, and a ton of other stuff. Now, libraries like this tend to be fairly opinionated, So make sure to choose one that you really like. Other ones worth checking out are Ant, Material Design, rebase, chakra, and tomaguie.

That's not a complete list, so let me know your favorite library in the comments. Congratulations. You now know 7 different ways to deal with CSS and React. App. Keep in mind that you can mix and match all these different techniques to use whatever works best for your application.

If you wanna learn more advanced concepts with full project courses, app. Become a pro member at Fireship IO. Thanks for watching, and I will see you in the next one.
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. Left side is getting lower than the right side. I can see what's happening. Now twist it. Alright. It's just too painful. There are literally hundreds of libraries app. There is that attempt to make CSS better, but so far, there's no universal solution. Today, we'll take a look at 7 different ways to write CSS, app, specifically in a React app using Next JS.
But most importantly, we'll look at the trade offs of each approach so you can decide what's best for your project. App. If you're new here, like and subscribe, and check out my full courses on FireShip IO to learn even more by building complete projects. Now, let's talk about CSS.
software development
software
Here, I have a pristine Next. Js app, And the most primitive way to style it is to create global CSS that applies to the entire application. That might work okay for a small application, but it doesn't scale well at all. The first problem you'll run into is that naming things gets really hard because CSS cascades. To address this, you'll likely need to use a naming convention like app, but it's not going to be very fun. It's hard to do perfectly and you'll probably end up using important everywhere because you've got more important things to do than figure out how to not use important. App. The other problem is that it generally results in a very large and inefficient CSS bundle. The larger the bundle size, the slower the app loads. App. Luckily, Next. Js supports a tool called CSS modules out of the box to address some of these concerns. A CSS module file app. It looks just like regular CSS, but it can be scoped to an individual component, and that means you don't have to worry about name collisions when writing your code. In other words, you can have 2 different module files that define the same class name, but because they're scoped locally, you don't have to worry about them interfering with each other. In addition, app. It tells Next. Js exactly which CSS to load for a given page, which can reduce the bundle size. Now that may sound inefficient because you may want to share styles between multiple components, but modules have a special composes property that can import and override code from a different module.
App. Overall, modules will make your life much easier, but we're still dealing with plain CSS here. And one thing it lacks is programmatic features like loops, functions, app, mix ins, and things like that. The classic way to make CSS better is to use a preprocessor, which allows you to write a different syntax like sass, less, s or stylus, then use a compiler to convert that code back into plain CSS.
programming
The most popular version is scss, which is a superset app plain CSS, allowing you to write regular CSS with additional features on top of it. In Next. Js, all you have to do is install the Sass compiler, then change the file name in your project. All the compilation will happen in the background for you automatically. And now you can use features like variables, mixins, and functions to make your code way more concise and efficient. Sass is app and all, but the problem is that it's an entirely different language to learn, and it's completely decoupled from our main application code. We already have our JavaScript and HTML together, app. Why not add our CSS there as well? And that's where your CSS and JS libraries come in. There are many different libraries out there like styled components, emotion, app. Jss, Styletron, and many others, but the characteristic they all share is they allow you to write CSS in your JavaScript code. That allows you to do many of the program attic things you can do in Sass, but you have the full power of JavaScript at your fingertips. But more importantly, it makes it easy to create dynamic styles based on the state of your application. App. In Next. Js, there's a homegrown solution called style. Jsx. To use it, all you have to do is open up a style tag in a component, use the JSX attribute, then write your CSS as a template literal string. The cool thing about this is that you can now compute or interpolate values app, use directly inside the style, which means you can dynamically change the styles based on state changes to the application.
In addition, these styles are scoped to the location where they're defined, end, which means that like modules, they won't bleed out to affect other styles. That's pretty cool, but we still have one major problem. We need to figure out how to write code that will make the application actually look good. One way to address that is to bring in a utility class library like tailwind or windy CSS to provide a huge collection of utility classes as they can help us rapidly build out a good looking UI.
programming
software development
software
graphic design
architecture
Tailwind is very powerful, but it does require some additional tooling and configuration to get Once installed, you'll be able to style your components with utility classes instead of writing the CSS directly. In my experience, this tends to be a much faster way to implement the design you're going for, because all your styles are right at your fingertips with IDE IntelliSense.
graphic design
In addition, it can purge all of your unused CSS automatically ID to result in a very efficient bundle size. But not everybody likes the utility class approach because your component HTML code can get out of control very quickly. Eddy. It is a big commitment and you'll have to learn how to organize your code properly. The other thing about Tailwind is that it doesn't provide pre built components for you, so you still need to do a lot app, work on your own. There are other popular CSS frameworks out there like Bootstrap or Bulma. What makes it different than Tailwind is that it provides as prebuilt components, giving you a solid collection of styles for things like buttons, cards, and so on. To use it in Next. Js, all you have to do is install it with npm, then import the bootstrap stylesheet from your node modules. It doesn't have the tooling that Tailwind does, but to use it, all you have to do is start referencing the classes in your component. App. It's simple, effective, and has a minimal learning curve. However, if you're only using the bootstrap style sheet, you might find yourself creating your own components app, to wrap those styles in a way that can be efficiently used with other components, like you might have a bootstrap button component to avoid repeating the same class names over and over again. N. Another problem is that using Bootstrap like this will result in a large bundle size, because there are a lot of unused classes that will get included in the final SCSS. When it comes to React, a more tightly integrated approach is to use a full blown component library. There are ones that already do that for Bootstrap, but the React ecosystem has many other design systems that you'll wanna check out. An awesome one I've been using lately is Mantine. Not only does it handle much of your CSS, but it provides a ton of utilities to handle things that you would otherwise have to do in JavaScript as well, like hooks to use the intersection of server API to know when an element app, it is visible.
It also has tools to manage modals and notifications, calendars, and a ton of other stuff. Now, libraries like this tend to be fairly opinionated, So make sure to choose one that you really like. Other ones worth checking out are Ant, Material Design, rebase, chakra, and tomaguie. That's not a complete list, so let me know your favorite library in the comments.
software
software development
microsoft
databases
documentation
Congratulations. You now know 7 different ways to deal with CSS and React. App. Keep in mind that you can mix and match all these different techniques to use whatever works best for your application.
If you wanna learn more advanced concepts with full project courses, app. Become a pro member at Fireship IO. Thanks for watching, and I will see you in the next one.
software development
teaching
education
academia
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. Left side is getting lower than the right side. I can see what's happening. Now twist it. Alright. It's just too painful. There are literally hundreds of libraries app. There is that attempt to make CSS better, but so far, there's no universal solution. Today, we'll take a look at 7 different ways to write CSS, app, specifically in a React app using Next JS. But most importantly, we'll look at the trade offs of each approach so you can decide what's best for your project. App. If you're new here, like and subscribe, and check out my full courses on FireShip IO to learn even more by building complete projects. Now, let's talk about CSS. Here, I have a pristine Next. Js app, And the most primitive way to style it is to create global CSS that applies to the entire application. That might work okay for a small application, but it doesn't scale well at all. The first problem you'll run into is that naming things gets really hard because CSS cascades. To address this, you'll likely need to use a naming convention like app, but it's not going to be very fun. It's hard to do perfectly and you'll probably end up using important everywhere because you've got more important things to do than figure out how to not use important. App. The other problem is that it generally results in a very large and inefficient CSS bundle. The larger the bundle size, the slower the app loads. App. Luckily, Next. Js supports a tool called CSS modules out of the box to address some of these concerns. A CSS module file app. It looks just like regular CSS, but it can be scoped to an individual component, and that means you don't have to worry about name collisions when writing your code. In other words, you can have 2 different module files that define the same class name, but because they're scoped locally, you don't have to worry about them interfering with each other. In addition, app. It tells Next. Js exactly which CSS to load for a given page, which can reduce the bundle size. Now that may sound inefficient because you may want to share styles between multiple components, but modules have a special composes property that can import and override code from a different module. App. Overall, modules will make your life much easier, but we're still dealing with plain CSS here. And one thing it lacks is programmatic features like loops, functions, app, mix ins, and things like that. The classic way to make CSS better is to use a preprocessor, which allows you to write a different syntax like sass, less, s or stylus, then use a compiler to convert that code back into plain CSS. The most popular version is scss, which is a superset app plain CSS, allowing you to write regular CSS with additional features on top of it. In Next. Js, all you have to do is install the Sass compiler, then change the file name in your project. All the compilation will happen in the background for you automatically. And now you can use features like variables, mixins, and functions to make your code way more concise and efficient. Sass is app and all, but the problem is that it's an entirely different language to learn, and it's completely decoupled from our main application code. We already have our JavaScript and HTML together, app. Why not add our CSS there as well? And that's where your CSS and JS libraries come in. There are many different libraries out there like styled components, emotion, app. Jss, Styletron, and many others, but the characteristic they all share is they allow you to write CSS in your JavaScript code. That allows you to do many of the program attic things you can do in Sass, but you have the full power of JavaScript at your fingertips. But more importantly, it makes it easy to create dynamic styles based on the state of your application. App. In Next. Js, there's a homegrown solution called style. Jsx. To use it, all you have to do is open up a style tag in a component, use the JSX attribute, then write your CSS as a template literal string. The cool thing about this is that you can now compute or interpolate values app, use directly inside the style, which means you can dynamically change the styles based on state changes to the application. In addition, these styles are scoped to the location where they're defined, end, which means that like modules, they won't bleed out to affect other styles. That's pretty cool, but we still have one major problem. We need to figure out how to write code that will make the application actually look good. One way to address that is to bring in a utility class library like tailwind or windy CSS to provide a huge collection of utility classes as they can help us rapidly build out a good looking UI. Tailwind is very powerful, but it does require some additional tooling and configuration to get Once installed, you'll be able to style your components with utility classes instead of writing the CSS directly. In my experience, this tends to be a much faster way to implement the design you're going for, because all your styles are right at your fingertips with IDE IntelliSense. In addition, it can purge all of your unused CSS automatically ID to result in a very efficient bundle size. But not everybody likes the utility class approach because your component HTML code can get out of control very quickly. Eddy. It is a big commitment and you'll have to learn how to organize your code properly. The other thing about Tailwind is that it doesn't provide pre built components for you, so you still need to do a lot app, work on your own. There are other popular CSS frameworks out there like Bootstrap or Bulma. What makes it different than Tailwind is that it provides as prebuilt components, giving you a solid collection of styles for things like buttons, cards, and so on. To use it in Next. Js, all you have to do is install it with npm, then import the bootstrap stylesheet from your node modules. It doesn't have the tooling that Tailwind does, but to use it, all you have to do is start referencing the classes in your component. App. It's simple, effective, and has a minimal learning curve. However, if you're only using the bootstrap style sheet, you might find yourself creating your own components app, to wrap those styles in a way that can be efficiently used with other components, like you might have a bootstrap button component to avoid repeating the same class names over and over again. N. Another problem is that using Bootstrap like this will result in a large bundle size, because there are a lot of unused classes that will get included in the final SCSS. When it comes to React, a more tightly integrated approach is to use a full blown component library. There are ones that already do that for Bootstrap, but the React ecosystem has many other design systems that you'll wanna check out. An awesome one I've been using lately is Mantine. Not only does it handle much of your CSS, but it provides a ton of utilities to handle things that you would otherwise have to do in JavaScript as well, like hooks to use the intersection of server API to know when an element app, it is visible. It also has tools to manage modals and notifications, calendars, and a ton of other stuff. Now, libraries like this tend to be fairly opinionated, So make sure to choose one that you really like. Other ones worth checking out are Ant, Material Design, rebase, chakra, and tomaguie. That's not a complete list, so let me know your favorite library in the comments. Congratulations. You now know 7 different ways to deal with CSS and React. App. Keep in mind that you can mix and match all these different techniques to use whatever works best for your application. If you wanna learn more advanced concepts with full project courses, app. Become a pro member at Fireship IO. Thanks for watching, and I will see you in the next one.
When
when
you
you
get
get
started
started
with
with
web
web
development,
development
they
they
say,
say
you
you
gotta
gotta
learn
learn
the
the
CSS
css
fundamentals.
fundamentals
I
i
agree.
agree
But
but
when
when
you
you
get
get
out
out
into
into
the
the
real
real
world,
world
you'll
you'll
find
find
that
that
one
one
does
does
not
not
just
just
use
use
plain
plain
CSS
css
to
to
build
build
an
an
app.
app
Left
left
side
side
is
is
getting
getting
lower
lower
than
than
the
the
right
right
side.
side
I
i
can
can
see
see
what's
what's
happening.
happening
Now
now
twist
twist
it.
it
Alright.
alright
It's
it's
just
just
too
too
painful.
painful
There
there
are
are
literally
literally
hundreds
hundreds
of
of
libraries
libraries
app.
app
There
there
is
is
that
that
attempt
attempt
to
to
make
make
CSS
css
better,
better
but
but
so
so
far,
far
there's
there's
no
no
universal
universal
solution.
solution
Today,
today
we'll
we'll
take
take
a
a
look
look
at
at
7
7
different
different
ways
ways
to
to
write
write
CSS,
css
app,
app
specifically
specifically
in
in
a
a
React
react
app
app
using
using
Next
next
JS.
js
But
but
most
most
importantly,
importantly
we'll
we'll
look
look
at
at
the
the
trade
trade
offs
offs
of
of
each
each
approach
approach
so
so
you
you
can
can
decide
decide
what's
what's
best
best
for
for
your
your
project.
project
App.
app
If
if
you're
you're
new
new
here,
here
like
like
and
and
subscribe,
subscribe
and
and
check
check
out
out
my
my
full
full
courses
courses
on
on
FireShip
fireship
IO
io
to
to
learn
learn
even
even
more
more
by
by
building
building
complete
complete
projects.
projects
Now,
now
let's
let's
talk
talk
about
about
CSS.
css
Here,
here
I
i
have
have
a
a
pristine
pristine
Next.
next
Js
js
app,
app
And
and
the
the
most
most
primitive
primitive
way
way
to
to
style
style
it
it
is
is
to
to
create
create
global
global
CSS
css
that
that
applies
applies
to
to
the
the
entire
entire
application.
application
That
that
might
might
work
work
okay
okay
for
for
a
a
small
small
application,
application
but
but
it
it
doesn't
doesn't
scale
scale
well
well
at
at
all.
all
The
the
first
first
problem
problem
you'll
you'll
run
run
into
into
is
is
that
that
naming
naming
things
things
gets
gets
really
really
hard
hard
because
because
CSS
css
cascades.
cascades
To
to
address
address
this,
this
you'll
you'll
likely
likely
need
need
to
to
use
use
a
a
naming
naming
convention
convention
like
like
app,
app
but
but
it's
it's
not
not
going
going
to
to
be
be
very
very
fun.
fun
It's
it's
hard
hard
to
to
do
do
perfectly
perfectly
and
and
you'll
you'll
probably
probably
end
end
up
up
using
using
important
important
everywhere
everywhere
because
because
you've
you've
got
got
more
more
important
important
things
things
to
to
do
do
than
than
figure
figure
out
out
how
how
to
to
not
not
use
use
important.
important
App.
app
The
the
other
other
problem
problem
is
is
that
that
it
it
generally
generally
results
results
in
in
a
a
very
very
large
large
and
and
inefficient
inefficient
CSS
css
bundle.
bundle
The
the
larger
larger
the
the
bundle
bundle
size,
size
the
the
slower
slower
the
the
app
app
loads.
loads
App.
app
Luckily,
luckily
Next.
next
Js
js
supports
supports
a
a
tool
tool
called
called
CSS
css
modules
modules
out
out
of
of
the
the
box
box
to
to
address
address
some
some
of
of
these
these
concerns.
concerns
A
a
CSS
css
module
module
file
file
app.
app
It
it
looks
looks
just
just
like
like
regular
regular
CSS,
css
but
but
it
it
can
can
be
be
scoped
scoped
to
to
an
an
individual
individual
component,
component
and
and
that
that
means
means
you
you
don't
don't
have
have
to
to
worry
worry
about
about
name
name
collisions
collisions
when
when
writing
writing
your
your
code.
code
In
in
other
other
words,
words
you
you
can
can
have
have
2
2
different
different
module
module
files
files
that
that
define
define
the
the
same
same
class
class
name,
name
but
but
because
because
they're
they're
scoped
scoped
locally,
locally
you
you
don't
don't
have
have
to
to
worry
worry
about
about
them
them
interfering
interfering
with
with
each
each
other.
other
In
in
addition,
addition
app.
app
It
it
tells
tells
Next.
next
Js
js
exactly
exactly
which
which
CSS
css
to
to
load
load
for
for
a
a
given
given
page,
page
which
which
can
can
reduce
reduce
the
the
bundle
bundle
size.
size
Now
now
that
that
may
may
sound
sound
inefficient
inefficient
because
because
you
you
may
may
want
want
to
to
share
share
styles
styles
between
between
multiple
multiple
components,
components
but
but
modules
modules
have
have
a
a
special
special
composes
composes
property
property
that
that
can
can
import
import
and
and
override
override
code
code
from
from
a
a
different
different
module.
module
App.
app
Overall,
overall
modules
modules
will
will
make
make
your
your
life
life
much
much
easier,
easier
but
but
we're
we're
still
still
dealing
dealing
with
with
plain
plain
CSS
css
here.
here
And
and
one
one
thing
thing
it
it
lacks
lacks
is
is
programmatic
programmatic
features
features
like
like
loops,
loops
functions,
functions
app,
app
mix
mix
ins,
ins
and
and
things
things
like
like
that.
that
The
the
classic
classic
way
way
to
to
make
make
CSS
css
better
better
is
is
to
to
use
use
a
a
preprocessor,
preprocessor
which
which
allows
allows
you
you
to
to
write
write
a
a
different
different
syntax
syntax
like
like
sass,
sass
less,
less
s
s
or
or
stylus,
stylus
then
then
use
use
a
a
compiler
compiler
to
to
convert
convert
that
that
code
code
back
back
into
into
plain
plain
CSS.
css
The
the
most
most
popular
popular
version
version
is
is
scss,
scss
which
which
is
is
a
a
superset
superset
app
app
plain
plain
CSS,
css
allowing
allowing
you
you
to
to
write
write
regular
regular
CSS
css
with
with
additional
additional
features
features
on
on
top
top
of
of
it.
it
In
in
Next.
next
Js,
js
all
all
you
you
have
have
to
to
do
do
is
is
install
install
the
the
Sass
sass
compiler,
compiler
then
then
change
change
the
the
file
file
name
name
in
in
your
your
project.
project
All
all
the
the
compilation
compilation
will
will
happen
happen
in
in
the
the
background
background
for
for
you
you
automatically.
automatically
And
and
now
now
you
you
can
can
use
use
features
features
like
like
variables,
variables
mixins,
mixins
and
and
functions
functions
to
to
make
make
your
your
code
code
way
way
more
more
concise
concise
and
and
efficient.
efficient
Sass
sass
is
is
app
app
and
and
all,
all
but
but
the
the
problem
problem
is
is
that
that
it's
it's
an
an
entirely
entirely
different
different
language
language
to
to
learn,
learn
and
and
it's
it's
completely
completely
decoupled
decoupled
from
from
our
our
main
main
application
application
code.
code
We
we
already
already
have
have
our
our
JavaScript
javascript
and
and
HTML
html
together,
together
app.
app
Why
why
not
not
add
add
our
our
CSS
css
there
there
as
as
well?
well
And
and
that's
that's
where
where
your
your
CSS
css
and
and
JS
js
libraries
libraries
come
come
in.
in
There
there
are
are
many
many
different
different
libraries
libraries
out
out
there
there
like
like
styled
styled
components,
components
emotion,
emotion
app.
app
Jss,
jss
Styletron,
styletron
and
and
many
many
others,
others
but
but
the
the
characteristic
characteristic
they
they
all
all
share
share
is
is
they
they
allow
allow
you
you
to
to
write
write
CSS
css
in
in
your
your
JavaScript
javascript
code.
code
That
that
allows
allows
you
you
to
to
do
do
many
many
of
of
the
the
program
program
attic
attic
things
things
you
you
can
can
do
do
in
in
Sass,
sass
but
but
you
you
have
have
the
the
full
full
power
power
of
of
JavaScript
javascript
at
at
your
your
fingertips.
fingertips
But
but
more
more
importantly,
importantly
it
it
makes
makes
it
it
easy
easy
to
to
create
create
dynamic
dynamic
styles
styles
based
based
on
on
the
the
state
state
of
of
your
your
application.
application
App.
app
In
in
Next.
next
Js,
js
there's
there's
a
a
homegrown
homegrown
solution
solution
called
called
style.
style
Jsx.
jsx
To
to
use
use
it,
it
all
all
you
you
have
have
to
to
do
do
is
is
open
open
up
up
a
a
style
style
tag
tag
in
in
a
a
component,
component
use
use
the
the
JSX
jsx
attribute,
attribute
then
then
write
write
your
your
CSS
css
as
as
a
a
template
template
literal
literal
string.
string
The
the
cool
cool
thing
thing
about
about
this
this
is
is
that
that
you
you
can
can
now
now
compute
compute
or
or
interpolate
interpolate
values
values
app,
app
use
use
directly
directly
inside
inside
the
the
style,
style
which
which
means
means
you
you
can
can
dynamically
dynamically
change
change
the
the
styles
styles
based
based
on
on
state
state
changes
changes
to
to
the
the
application.
application
In
in
addition,
addition
these
these
styles
styles
are
are
scoped
scoped
to
to
the
the
location
location
where
where
they're
they're
defined,
defined
end,
end
which
which
means
means
that
that
like
like
modules,
modules
they
they
won't
won't
bleed
bleed
out
out
to
to
affect
affect
other
other
styles.
styles
That's
that's
pretty
pretty
cool,
cool
but
but
we
we
still
still
have
have
one
one
major
major
problem.
problem
We
we
need
need
to
to
figure
figure
out
out
how
how
to
to
write
write
code
code
that
that
will
will
make
make
the
the
application
application
actually
actually
look
look
good.
good
One
one
way
way
to
to
address
address
that
that
is
is
to
to
bring
bring
in
in
a
a
utility
utility
class
class
library
library
like
like
tailwind
tailwind
or
or
windy
windy
CSS
css
to
to
provide
provide
a
a
huge
huge
collection
collection
of
of
utility
utility
classes
classes
as
as
they
they
can
can
help
help
us
us
rapidly
rapidly
build
build
out
out
a
a
good
good
looking
looking
UI.
ui
Tailwind
tailwind
is
is
very
very
powerful,
powerful
but
but
it
it
does
does
require
require
some
some
additional
additional
tooling
tooling
and
and
configuration
configuration
to
to
get
get
Once
once
installed,
installed
you'll
you'll
be
be
able
able
to
to
style
style
your
your
components
components
with
with
utility
utility
classes
classes
instead
instead
of
of
writing
writing
the
the
CSS
css
directly.
directly
In
in
my
my
experience,
experience
this
this
tends
tends
to
to
be
be
a
a
much
much
faster
faster
way
way
to
to
implement
implement
the
the
design
design
you're
you're
going
going
for,
for
because
because
all
all
your
your
styles
styles
are
are
right
right
at
at
your
your
fingertips
fingertips
with
with
IDE
ide
IntelliSense.
intellisense
In
in
addition,
addition
it
it
can
can
purge
purge
all
all
of
of
your
your
unused
unused
CSS
css
automatically
automatically
ID
id
to
to
result
result
in
in
a
a
very
very
efficient
efficient
bundle
bundle
size.
size
But
but
not
not
everybody
everybody
likes
likes
the
the
utility
utility
class
class
approach
approach
because
because
your
your
component
component
HTML
html
code
code
can
can
get
get
out
out
of
of
control
control
very
very
quickly.
quickly
Eddy.
eddy
It
it
is
is
a
a
big
big
commitment
commitment
and
and
you'll
you'll
have
have
to
to
learn
learn
how
how
to
to
organize
organize
your
your
code
code
properly.
properly
The
the
other
other
thing
thing
about
about
Tailwind
tailwind
is
is
that
that
it
it
doesn't
doesn't
provide
provide
pre
pre
built
built
components
components
for
for
you,
you
so
so
you
you
still
still
need
need
to
to
do
do
a
a
lot
lot
app,
app
work
work
on
on
your
your
own.
own
There
there
are
are
other
other
popular
popular
CSS
css
frameworks
frameworks
out
out
there
there
like
like
Bootstrap
bootstrap
or
or
Bulma.
bulma
What
what
makes
makes
it
it
different
different
than
than
Tailwind
tailwind
is
is
that
that
it
it
provides
provides
as
as
prebuilt
prebuilt
components,
components
giving
giving
you
you
a
a
solid
solid
collection
collection
of
of
styles
styles
for
for
things
things
like
like
buttons,
buttons
cards,
cards
and
and
so
so
on.
on
To
to
use
use
it
it
in
in
Next.
next
Js,
js
all
all
you
you
have
have
to
to
do
do
is
is
install
install
it
it
with
with
npm,
npm
then
then
import
import
the
the
bootstrap
bootstrap
stylesheet
stylesheet
from
from
your
your
node
node
modules.
modules
It
it
doesn't
doesn't
have
have
the
the
tooling
tooling
that
that
Tailwind
tailwind
does,
does
but
but
to
to
use
use
it,
it
all
all
you
you
have
have
to
to
do
do
is
is
start
start
referencing
referencing
the
the
classes
classes
in
in
your
your
component.
component
App.
app
It's
it's
simple,
simple
effective,
effective
and
and
has
has
a
a
minimal
minimal
learning
learning
curve.
curve
However,
however
if
if
you're
you're
only
only
using
using
the
the
bootstrap
bootstrap
style
style
sheet,
sheet
you
you
might
might
find
find
yourself
yourself
creating
creating
your
your
own
own
components
components
app,
app
to
to
wrap
wrap
those
those
styles
styles
in
in
a
a
way
way
that
that
can
can
be
be
efficiently
efficiently
used
used
with
with
other
other
components,
components
like
like
you
you
might
might
have
have
a
a
bootstrap
bootstrap
button
button
component
component
to
to
avoid
avoid
repeating
repeating
the
the
same
same
class
class
names
names
over
over
and
and
over
over
again.
again
N.
n
Another
another
problem
problem
is
is
that
that
using
using
Bootstrap
bootstrap
like
like
this
this
will
will
result
result
in
in
a
a
large
large
bundle
bundle
size,
size
because
because
there
there
are
are
a
a
lot
lot
of
of
unused
unused
classes
classes
that
that
will
will
get
get
included
included
in
in
the
the
final
final
SCSS.
scss
When
when
it
it
comes
comes
to
to
React,
react
a
a
more
more
tightly
tightly
integrated
integrated
approach
approach
is
is
to
to
use
use
a
a
full
full
blown
blown
component
component
library.
library
There
there
are
are
ones
ones
that
that
already
already
do
do
that
that
for
for
Bootstrap,
bootstrap
but
but
the
the
React
react
ecosystem
ecosystem
has
has
many
many
other
other
design
design
systems
systems
that
that
you'll
you'll
wanna
wanna
check
check
out.
out
An
an
awesome
awesome
one
one
I've
i've
been
been
using
using
lately
lately
is
is
Mantine.
mantine
Not
not
only
only
does
does
it
it
handle
handle
much
much
of
of
your
your
CSS,
css
but
but
it
it
provides
provides
a
a
ton
ton
of
of
utilities
utilities
to
to
handle
handle
things
things
that
that
you
you
would
would
otherwise
otherwise
have
have
to
to
do
do
in
in
JavaScript
javascript
as
as
well,
well
like
like
hooks
hooks
to
to
use
use
the
the
intersection
intersection
of
of
server
server
API
api
to
to
know
know
when
when
an
an
element
element
app,
app
it
it
is
is
visible.
visible
It
it
also
also
has
has
tools
tools
to
to
manage
manage
modals
modals
and
and
notifications,
notifications
calendars,
calendars
and
and
a
a
ton
ton
of
of
other
other
stuff.
stuff
Now,
now
libraries
libraries
like
like
this
this
tend
tend
to
to
be
be
fairly
fairly
opinionated,
opinionated
So
so
make
make
sure
sure
to
to
choose
choose
one
one
that
that
you
you
really
really
like.
like
Other
other
ones
ones
worth
worth
checking
checking
out
out
are
are
Ant,
ant
Material
material
Design,
design
rebase,
rebase
chakra,
chakra
and
and
tomaguie.
tomaguie
That's
that's
not
not
a
a
complete
complete
list,
list
so
so
let
let
me
me
know
know
your
your
favorite
favorite
library
library
in
in
the
the
comments.
comments
Congratulations.
congratulations
You
you
now
now
know
know
7
7
different
different
ways
ways
to
to
deal
deal
with
with
CSS
css
and
and
React.
react
App.
app
Keep
keep
in
in
mind
mind
that
that
you
you
can
can
mix
mix
and
and
match
match
all
all
these
these
different
different
techniques
techniques
to
to
use
use
whatever
whatever
works
works
best
best
for
for
your
your
application.
application
If
if
you
you
wanna
wanna
learn
learn
more
more
advanced
advanced
concepts
concepts
with
with
full
full
project
project
courses,
courses
app.
app
Become
become
a
a
pro
pro
member
member
at
at
Fireship
fireship
IO.
io
Thanks
thanks
for
for
watching,
watching
and
and
I
i
will
will
see
see
you
you
in
in
the
the
next
next
one.
one
success
The benefits of learning CSS in React apps include low error rates and scalability, with the ability to use CSS modules and import and override it. Different language options are discussed, including JavaScript and the ability to write CSS in a different language. Different options for building mobile apps, including style tags, utility class library, and full blown components are discussed, with the benefits of a full blown library being highlighted. Viewers are encouraged to check out other popular CSS frameworks and be advised of the benefits of learning in a different language.
7 ways to deal with CSS
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. Left side is getting lower than the right side. I can see what's happening. Now twist it. Alright. It's just too painful. There are literally hundreds of libraries app. There is that attempt to make CSS better, but so far, there's no universal solution. Today, we'll take a look at 7 different ways to write CSS, app, specifically in a React app using Next JS. But most importantly, we'll look at the trade offs of each approach so you can decide what's best for your project. App. If you're new here, like and subscribe, and check out my full courses on FireShip IO to learn even more by building complete projects. Now, let's talk about CSS. Here, I have a pristine Next. Js app, And the most primitive way to style it is to create global CSS that applies to the entire application. That might work okay for a small application, but it doesn't scale well at all. The first problem you'll run into is that naming things gets really hard because CSS cascades. To address this, you'll likely need to use a naming convention like app, but it's not going to be very fun. It's hard to do perfectly and you'll probably end up using important everywhere because you've got more important things to do than figure out how to not use important. App. The other problem is that it generally results in a very large and inefficient CSS bundle. The larger the bundle size, the slower the app loads. App. Luckily, Next. Js supports a tool called CSS modules out of the box to address some of these concerns. A CSS module file app. It looks just like regular CSS, but it can be scoped to an individual component, and that means you don't have to worry about name collisions when writing your code. In other words, you can have 2 different module files that define the same class name, but because they're scoped locally, you don't have to worry about them interfering with each other. In addition, app. It tells Next. Js exactly which CSS to load for a given page, which can reduce the bundle size. Now that may sound inefficient because you may want to share styles between multiple components, but modules have a special composes property that can import and override code from a different module. App. Overall, modules will make your life much easier, but we're still dealing with plain CSS here. And one thing it lacks is programmatic features like loops, functions, app, mix ins, and things like that. The classic way to make CSS better is to use a preprocessor, which allows you to write a different syntax like sass, less, s or stylus, then use a compiler to convert that code back into plain CSS. The most popular version is scss, which is a superset app plain CSS, allowing you to write regular CSS with additional features on top of it. In Next. Js, all you have to do is install the Sass compiler, then change the file name in your project. All the compilation will happen in the background for you automatically. And now you can use features like variables, mixins, and functions to make your code way more concise and efficient. Sass is app and all, but the problem is that it's an entirely different language to learn, and it's completely decoupled from our main application code. We already have our JavaScript and HTML together, app. Why not add our CSS there as well? And that's where your CSS and JS libraries come in. There are many different libraries out there like styled components, emotion, app. Jss, Styletron, and many others, but the characteristic they all share is they allow you to write CSS in your JavaScript code. That allows you to do many of the program attic things you can do in Sass, but you have the full power of JavaScript at your fingertips. But more importantly, it makes it easy to create dynamic styles based on the state of your application. App. In Next. Js, there's a homegrown solution called style. Jsx. To use it, all you have to do is open up a style tag in a component, use the JSX attribute, then write your CSS as a template literal string. The cool thing about this is that you can now compute or interpolate values app, use directly inside the style, which means you can dynamically change the styles based on state changes to the application. In addition, these styles are scoped to the location where they're defined, end, which means that like modules, they won't bleed out to affect other styles. That's pretty cool, but we still have one major problem. We need to figure out how to write code that will make the application actually look good. One way to address that is to bring in a utility class library like tailwind or windy CSS to provide a huge collection of utility classes as they can help us rapidly build out a good looking UI. Tailwind is very powerful, but it does require some additional tooling and configuration to get Once installed, you'll be able to style your components with utility classes instead of writing the CSS directly. In my experience, this tends to be a much faster way to implement the design you're going for, because all your styles are right at your fingertips with IDE IntelliSense. In addition, it can purge all of your unused CSS automatically ID to result in a very efficient bundle size. But not everybody likes the utility class approach because your component HTML code can get out of control very quickly. Eddy. It is a big commitment and you'll have to learn how to organize your code properly. The other thing about Tailwind is that it doesn't provide pre built components for you, so you still need to do a lot app, work on your own. There are other popular CSS frameworks out there like Bootstrap or Bulma. What makes it different than Tailwind is that it provides as prebuilt components, giving you a solid collection of styles for things like buttons, cards, and so on. To use it in Next. Js, all you have to do is install it with npm, then import the bootstrap stylesheet from your node modules. It doesn't have the tooling that Tailwind does, but to use it, all you have to do is start referencing the classes in your component. App. It's simple, effective, and has a minimal learning curve. However, if you're only using the bootstrap style sheet, you might find yourself creating your own components app, to wrap those styles in a way that can be efficiently used with other components, like you might have a bootstrap button component to avoid repeating the same class names over and over again. N. Another problem is that using Bootstrap like this will result in a large bundle size, because there are a lot of unused classes that will get included in the final SCSS. When it comes to React, a more tightly integrated approach is to use a full blown component library. There are ones that already do that for Bootstrap, but the React ecosystem has many other design systems that you'll wanna check out. An awesome one I've been using lately is Mantine. Not only does it handle much of your CSS, but it provides a ton of utilities to handle things that you would otherwise have to do in JavaScript as well, like hooks to use the intersection of server API to know when an element app, it is visible. It also has tools to manage modals and notifications, calendars, and a ton of other stuff. Now, libraries like this tend to be fairly opinionated, So make sure to choose one that you really like. Other ones worth checking out are Ant, Material Design, rebase, chakra, and tomaguie. That's not a complete list, so let me know your favorite library in the comments. Congratulations. You now know 7 different ways to deal with CSS and React. App. Keep in mind that you can mix and match all these different techniques to use whatever works best for your application. If you wanna learn more advanced concepts with full project courses, app. Become a pro member at Fireship IO. Thanks for watching, and I will see you in the next one.
The benefits of learning CSS in React apps include low error rates and scalability, with the ability to use CSS modules and import and override it. Different language options are discussed, including JavaScript and the ability to write CSS in a different language. Different options for building mobile apps, including style tags, utility class library, and full blown components are discussed, with the benefits of a full blown library being highlighted. Viewers are encouraged to check out other popular CSS frameworks and be advised of the benefits of learning in a different language.