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 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 hundreds of libraries that attempt to make css better but so far there's no universal solution today we'll take a look at seven different ways to write css 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 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 bem 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 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 luckily next.js supports a tool called css modules out of the box to address some of these concerns a css module file 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 two 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 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 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 mixins 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 sas less or stylus than use a compiler to convert that code back into plain css the most popular version is scss which is a superset of 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 sas compiler then change the file names 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 sas is great 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 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 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 programmatic things you can do in sas 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 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 and 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 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 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 that 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 started 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 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 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 of 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 pre-built 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 components 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 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 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 css 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 want to check out an awesome one i've been using lately is manteen 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 observer api to know when an element 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 tamagui that's not a complete list so let me know your favorite library in the comments congratulations you now know seven different ways to deal with css and react keep in mind that you can mix and match all these different techniques to use whatever works best for your application if you want to learn more advanced concepts with full project courses become a pro member at fireship io thanks for watching and i will see you in the next one

Channel: Fireship

Views: 1,034,378

Keywords: webdev, app development, lesson, tutorial

Id: ouncVBiye_M

Length: 6min 23sec (383 seconds)

Published: Tue Feb 15 2022