I usually handle css in 5 stages: - Denial - Anger - Bargaining - Depression - Acceptance

I feel like everyone says plain CSS is super long/hard/repetitive, but since I've mainly used plain CSS/SCSS from scratch for my small applications, I've found it to be like second nature. I loose more time trying to play around with tailwind and bootstrap columns than just writing two lines of CSS. Custom properties also made it super easy to change and scope dynamic values, even using JS.

Wow, I literally just walked out my room because of my rage about CSS and received a notification about the video 😂 Let’s try again haha

I'm impressed how Jeff managed to present a very heated topic in an unbiased and didactic way.

many people love TailwindCSS. But looking at that class list for each div gives me chills. That looks really unreadable.

love this rundown. Sometimes it is hard to keep track of the different options but a nice concise breakdown like this is super helpful

Css is essential to learn, even if a css library is being used. It will be like using react without knowing javascript. And unlike javascript libraries and component libraries, css libraries dont bring to much advantage over plain css. mb-5 is not easier and not more clear than margin-bottom: 5px. That being said css libraries are helpful but they doesnt eliminate the need to learn css which will take the same time.

This channel never stops giving me what I want

I’ve recently been using headless components from Radix and then styling myself with Tailwind… it’s a nice way to ensure you have accessible components that you have complete control over visually.

So glad to see Mantine getting some exposure! Been using it for a while now and really love it. Also, tailwind is awesome too!

Great shoutout for Mantine! Definitely my favorite so far. And the creator is suuuper helpful on the discord

I just love the way you use images to illustrate your videos .. from the first Homer opening the window to the last caran d'ache pencils, you really hit why I like and how I view frontend programming.

I would love to have a video where you do a comparison between all of the React component libraries: Ant design, Chakra, Mantine, etc. Like something which shows what components are available in each of them

On React with Next, I like to use styled components from the Material UI library. It provides a theme object to components built with it, including styled components. Really helps me keep my styles consistent.

I only recently got in CSS-in-JS frameworks like styled-components because of the project we were working on and at first it was really confusing. I was surprised just seeing CSS within js files and I was muttering under my breath in some judgemental fashion. I always separated my CSS from my JS like how any natural developer would but as I worked on it more I started to like it more. It's such as nice tool for a lazy person like myself because I don't have to worry about importing and worrying about class names, constantly switching between my CSS files and my JS files. It does have its downsides though, especially on a micro-frontend setup. Had to solve a weird bug which was caused by class name collisions. Had to explicitly add a name for my CSS ruleset just as a stop gap solution but it's best to configure styled-components with namespacing in mind

I use Chakra UI. Essentially, it's a combination of Tailwind CSS with pre-build components and accessibility problem solved for you. IMHO it's lot better than options like Material UI which I was using before. With Material UI all is good till you wanna use prebuild styles. In case, if you want to customize something you will find yourself pulling your hair understanding it's internal styling. The good thing about TailwindCSS and Chakra UI type frameworks is they provide building blocks for composing custom look components without all the hassles of raw CSS.

There's also what Vue and Svelte do, where you get to keep your CSS in the same file as your component without needing to JS'ify it. This is by far my favorite approach, and you can use preprocessors as well. "No one uses native CSS" supposedly, but with CSS variables having great support and CSS Nesting being explored for the official spec, I'm experimenting with switching to future-native via PostCSS.

As a back end engineer who have a hard time writing CSS Bulma does the job for me. I really recommend it. I just have to write classes in HTML, it has a good component library and flexible enough that all websites doesn't look the same. Couple this with how angular renders HTML its the easiest thing ever

This is the third time I'm saying this but Fireship videos always come at the right time, I was teaching css yesterday and we are about to move on to SASS (which is my prefered way to write css). When building an app with React I used to write css with styled components until I got my hands on Chakra, my life hasn't been the same since.

I missed you talking about Styled Components in the most beautiful way: creating style-focused components with css-in-js having access to all the props and stuff in a really performative and organized way

PostCSS with ordered packages is king. Learn it, play with the order, mess around with it, run tests, get over it and get good at it. That's all anyone needs to know 👍👍👍 I could mimick scss with for/each loops, rem to px, combines all @media queries in order, minify/compress, and color scaling with variables like a boss.

I'm glad Svelte uses something like css modules in a way that makes you focus only on writing simple CSS like in the old days with all things taken care under the hood. Scoped classes are the best option for me at least. While developing on react I use styled components but not really a fan of it.

Dude each of these videos keep getting better I swear! Always top tier quality.

This was much helpful. Thanks!! Most resources out there focuses only on one method and doesn't really explain the pros and cons of other models.

You could use the "@apply" keyword to combine multiple tailwind classes inside a custom class, and you could use that custom class on your html elements thus making everything looks cleaner.

Hey, you're my favourite programming channel by far!! But you completely didn't mention that CSS in JS has a significant runtime cost - which is half the value of Tailwind or libraries like compiled css in js or linaria. I think you could have mentioned atomic css as an advantage as well for some libraries.

This blew my mind 🤯. The more I learn the more I learn that I don’t know. It’s sounds super exciting to get to these libraries as a newbie.

It's a great video Jeff. Keep it up. What a just use is tailwind css & scss for the most parts & I write a little bit of plain css in my own.

Great summary. For me. right now, CSS modules feels like the most convenient approach.

I've been using Vue 3 with SASS as a CSS preprocessor, my go to has been quasar since it's been an all-in-one with it's own classes that nearly mimic bootstraps. It does have it's caveats but it's been a powerhouse when it comes to mobile compatibility, since that's generally what the framework is for, mobile apps. But it doesn't FORCE you to stick with it's norms. Another plus, the documentation is something to be desired in all frameworks.

I was really confused how to organise my css for Next, thanks for reading my mind yet again and helping out

Very informative video, more then usual. The approach of going from simple to complex works very well here !

I prefer writing Vanilla CSS because it gives you 100% customisation and I keep code snippets of CSS for components for future use to develop faster.

I always use css modules, they are so straightforward and simple!

I love CSS modules for the scoping and then using styled jsx for the conditional rendering logic inside components such as buttons.

Thumbnail of this video: so dark yet so accurate. Love it.

This is the one time I'll respectfully disagree with you... I use pure CSS on a daily, our Enterprise apps are styled using it, and I'm grateful for it. I understand exactly what the previous developer meant to do, and when I had to migrate the monolith to the cloud and rebuild it's components it was easy peasy

For larger projects Material-UI is great - themes, styled components, JSX and all that can be used on top of pre-built components. For smaller projects tailwind is fastest way to go, but i find myself lost sometimes. Styled-compoents and .css still keeps code clean, css files are small and you can render styled conditionally easily, only problem is that you have to write stuff manually, which is kinda slow, but scales well.

Thanks for recommending Mantine, it looks great and I'm excited to try it out in my next project.

I use Styled Components as you can write css in an old fashioned way but the futuristic thing about it is that you can pass props to your styles which makes it much easier to style the components using states

I always wonder why people keep pile-driving CSS? It's pretty easy to use, is pretty unopinionated , allows for theming via custom variables, responsiveness is more or less baked in if properly using grid, flex, logical properties, scoped variables and relative units reducing the need for media queries substantially. Also the in view specs such as layers, subgrid and nesting will just make CSS sexier

I am definitely in the camp of "Learn visual/UX design principles. Then apply that knowledge to learning basic and advanced CSS strategies." The cascading effect of CSS is what gives it the strength to write verbose design systems that pair well with component-based web projects. Embracing this is the reason why most web projects I inherit result in reducing the CSS bundle by >90% while also reducing responsive visual bugs.

The way that Svelte does it makes the most sense to me personally. Module-scoped selectors, but simply written in CSS. If you’d want to add a preprocessor, it’s a single npx script. It changed the way I code!

I absolutely LOVE MUI, I want to branch out and learn other libraries and frameworks, but there developer experience and conventions I've subscribed to are just, chef's kiss

I'm a big proponent of plain CSS to maintain clean markup and semantically meaningful classes. A pre-processor like Sass can be a great tool though for larger projects, making organization much easier. Libraries and frameworks lead to unintelligible markup in your templates, and while I'm sure they are relatively easy to learn, you end up learning something that's project-specific rather than applicable to basically anything like plain CSS is.

Big fan of MaterialUI, glad you mentioned that one. The other component libraries look super cool as well

@1:17 love the text overflowing out of the container! Clever, cheeky. I, also, have more important things to do than figure out what's !important

Mantine looks pretty cool, might learn it right away even though I don't need it at the moment since most projects I am working with are using either Material or Ant Design lol. Thanks, Jeff!

After I switched to tailwind I tried to use a lot of UI libs and I had a feeling as if my hands were chained, I could not feel the same freedom as in tailwind, every library dictated their own rules and own ways to change the built-in UI component. Recently, I tried to use Chakra UI and it is the best UI library IMHO. It is a combination of tailwind + some pure pre-styled UI components. Chakra doesn't dictate to you how your UI should look, instead, it gives you the freedom to change every property of the component as you could do with the tailwind. Moreover, it provides you with extra helpful hooks for react projects.

I've found tailwind to be a great process. Easy to learn and styling time goes so quick

A beautiful new UI library I found is NextUI. It's still fairly new and is missing some components, but it's just gorgeous.

My favorite CSS Solution is now Tailwind CSS && DaisyUI. I'm very, very happy with it, because it does everything I want.

Love your timing I was literally pondering if I should learn tailwind because I ended up making way too many css files using the css modules method (literally one for each component). I do think the problem of bloating the jsx will only be an issue at the component level but I''m sure the page JSX will be way cleaner, However I do fear my stack is getting out of hand at this point

The perfect combination of all those methods can be achievable with Vue and it's so dead simple. You can write scoped styles in the component file with whatever preprocessor you want and can inject values without pain. It's so good that I can't write with React anymore. It's so primitive regarding this.

I always give a like before watching and never regretted. Keep the good working

You killed me with the intro. That blinds scene is the perfect representation of how it feels to deal with CSS. 😄

The company I am working at uses StyledComponents. It is a bit hard to shift your way of thinking to it at first (coming from plain css) But once you get used to it.. you have a very powerful tool, css and web dev just become way easier

If there could be one tip I wanted to give you being a 12yr experienced full stack dev who started with frontend, that would be: LEARN FLEXBOX. Yes, things like bootstrap and tailwinds are crutches. Don't use them. Use your own classes, you will be a winner. Also, WHAT YA SAY HUH WHAT YA SAY?? NEXTJS HAS TREE SHAKING BRUH... Sure, but still it is a crutch. Take the challenge instead. Code your next project in pure (s)css with global and modular styles. Trust me, your life will change.

👏🏼⚡️👏🏼 - great to see you take on CSS this way Josh. Virtually everyone complains that it’s too hard. It’s not. Personally I’ll write my own utility classes (often mimicking utilities from other frameworks) in SCSS. Being a Nuxt/Vite guy the recommendation is using PostCSS and CSS modules. Great for treeshaking; however, new CSS 4 nested selectors require a bit of tooling. Therefore it’s not quite ready for a production ready application. My $.02! Got anything in the works for PostCSS/Vite?? Gratzi!!

I use materialize css ,i admit sometime i have to write plain css for more custom look,but for most of the part it gets the job done!

Jeff, thank you for this amazing content my man! Literally killing it every single video, GOAT!

DaisyUI is a great set of components that can help reduce the amount of classes you use with Tailwind. It's super easy to install, super customizable, and has a ton of premade themes built right in.

I always just Rock Paper Scissors between sass and Tailwind. Love both and I’m happy using either or.

This man can read minds, spent hours today bashing my head against the wall with the CSS for a frontend mentor challenge.

What changed my life and allows me to manage large applications in plain CSS or just SASS is changing the way I format CSS. Instead of the usual format where every property has its own line, I put all the properties on a single line and reserve new lines for the selector blocks instead. This collapses blocks from being property focused, which is only marginally useful for finding and editing properties and instead is _structure_ focused. This makes visualizing your css as a structure much easier and allows you to maintain much tighter control over it. Additionally, I namespace my component sass files by coupling the class names of my components to the CSS. It isn't a perfect solution because utility blocks used by many components need to either be in their own files or be repeatedly included into the namespaced files; but in practice I don't find this to be much of a problem. For some reason web devs like to do this cycle dance where we move from coupling everything together in the same documents to decoupling everything to maintain separation of concerns and back again every 5-10 years. I prefer to keep everything separated. I don't want my HTML in my JS and I don't want my CSS in my JS. I want them all separate. I'm looking forward to five years from now when everyone is writing web components as if they are little flat websites that _run_ in a frontend framework like that framework is a browser and we're all - once again - writing separate JS/CSS/HTML files.

honestly, with css I've found that the easiest way to handle everything is to do literally everything with absolute positioning and vh/vw, which allows me to design a site that can scale very well and there are zero unknowns.

This video comes exactly at the right time! It's as if you read my mind

You posted this video just in time, because I was just about to create my own design system for React! 😆

Finding your favorite CSS library is like finding your soulmate. In that I have found neither.

I personally love styled component due to its nature as we can use it react js and react native aswell, this helps a lot when developing an app and a web app as we can literally share all components without worrying about syntax changes. Love your content btw 🔥

You are such a life saver..thanks for the great content

css modules, flex, custom properties, and specially grid, makes css a lot of fun and organized. you need nothing more than that.

I don’t write css, I write tailwindcss classes. Thanks for telling me about tailwind in the discord sidebar video it’s so much quicker!

We might as well switch to Svelte because all these issues are addressed there already and don't need extra libraries. Also, it's much more easy to use. CSS in Svelte is scoped by default, you don't need to write extra files, and it's easy to make styles dynamic as well (for example by binding classes to boolean values, by adding classes whose names can contain JavaScript expressions, or by adding CSS variables which contain JavaScript expressions).

I working as web dev more then 10 years. The best way i found for me is SCSS module from "npm i sass" and styled-components. For static and shared styles i use mixins and functions, for dynamic styles i use provider from styled-components with my custom theme managment solutions. SCSS is shared between components (about 90% of css code), and dynamic styles suchs colors, borders, fonts, bg colors etc are provided through styled-components. In another words, i use pre-styled Componen with scss file, then i use it like const StyledComponent = styled(Component)`color: ${({theme}) = > theme.cardColor}`

Using styled components for all my current work projects I don't think I'll be using anything else for a while, its really great. Was using sass and less etc in the past, but its not even comparable to me.

Tbh I don't understand utility class libraries. I feel like they add a lot of bulk just to make something that usually ends up looking pretty generic. If the utility classes are specific enough to make something that looks unique, just use CSS/SCSS

I only work with tailwind these days, keeps the bundle small, keeps things simple and maintainable. It's the best tool I found to prevent developers from introducing their own vision of CSS into our projects. I'll even go further and say that custom CSS should be avoided as much as possible.

I needed this video.. Thanks Jeff. I will definitely try Mantine

Tailpile is another really solid way of doing using css now. Keeps all the tailwind stuff in separate files and lets you use your own classes.

Table of contents! 0:40 - Global CSS 1:16 - CSS modules 2:04 - Preprocessor (SCSS) 2:42 - CSS-in-JS (style="{}") 3:12 - Styled JSX (Next.js) 3:42 - Utility classes (Tailwind/Bootstrap) 5:22 - Component library (Material UI)

Correction: Tailwind does have a way to make bunch of utility classes into a single named css component. Great for making design prototypes fast. Been writing plain css for 7 years when doing web dev as a hobby, I was scared to dive into the css frameworks. Though not a problem since I can write and organize my css classes. Discovered bootstrap and used it for sometime and found myself overwriting the damn thing for every project. Which further improved my plain css writing capabilities. Stumbled upon tailwind on some youtube video, tried it and never looked back.

Very handy at this very moment. Thanks, master!

I think you should mention that on the runtime css preprocessors are using their own thread, while css-in-js renders on the same thread as js, which gives a small winning edge for css / sass / less when it comes to app loading time

Recently chosen the tailwind for my client project, one of best decision ever. Otherwise only god knows how much time I would've spent in developer tools, trying to fine tune the styles by pixel by pixel

That part with Peter trying to fix the blinds is too dam accurate; that's exactly how working with CSS is.

I wish this video had come out 1 week ago... would've saved me so much trouble with trying to make dynamically styled svgs

CSS modules with PostCSS is really nice and straightforward.

I did full stack development until about 2 years ago when I switched to game development and c++. Literally best decision I’ve ever made lmao

I think that decoupling HTML and CSS from JS is a good thing. Especially when you have dedicated HTML coder in your team, who you could address all the styling, while working on business logic yourself. And in general HTML-in-JS, CSS-in-JS and JSX just don't look good for building enterprise applications in medium or big team.

I've only tried AntD, ready to try material next!

thank you thank you, currently looking for alternatives for chakra that ive been using lately

Hey what icon-package are you using in vscode? They look cool.Btw great video

I don't understand why Angular isn't more popular than or as popular as React.. This module css he talked about, comes prebundled with Angular and I cannot imagine creating an app without the said scopes and modularisation!

I use small webpack bundles. Each component brings it's own js (with babel for compat fillins) and scss, templating is done server side with twig in php. If a bundle needs another I can import it. Most of my own components load some global variables for basic settings. Getting up and running is easy, tidy and quite efficient. And I also can do tree shaking that way. But I don't do SPA so my point of view is different.

Tailwind and react functional components makes developing speed up a ton, recommended!

i love css, i don't understand why everyone finds it so hard. i've tried react before and i just don't get it. im sticking with all vanilla

Css is the easiest thing to learn. I've been hand-coding stylesheets for 10+ years and it's never bothered me or taken too long to modify an existing css file as needed

Tailwind/Windi is the best thing, absolutely recommend Learned something new about writing inline programmatic css with jsx styles

CSS Vars + SCSS + custom stylesheet = perfection and light weight builds