7 ways to deal with CSS

#css #javascript #webdev

🔗 Resources

🔥 Get More Content - Upgrade to 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
CSS modules tutorial
How to use CSS-in-JS
Best component libraries for react

[exotium]

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

[jakeave]

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.

[rubenuijtde]

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

[fgsaldanha]

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

[AkshayKumar-kzzh]

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

[atg]

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

[robertwallace]

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

[connorpemberton]

This channel never stops giving me what I want

[MerlinMason]

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.

[dominicanfrankster]

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.

[carlotadias]

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.

[ifelseprog]

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

[mudanenadaara]

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

[Battery]

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

[yashkhd]

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.

[codinginflow]

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

[emerazea]

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.

[dazzlerkumar]

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.

[LostInAutism]

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.

[manuelgamez]

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.