7 ways to deal with CSS

[@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.

[@GammaWraith]

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.

[@OldAlexCat514]

Congrats your a css wizard, ask for a great salary

[@rand0mtv660]

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.

[@i.mahdihosseini]

It's great when you work alone, I use plain css for my own projects, others always want bootstrap or tailwind

[@CyberTechBits]

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

[@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

[@blu5175]

@@notyourbusiness2672bro commented on a yr old comment talk about salty 😂

[@petrsehnal7990]

Cell phones are listening!

[@hanna_commits_tax_evasion]

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

[@liangel7785]

Same 😂

[@rishu_rvlogs5113]

🤣😂🤣🤣🤣🤣

[@kaibe5241]

I don’t handle it anymore. Tailwind CSS all the way.

[@mjs28s]

@TheMysteriousUnknown 2821 You forgot about animal sacrifice.

[@witherin-_-3712]

@@kaibe5241 i find taiwind very messy hard to navigate around any tips?

[@fgsaldanha]

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

[@strangelpeaceful]

/sarcasm

[@oumarh.gassama8063]

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.

[@ishaquesurya4572]

didactic, that's a new word I learnt today, thanks.

[@overlisted]

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)

[@elieanimations]

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.

[@wekios]

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.

[@kissu_io]

Naming is hard, hence why mb-5.

[@elieanimations]

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

[@wekios]

@@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.

[@theonewithoutidentity]

@@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;".

[@connorpemberton978]

This channel never stops giving me what I want

[@yashkhd1100]

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.

[@codeaperture]

I'll check ✅ I use tailwind

[@Brandon-hd4vg]

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.

[@Ctrl_Alt_Elite]

@@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

[@FalconTheFries]

Material UI for quickly building an app, but chakra ui if you want ti customize stuff

[@daleryanaldover6545]

Material UI is just Bootstrap but just Googled.

[@AkshayKumar-kz6zh]

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

[@russtran]

You can mix between tailwind and pure css/scss

[@untlsn]

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

[@spektred]

I'm glad I'm not the only one who cringed when seeing that.

[@andresalejandrogarciahurta5856]

It looks absolutely disgusting!

[@TwoLeggedTriceratops]

Someone should make a Tailwind extension for IDE to collapse them via shortcut key.

[@twinconceptsdesign]

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

[@ranDOMreSERVEaCCount]

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.

[@embo_5787]

@@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

[@Spookyhoobster]

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.

[@iAmTheSquidThing]

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.

[@marcelolupatini5553]

​@@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.

[@FaisalKhan-iw6tw]

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

[@manuelgamez8074]

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.

[@Kyle-xk2rb]

svelte yay

[@hgsbrodi]

Manuel, why arent you a fan of styled components? Just curious

[@charlesm.2604]

@@hgsbrodi It's an overkill to create every single HTML element as a component itself.

[@charlesm.2604]

@@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.

[@woofiewill]

@@charlesm.2604 If you think every single HTML element is written as a component, you're doing something wrong

[@Supinpa]

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

[@antoineweb1]

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

[@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.

[@martiananomaly]

This.

[@vicca4671]

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.

[@vectoralphaSec]

Lol yeah. Why do most people not do this?? I literally have a txt file with CSS components ive built on my own as time goes by using pure css to build my projects. I create a style that i really like and just copy paste it to the css txt file for future use.

[@wemusthavechannelstocommen619]

very nice

[@tarirocoffee5026]

Once you master vanilla CSS, create your own snippets it is fast and clean

[@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

[@MaxTheFireCat]

There are too many it'd become a headic

[@codinginflow]

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

[@MBK90210]

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

[@FormaxLt]

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

[@stevencruz978]

This, except I prefer CSS modules. Screw frameworks

[@TheHaughtsauce]

Try tailwind, you'll change your mind.

[@daleryanaldover6545]

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.

[@nnamenearinze6086]

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.

[@untlsn]

Unfortunately, this has one disadvantage. It bundle the entire tailwind @apply into one class

[@tomrowe2181]

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

[@daleryanaldover6545]

@@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.

[@ThaJay]

Just build reusable components instead

[@atg1203]

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

[@subashsapkota7223]

simplicity is the ultimate sophistication , plain css is best !!

[@joshuamccarthy9250]

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.

[@naimas8120]

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 😢😢😢

[@adityapandey1329]

Why not simply use tailwind?

[@rajikkali2381]

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

[@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.

[@braden-wong]

This, absolutely love Quasar and have been using it in my personal projects

[@flannelbeard4621]

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.

[@Lord_zeel]

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.

[@Andrey-il8rh]

How do you connect plain CSS to a design system?

[@gadget00]

I swear by Bootstrap; dont know what to tell you LOL

[@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

[@robertwallace5498]

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

[@vinayakgosale8470]

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

[@drizzletone9148]

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.

[@emerazea]

100%

[@charlesm.2604]

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.

[@RiadDZz]

Vue is just so underrated

[@charlesm.2604]

@@RiadDZz It's one of the biggest projects on the entire GitHub website bro.

[@LtdJorge]

@@charlesm.2604 Underrated in terms of real world use.

[@realquincyhill]

Best thing I ever did was switch to tailwind. The fact I don’t have to worry about naming css as well as the speed of rapid prototyping does it for me.

[@JeyPeyy]

Exactly. It's funny how there was this dogma around "semantic CSS" and "separation of concern" which everybody probably knew deep inside never really worked in larger scales (because naming is hard). With component based frameworks, nobody actually cares about the separation, so it makes absolutely no sense. I love to just stay in the same file and just think about how I want the component to look without thinking about relevant names.

[@realquincyhill]

@@JeyPeyy yes, component frameworks is where it really shines the most, I use nextjs the most I think people are still stuck on legacy thinking, i'm simply trying to be more productive as well as focus on scalability and this stack does a great job at it.

[@ChristofferLund]

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

[@Krzysiekoy]

I hear so many people people saying stuff like: - CSS is so difficult - CSS is so weird - CSS is so painful - Oh man, the cascade and specificity are so confusing! - BEM? Don't even get me started! - Plain CSS? Yuck! I get the sentiment but I'm so glad I've learned to embrace CSS for what is it, and that I can actually understand it, and that I don't have this immediate gut reaction. Even when when you are using some fancy CSS library, it is super useful to know the baseline, just like it is useful to know plain JS when using say React. Having said that, I am super fucking potato terrible with anything to do with UI, or even with "things looking not ugly af", so thank god for all these CSS tools like chakra, material, tailwind and what not. Also, reading comments, other people made a good point: you can be very good at CSS and understand it deeply, but other people that you work with may not. So using some sort of lib/framework is probably good idea to at least get everybody on the same page. Also for tailwind and your html being bloated with utility classes - I don't know if this is a standard practice for tailwind folks but you can move all the utility junk into your own css class via apply, like so: .select2-dropdown { @apply rounded-b-lg shadow-md; }

[@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.

[@lewx_]

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

[@LoveThatSceneChannel]

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

[@miles611]

F in chat for you man

[@carlotadias9335]

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.

[@BlurryBit]

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.

[@Luke1000]

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

[@daleryanaldover6545]

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.

[@geebrox]

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.

[@daleryanaldover6545]

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.

[@Excalibaard]

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.

[@grasshopper3085]

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

[@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.

[@jayman8001]

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.

[@SomeRandomPiggo]

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

[@untlsn]

In large projects, vanilla JS is not enough. And either you accidentally build your own framework or waste a lot of time

[@spektred]

Software engineers find it hard because CSS contains no logic. It doesn't perform any calculations, it uses no variables. All it does is grab on to "hooks" in HTML and apply styling. And on top of that, CSS files and CSS rules cascade into one another. I can see how this can be hard to understand if you aren't too familiar with the cascading order.

[@wellingtonalmeida2662]

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

[@nanotichorizon9644]

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

[@Battery64121]

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

[@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.

[@Jolterix20]

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

[@Utopy34]

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.

[@ImLaminarBro]

I fucking love tailwind. Never going back to sass

[@guillermodanielmazzarigiov1768]

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 ❤️❤️❤️

[@Noah-vm8id]

NextJS and Firebase are the coolest thing on earth, I‘m looking forward to watch this course next holiday. Go buy this course, all of you!😂 (no paid ads, just some words of a 16 year old web dev)

[@adamturaj9611]

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!

[@untlsn]

@@nonono9700 Fortunately, the "tailwind-in-js" libraries are slowly emerging

[@Bekaone]

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.

[@liam-dimpr]

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.

[@umgefahren818]

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

[@adityaxjha]

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 🔥

[@YT69]

Hiyo mr maker of Universal bot

[@mahirjobanputra3864]

Hello Bro Big fan. Live your bot universal. Btw why you left discord bro we need you and your bot. Love from Discord :)

[@SimonCoulton]

CSS modules with PostCSS is really nice and straightforward.

[@DampeS8N]

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.

[@charlesch3ng]

You need a high five

[@miles611]

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

[@th.araujo]

perhaps you'd like angular

[@DampeS8N]

@@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.

[@SoulSovereignty]

Can you provide a link to an example file formatted as you describe?

[@haruxe5140]

This is exactly what I needed right now. Long hours of repetitive CSS work. Thanks for saving me from this hell

[@DannyBPlays]

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

[@gradyrobbins2770]

@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

[@gringo5282]

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.

[@CSkyGameGen]

DaisyUI is so weak tho

[@gringo5282]

@@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.

[@CSkyGameGen]

@@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

[@gringo5282]

@@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.

[@R-Jay.]

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.

[@ScriptRaccoon]

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).

[@angelhdzdev]

Vue: ...

[@DanielDogeanu]

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

[@MiSt3300]

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

[@gytisbl]

loved the CSS/LoadTime metaphor at 1:11 . :DDD

[@ProtonChicken]

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

[@mountainslopes]

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!

[@TheEmperorXavier]

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

[@GammaWraith]

agreed

[@TheNewton]

8th way: just use an tag. Pixel perfect one liner everytime. A technique so fast to learn it can fit in an elevator pitch.

[@o-manthehuman7867]

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.

[@IngwiePhoenix_nb]

"You end up using !important a lot because you have more important things to do than figuring out hwo to not use !important." KILLER LINE! So, sooooooooooooo true!!

[@angela_jx]

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

[@abhisheksingh5896]

How did you switched? Like how did you started out in the game development projects?

[@Jeremy-jw7qb]

What was bad about web dev

[@angela_jx]

@@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

[@angela_jx]

@@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

[@abhisheksingh5896]

@@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.

[@externals1]

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

[@tender.branson]

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.

[@daleryanaldover6545]

Just what I thought as well. Looking for a specific css class on a jsx file would be a nightmare for big projects.

[@Lord_zeel]

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.

[@JawsoneJason]

@@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.

[@aseevtech]

@@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.

[@JawsoneJason]

@@aseevtech Modularization in pre 1.0 is the same. Read up on it sometime.

[@rankarat]

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

[@therealmunyaradzi]

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

[@Andressuquaz156]

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

[@sicario55]

Re Tailwind... If it starts to get too bloated palm it off to a custom utility class & keep moving forward.

[@abhishek.rathore]

I too use Tailwind. It is really awesome.

[@daleryanaldover6545]

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.

[@S_O_O_C]

I'm the main Webdev at my company, and i just completely dropped out of CSS libraries by now. I resigned to only have two requirements for CSS: - Component scoping; The Datepicker "list-item" ain't gonna conflict with the "list-item" of the parent that loops the elements. - Classes only: We keep it simple. Always use divs and nothing else, no id's, no specific selectors, just css classes. SCSS is a nice addition if provided by the framework, but for most enterprise apps that have a design already more-or-less done by a designer, using a CSS framework for implementing that will just slow you down if the designer didnt already have that framework in mind. Just make sure the mess your CSS will eventually make to conform with the growing list of requirements for your component will not affect any other parts of the page ever, and don't look at it again until you have to.

[@segfaultii]

4:25 "It is a big commitment and you'll have to learn how to organize your code properly." You have to do that with plain CSS as well. Skip the pain of wrangling tailwind and just learn css.

[@jonasc3150]

I just got paid to develop a complete responsive website just with plain html/css/js. Cause it was crucial, that you can load it on any low end device everywhere in the world. There is nothing faster than write it with the basics.

[@droctogonapus1223]

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

[@masdaug]

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

[@daleryanaldover6545]

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.

[@dave-7117]

Im using svelte and it's scoped by default behavior is just amazing. Writing the css right next to your html is just awesome tbh. And for quick development just stick in tailwind and you are rocket launching your project^^

[@sontiyo7113]

when using tailwind, whats the benefit of sveltes automatic scoped style tags? i use tailwind inside all my next projects and love it, recently been dabbling in svelte and curious

[@dave-7117]

@@sontiyo7113 no major benefit regarding tw and sveltes scoping, it's just the simplicity that makes me like it so much. Just plays so nice together

[@Chiefsosa17]

Tip: if you're having weird behaviors with an element, like some random property not applying, always try applying one of: display: block; position: relative; Of course, don't just make it work, but also Google why that property affects it.

[@flannelbeard4621]

Great tip.

[@rand0mtv660]

Firefox dev tools will tell you why some properties aren't being applied on an element you are inspecting. For example if you try to set width on an inline element, it will tell you that it isn't applied because element is inline and to try setting it to inline-block or block. There are other cases as well where it will give you that information.

[@Chiefsosa17]

@@rand0mtv660 yes, Firefox is by far the best browser for debugging CSS.

[@sebinohoo2979]

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.

[@tanmaymishra1109]

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

[@dipsagungurung4553]

I think its: vscode-icons extension

[@tanmaymishra1109]

@@dipsagungurung4553 Thanks

[@BHVampireLF]

CSS is beautiful, I spend more time dealing with style frameworks than writing CSS from scratch. I even have my own CSS libraries that I improve in every project.

[@rpb4865]

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!

[@mrocto329]

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.

[@Wako_san91]

Hadn’t heard of Mantine before. I really like the sound of it

[@mat-tr-ez]

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.

[@beinyourguard]

I legit chuckled when I saw the "This is some BS" button at 5:10.

[@spektred]

Oh for the love of God. It's crazy to me that software engineers actually think these solutions are easier than just writing plain old CSS. I've worked as a front end developer for years and I originally learned the cascading order and specificity a long time ago and learned it well. I can remember many times when software engineers would just give up and frustratedly hand over their CSS code to me (the front end guy) to fix. But nowadays all of those programmers have what I call "training wheels" to help them along.

[@mmmikem]

Yea until you realise working at scale you can end up with btn being referenced 200 times in your CSS. These technologies are trying to improve on plain CSS for a reason, try look past your gate-keeping and see the value.

[@spektred]

@@mmmikem I see the value for other people, it's just never been all that valuable to me personally. I have written CSS files for websites with tens of thousands of pages, no need for anything other than plain old CSS. The tradeoff? I'm not a software engineer like most of you guys are.

[@protocode_227]

@@mmmikem working at scale you have a UI focused team, which writes proper BEM classes for your codebase

[@mmmikem]

@@protocode_227 maybe 5 years ago. Thankfully things have evolved since then.

[@mmmikem]

@Deborah Hearne sounds like you've never worked on a big team building an enterprise app.

[@arcade8078]

I love how Nuxt comes with solutions to all of these problems out of the box. And setting up Tailwind with it is as easy as selecting it during the application setup process.

[@ParthaSarathylink]

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

[@phucnguyen0110]

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!

[@RendallRen]

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.

[@groovebird812]

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

[@antheus_s]

Great vid, like always reading our minds. Could've lived without that fish carcass on the scale though.

[@prowhiskey2678]

my favourite: quite strict BEM that is organised in component files that are written in scss to compose tailwind classes into custom components

[@sometimes1]

Bro I'm learning more from you than in my college, just goes to show that some colleges are waaay outdated in the technologies.