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

@liangel7785

2 жыл бұрын

Same 😂

@rishu_rvlogs5113

2 жыл бұрын

🤣😂🤣🤣🤣🤣

@kaibe5241

2 жыл бұрын

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

@mjs28s

2 жыл бұрын

@TheMysteriousUnknown 2821 You forgot about animal sacrifice.

@witherin-_-3712

2 жыл бұрын

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

@GammaWraith

2 жыл бұрын

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

2 жыл бұрын

Congrats your a css wizard, ask for a great salary

@rand0mtv660

2 жыл бұрын

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

2 жыл бұрын

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

@CyberTechBits

2 жыл бұрын

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

@blu5175

9 ай бұрын

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

@petrsehnal7990

2 ай бұрын

Cell phones are listening!

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

@strangelpeaceful

2 жыл бұрын

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

This channel never stops giving me what I want

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

@russtran

2 жыл бұрын

You can mix between tailwind and pure css/scss

@untlsn

2 жыл бұрын

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

2 жыл бұрын

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

@andresalejandrogarciahurta5856

2 жыл бұрын

It looks absolutely disgusting!

@TwoLeggedTriceratops

2 жыл бұрын

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

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

2 жыл бұрын

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

2 жыл бұрын

Naming is hard, hence why mb-5.

@elieanimations

2 жыл бұрын

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

2 жыл бұрын

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

@quatricise

2 жыл бұрын

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

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.

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

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

2 жыл бұрын

This.

@vicca4671

2 жыл бұрын

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.

@vectoralphaAI

11 күн бұрын

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.

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

2 жыл бұрын

I'll check ✅ I use tailwind

@Brandon-hd4vg

2 жыл бұрын

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

2 жыл бұрын

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

2 жыл бұрын

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

@daleryanaldover6545

2 жыл бұрын

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

@MaxTheFireCat

2 жыл бұрын

There are too many it'd become a headic

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.

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

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

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

I'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

2 жыл бұрын

svelte yay

@hgsbrodi

2 жыл бұрын

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

@charlesm.2604

2 жыл бұрын

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

@charlesm.2604

2 жыл бұрын

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

2 жыл бұрын

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

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.

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.

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

2 жыл бұрын

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

@tomrowe2181

2 жыл бұрын

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

2 жыл бұрын

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

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

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

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

2 жыл бұрын

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.

@emmm_4465

2 жыл бұрын

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

2 жыл бұрын

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

2 жыл бұрын

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

2 жыл бұрын

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

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.

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

2 жыл бұрын

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

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

2 жыл бұрын

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

2 жыл бұрын

This, except I prefer CSS modules. Screw frameworks

@TheHaughtsauce

2 жыл бұрын

Try tailwind, you'll change your mind.

@daleryanaldover6545

2 жыл бұрын

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.

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

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.

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 always use css modules, they are so straightforward and simple!

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

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

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.

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.

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; }

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

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

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

@daleryanaldover6545

2 жыл бұрын

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.

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

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

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

2 жыл бұрын

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

8 ай бұрын

Why not simply use tailwind?

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

@miles611

2 жыл бұрын

F in chat for you man

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

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

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

2 жыл бұрын

100%

@charlesm.2604

2 жыл бұрын

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

2 жыл бұрын

Vue is just so underrated

@charlesm.2604

2 жыл бұрын

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

@LtdJorge

2 жыл бұрын

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

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

2 жыл бұрын

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

2 жыл бұрын

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.

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

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

@antoineweb1

2 жыл бұрын

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

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

6 ай бұрын

How do you connect plain CSS to a design system?

@gadget00

6 ай бұрын

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

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

2 жыл бұрын

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

2 жыл бұрын

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

@abhishek.rathore

2 жыл бұрын

I too use Tailwind. It is really awesome.

@daleryanaldover6545

2 жыл бұрын

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.

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!

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!

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.

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

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

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

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

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

Very handy at this very moment. Thanks, master!

CSS modules with PostCSS is really nice and straightforward.

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

2 жыл бұрын

DaisyUI is so weak tho

@gringo5282

2 жыл бұрын

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

2 жыл бұрын

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

2 жыл бұрын

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

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

2 жыл бұрын

Hiyo mr maker of Universal bot

@mahirjobanputra3864

2 жыл бұрын

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

@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

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

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)

I like how we went full circle to end up bringing back CSS to HTML. I mean, WTF

👏🏼⚡️👏🏼 - 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!!

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

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

2 жыл бұрын

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

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

@AngelHdzMultimedia

2 жыл бұрын

Vue: ...

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

Mantine really rocks. Have also been using it the past months :)

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.

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

2 жыл бұрын

You need a high five

@miles611

2 жыл бұрын

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

2 жыл бұрын

perhaps you'd like angular

@DampeS8N

2 жыл бұрын

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

2 жыл бұрын

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

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

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

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

2 жыл бұрын

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

@Jeremy-jw7qb

2 жыл бұрын

What was bad about web dev

@angela_jx

2 жыл бұрын

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

2 жыл бұрын

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

2 жыл бұрын

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

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

@GammaWraith

2 жыл бұрын

agreed

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

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

2 жыл бұрын

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

@spektred

2 жыл бұрын

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.

@devstuff2576

2 жыл бұрын

"In large projects, vanilla JS is not enough" - THIS IS BULL SHIT. You will encounter a LOT of horse manure from programmers in your career, one of them is this. Understand Vanilla and not only will react become a piece of cake but you will also be a solid programmer . These frameworks n libraries come and go but vanilla stays. Also whoever says CSS is hard is dumb. If you can't understand margin: 2px; then why are you coding? Go play tennis

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

2 жыл бұрын

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

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

thanks i didn't know about styled-jsx very helpful

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

@dipsagungurung4553

2 жыл бұрын

I think its: vscode-icons extension

@tanmaymishra1109

2 жыл бұрын

@@dipsagungurung4553 Thanks

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

2 жыл бұрын

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

2 жыл бұрын

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

2 жыл бұрын

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

2 жыл бұрын

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

2 жыл бұрын

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

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

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

2 жыл бұрын

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.

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

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

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.

I've worked with most of them and in my opinion Tailwind CSS wins hands down.

@GammaWraith

2 жыл бұрын

agreed

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.

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

Thank you soooooo much for this video!