7 ways to deal with CSS
Вставка
- Опубліковано 4 чер 2024
- 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. fireship.io/courses/react-nex...
#css #javascript #webdev
🔗 Resources
NextJS CSS docs nextjs.org/docs/basic-feature...
CSS Modules github.com/css-modules/css-mo...
SCSS Docs sass-lang.com/documentation
Mantine Library mantine.dev/
🔥 Get More Content - Upgrade to PRO
Upgrade to Fireship PRO at 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 - Наука та технологія
I usually handle css in 5 stages:
- Denial
- Anger
- Bargaining
- Depression
- Acceptance
Same 😂
🤣😂🤣🤣🤣🤣
I don’t handle it anymore. Tailwind CSS all the way.
@TheMysteriousUnknown 2821
You forgot about animal sacrifice.
@@kaibe5241 i find taiwind very messy hard to navigate around any tips?
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.
If you use it from scratch it is easy. If you use it in an existing application where 50 devs touched it, each with different css knowledge, it is a nightmare.
Congrats your a css wizard, ask for a great salary
If you work alone, then it's easy since you write things any way you want and you own all that code and you know where everything is and how it works etc.. Enforcing a team of developers (even just 2-3 developers) to do the same is way harder.
It's great when you work alone, I use plain css for my own projects, others always want bootstrap or tailwind
I agree! CSS is not that difficult IMO...once you understand it the only way to develop is do it myself. sass can speed it up a bit, but Im a purist...once you know it it's just too easy to go back and learn all these other packages. Maybe Sass and tailwind would get my upvote
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
@@notyourbusiness2672bro commented on a yr old comment talk about salty 😂
Cell phones are listening!
I'm impressed how Jeff managed to present a very heated topic in an unbiased and didactic way.
/sarcasm
The ability to completely sidestep the religion factor in a religious debate is a gift from God.... oh, wait... 😀 But setting my petty jokes aside, yes, this video was really a didactic and helpful summary.
didactic, that's a new word I learnt today, thanks.
many people love TailwindCSS. But looking at that class list for each div gives me chills. That looks really unreadable.
You can mix between tailwind and pure css/scss
I have same thing when I started working with tailwind. But after a while you get used to the block of text and easily find what you need
I'm glad I'm not the only one who cringed when seeing that.
It looks absolutely disgusting!
Someone should make a Tailwind extension for IDE to collapse them via shortcut key.
love this rundown. Sometimes it is hard to keep track of the different options but a nice concise breakdown like this is super helpful
This channel never stops giving me what I want
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.
Purpose of a mb-5 is not to use it once and forget about it. Writing mb-5 once and then using it at 10 different places is much simpler than writing margin-bottom: 5px at 10 different places. Utility classes are all about css, they are just a style of writing regular css.
Naming is hard, hence why mb-5.
Sure its not wrong. The idea is what if an element has top margin of 5 px left and right of 15px bottom of 10 px. Its a flex component with justify content space between and align items center. Plus if has a border and shadoe and etc. The idea is that these cases where a lot of css properties are needed it become more messy than writing a class. Another approach is to only add simple utility classes and create custom classes for other things, but now the element is being styled from 2 places which is a whole new mess
@@elieanimations if it becomes unreadable you can always extract it into a component and not use utility at that instance at all. More than often you will have the other scenario, where you need only minor adjustment. Sometimes using BEM can produce larger class names, especially if adding a modifier. It's a trade-off and like everything in software development, it depends.
@@wekios If you remember that while using Emmet autocomplete you can just write "mb5" in your stylesheet, then hit TAB and it will actually write "margin-bottom: 5px;".
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’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.
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.
I'll check ✅ I use tailwind
people say material ui is hard to customize and I never understood that. It is really easy to override the styles, you can even do it in the theme configuration now. I feel like people who say this were basing their opinions on older versions where it was harder to override. I would definitely recommend MUI in its latest version. The docs are great and upgrading isn't too big of a deal because they provide migration scripts.
@@Brandon-hd4vg I'm working on a personal project in MUI v4 atm (because that's what I started it with) and some parts of it have been a nightmare to work with. I tried using Grid for web page layout but it's better used for smaller features imo (like lists). It has a bit of a learning curve and the v4 docs weren't amazing but I do see the benefits it brings. I find layouts easier to markup my self than using the Grid component lol. Grid feels like visual clutter when you start passing a lot of props
Material UI for quickly building an app, but chakra ui if you want ti customize stuff
Material UI is just Bootstrap but just Googled.
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
There are too many it'd become a headic
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 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.
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
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.
svelte yay
Manuel, why arent you a fan of styled components? Just curious
@@hgsbrodi It's an overkill to create every single HTML element as a component itself.
@@z3rocodes Svelte doesn't support CSS modules out of the box, it's much more like Vue scoped and styled jsx had an affair. You write your styling in your component file and during compilation svelte will give an unique class to your component so that the styles will be scoped to that class.
You can use preprocessors and it doesn't impact code splitting.
@@charlesm.2604 If you think every single HTML element is written as a component, you're doing something wrong
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
Dude each of these videos keep getting better I swear! Always top tier quality.
Great summary. For me. right now, CSS modules feels like the most convenient approach.
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.
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.
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.
Unfortunately, this has one disadvantage. It bundle the entire tailwind @apply into one class
The biggest benefit of tailwind is understanding the styles of a component without leaving the html
It can be difficult to get used to, but hiding the utilities behind custom classes for "clean html" defeats the point
@@tomrowe2181 the @apply feature was introduced for multiple components that uses the same bunch of small utility classes. Having too much classes on html affects render/loading time of a page apparently, specially on a server side render. I think it is a worthy compromise for having to leave the html file in order to check a custom class in a separate file.
Just build reusable components instead
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.
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.
This.
I second that. The more you write CSS, the more containerized components to build UI you'll have. Better yet, if you took your time to write them in a reasonable way, the more you'll know their ins and outs and the more they'll be reusable.
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.
This, absolutely love Quasar and have been using it in my personal projects
I was really confused how to organise my css for Next, thanks for reading my mind yet again and helping out
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.
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
I mean, I do agree with you but css modules for example make everything so easy. For me, this is the only extra tooling that I actually need because it improves my workflow tremendously but I guess we all can't like the same things
This, except I prefer CSS modules. Screw frameworks
Try tailwind, you'll change your mind.
With tailwind I only ever touch my css file when merging utility classes into a single custom class or creating a custom class for a complex layout that is not defined in the framework. I write in plain CSS for 7 years and understand best practices to get faster and efficient in writing plain CSS. But writing with tailwind is much way faster and efficient imho.
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.
I love CSS modules for the scoping and then using styled jsx for the conditional rendering logic inside components such as buttons.
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 always use css modules, they are so straightforward and simple!
I've found tailwind to be a great process. Easy to learn and styling time goes so quick
Having tried different CSS frameworks, Tailwindcss relieved me of the pain of having to override default css styles. It dors not give us built in components and accessibility by default but an experienced dev in CSS will definitely put those utility classes into good use and fast.
Thumbnail of this video: so dark yet so accurate. Love it.
Very informative video, more then usual. The approach of going from simple to complex works very well here !
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.
Big fan of MaterialUI, glad you mentioned that one. The other component libraries look super cool as well
CSS Vars + SCSS + custom stylesheet = perfection and light weight builds
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.
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.
Could you probably reword this comment? I think you are pointing out a very good thing here but I'm way too dumb to understand it completely 😢😢😢
Why not simply use tailwind?
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
Easy to use? Hahaha good one
On a serious note though I think the problem is most people, including myself, didnt learn css the proper way and some time ago where we didnt have all the fancy stuff css has now. And I think everybody knows the frustration of the unintuitiveness some things in css have.
@@ranDOMreSERVEaCCount talk about being non-intuitive reminds me of being stumped why "background-colour" and "colour" properties didn't work... yoU know what I mean?
But jokes aside css is a habit, do it enough and it becomes easy as with most things in life. Thank praise be to Flexbox
When you get to a point where you have nearly a thousand different selectors, written by over a dozen different people with their own opinions, you're going to have a bad time. Humans can't write perfectly well organized code 100% of the time, and you'll inevitably run into more and more visual bugs that get harder and harder to fix.
Hmm. It's got a lot of fundamental flaws. IMO the problem is it was designed for article typography. And it's gradually been hackily extended to try and make it suitable for laying out an entire complex app.
@@iAmTheSquidThing "IMO the problem is it was designed for article typography." If you was talking about CSS, it's a good thing that it is your opinion because it's not the reality. CSS has was always made to you creates the layout and pretty things of a website. Typography? It's just part of it, but not the whole thing. Man, it's even on the name of it: Cascading Styling Sheets. CSS is used to style your website, not only its typography.
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
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
Jeff, thank you for this amazing content my man! Literally killing it every single video, GOAT!
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.
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'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.
How do you connect plain CSS to a design system?
I swear by Bootstrap; dont know what to tell you LOL
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.
Well Chakra was built assuming it would be used in a react project. That is why they have those hooks. Tailwind on the other hand solves the issue most css frameworks have failed to improve upon, which is having a set of classes ready while not being too opinionated about layout and design like bootstrap. Giving birth to the most controversial design principle, utility based classes.
One of the things I like most about tailwind is @apply, makes it really easy to switch from pure utility classes to a component-based approach when needed, also without Chakra.
Utility classes are great during prototyping, but as the app takes shape you'll often find repeated parts that can be made into a descriptive component-style class. Trying to come up with a name for your class while you're still prototyping however can often lead to poor adherence of naming schemes and a lot of ’-wrapper' classes.
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
@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
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.
100%
Well the issue persists with React and Next so this video is 100% granted.
Also if you really want people to switch over their entire codebase then recommend them Svelte ! Having the props and component functions as JavaScript instead of a messy JavaScript object makes the developer experience so much better. That's not to forget about the two-way data binding, native stores, custom events, conditional class directive, animations and powerful templating that make Svelte such a handy framework.
We could talk about speed and bundle size but, let's be honest, if people choose React in their stacks they clearly don't care at this point.
Vue is just so underrated
@@RiadDZz It's one of the biggest projects on the entire GitHub website bro.
@@charlesm.2604 Underrated in terms of real world use.
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
In my experience using tailwind it is rare to asign full paragraphs of classes to a component, usually you just add a line or two, and if you find yourself repeating the same classes over and over tailwind has support to custom components, classes where you apply what you want and can use in all the application. Personally I really like tailwind since I hate to go around making css files and having to come up with meaningful names
Re Tailwind... If it starts to get too bloated palm it off to a custom utility class & keep moving forward.
I too use Tailwind. It is really awesome.
Inline css in JavaScript is really not great imo, the scopes sound good on paper but it spreads out the css into multiple files and on bigger project, looking to modify that single css in jsx component file is a pain. In tailwind just as others mentioned, you can combine utility classes into a single custom class that can be reused and all this can be written in just a single file.
This video comes exactly at the right time! It's as if you read my mind
I always give a like before watching and never regretted. Keep the good working
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 🔥
Hiyo mr maker of Universal bot
Hello Bro Big fan. Live your bot universal. Btw why you left discord bro we need you and your bot. Love from Discord :)
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.
DaisyUI is so weak tho
@@CSkyGameGen Well, yeah. You wouldn't use it on it's own though. It's more of a complimentary library for Tailwind so you don't need to have a ton of class names for basic components like a button or a navbar. That said, it isn't perfect and there's still a ton of improvement that can be made for it.
@@gringo5282 Yeah I mean obviously it's made for tailwind, it's just that everytime I use it I feel like I'm using an alpha version that is not ready yet
@@CSkyGameGen Yeah, it's only a year old at the moment so it's nowhere near what we would expect from a component library, but it's still quite helpful in it's current state.
A beautiful new UI library I found is NextUI. It's still fairly new and is missing some components, but it's just gorgeous.
I always just Rock Paper Scissors between sass and Tailwind. Love both and I’m happy using either or.
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.
You need a high five
Interesting take on the "all in one line" CSS!
Hard agree on the back-and-forth between separating/merging the HTML/CSS/JS. Separate is the way to go
perhaps you'd like angular
@@th.araujo Angular's fine. So are React and Vue. I don't like or dislike any of the major modern JS frameworks. I do prefer plain JS/CSS/HTML, but that's a preference.
Can you provide a link to an example file formatted as you describe?
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).
Vue: ...
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!
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!
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!
@@nonono9700 Fortunately, the "tailwind-in-js" libraries are slowly emerging
Finding your favorite CSS library is like finding your soulmate. In that I have found neither.
F in chat for you man
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.
My favorite CSS Solution is now Tailwind CSS && DaisyUI. I'm very, very happy with it, because it does everything I want.
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.
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
This man can read minds, spent hours today bashing my head against the wall with the CSS for a frontend mentor challenge.
he's making videos about general topics, like css today. He's literally not reading minds, you can't think there is a link between your situation and his choice to make videos about css today, so you can take up your absolutely boring and repetitive comment in your ass
Very handy at this very moment. Thanks, master!
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 fucking love tailwind. Never going back to sass
I feel tailwind is the best, I was building my own design system with sass until I found out how powerful tailwind can be, the heck, you already have a complete design system, and, of you wanted to, you can add in your own utilities (color palette, font family, font size) for each individual project as your own components, and if you wanna be even more "productive" because your not creative or funny have a designer un your team, use the paid tier, they have a bunch of beautiful templates and components, just live tailwind ❤️❤️❤️
I wish this video had come out 1 week ago... would've saved me so much trouble with trying to make dynamically styled svgs
You posted this video just in time, because I was just about to create my own design system for React! 😆
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.
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
I needed this video.. Thanks Jeff. I will definitely try Mantine
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}`
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.
Just what I thought as well. Looking for a specific css class on a jsx file would be a nightmare for big projects.
It amazes me how how many modern frameworks just ignore separation of concerns. Putting your template, logic, and styles all in the same file then splitting your program into a thousand component files is so backward.
@@Lord_zeel Component files are standard to the Web in general now. Check out Web Components.
Also, modularization was an HTML pre-1.0 desire that is only coming to fruition now. So, the is far from backwards. It's just different.
@@JawsoneJason Web Components do not imply mixing unmixable and splitting your code into a thousand component files. It IS very backward. Modularization is not the same thing.
@@aseevtech Modularization in pre 1.0 is the same. Read up on it sometime.
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
How did you switched? Like how did you started out in the game development projects?
What was bad about web dev
@@Jeremy-jw7qb I’m exaggerating of course it’s not bad lol. I just personally find it easier to write and maintain C++ code than js/ts. I just find it more enjoyable
@@abhisheksingh5896 i wanted to learn C++ and I learn the best by doing things so I wanted to make a game engine with it. Just a lot of personal projects and iterations of those projects to get experience basically. Not that I’d say I’m great at it I just enjoy it lol
@@angela_jx That's great! I am a fullstack developer too but I am feeling kinda saturated here. Maybe app development isnt my calling. So looking and trying out other stuffs. Do you have a github or something where you host your projects. Maybe I will get inspired from to try out. I loved c++ in my college time as well.
CSS modules with PostCSS is really nice and straightforward.
css modules, flex, custom properties, and specially grid, makes css a lot of fun and organized.
you need nothing more than that.
Hey what icon-package are you using in vscode? They look cool.Btw great video
I think its: vscode-icons extension
@@dipsagungurung4553 Thanks
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!
It's because React is a library that can be used in many different setups while you have to use angular as a huge framework. I used angular before and, while it was nice to have some stuff out of the box, I didn't even touch 90% of the framework for my projects and it was just overwhelming.
thanks i didn't know about styled-jsx very helpful
You are such a life saver..thanks for the great content
This video didn't mention the best way to "deal with" CSS: to sit down and actually learn it, inside out. I know, I know, this is controversial, but honestly, it will make you better at what you do, and more able to understand the tradeoffs of all of these other systems and frameworks. At the end of the day *all* of these frameworks output CSS, so you had best know what they do.
Good answer but it feels like everyone is using tailwind. I don't understand why. I don't need a template with inline css. You can use @apply but than i can use plain css
my favourite: quite strict BEM that is organised in component files that are written in scss to compose tailwind classes into custom components
Mantine really rocks. Have also been using it the past months :)
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.
I've worked with most of them and in my opinion Tailwind CSS wins hands down.
agreed
That part with Peter trying to fix the blinds is too dam accurate; that's exactly how working with CSS is.
agreed
thank you thank you, currently looking for alternatives for chakra that ive been using lately
You killed me with the intro. That blinds scene is the perfect representation of how it feels to deal with CSS. 😄
I like how we went full circle to end up bringing back CSS to HTML. I mean, WTF
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)
👏🏼⚡️👏🏼 - 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!!
Tailwind/Windi is the best thing, absolutely recommend
Learned something new about writing inline programmatic css with jsx styles