What Is CSS In JS? / What Is Styled Components?

In this What Is Wednesday, I answer the question. What Is CSS In JS as well as What is Styled Components?
Video Links
Buy VueJS For Everyone: goo.gl/7uft3X
Become a Pro: www.leveluptutorials.com/pro
Affiliate Links
Please use these links when signing up for services to help support Level Up.
Easy Hosting with Netlify: goo.gl/pychVP
Shared Web Hosting: goo.gl/pfC6uc
Level Up Links
Syntax Podcast ft Scott Tolinski & Wes Bos: goo.gl/7jDDxX
Subscribe to the Level Up Newsletter
eepurl.com/AWjGz

[@abrieljohngabriel8686]

I was trying to convert plain pages to React and having a difficult time with adding classes to specifc buttons. Styled components really helped me a lot to simplify my code and not to create a bunch of classes. :) I believe this is very useful for backend developers trying to go on designing on the front end as well. :)

[@antisony2008]

I don't use them because I've been living under a rock for the last year. Dang this looks awesome

[@loka2153]

Great video, Scott I'd love to see a series on Styled Components!

[@patrasculucian2403]

Very informative video. The fact that you are trying to be non-biased, leaving out personal preferences can make your ego angry. But you didn't care about it and I admire you, because it is very damn hard to be like this.

[@dpointeck]

👏 I would appreciate a Miniseries about styled-components. At the moment I'm learning React and I love the component based approach. I find it very convinient to edit the styling in the same file as where my component sits. Thanks Scott for sharing your thoughts on this!

[@ahmedmusawir]

More ... more ... more ... mini-series .... plz plz plz!! There is nothing like this on youtube ...Thanx in advance!!!

[@davidluhr]

A series focus on styled-components would be fantastic. I've been enjoying using it for some time now but love to see other people's approaches.

[@syntaxfm]

Yeah! I've been doing a lot of chatting with some devs around me about SC and design systems. It's been fascinating to see all the different approaches.

[@hanmingzheng5592]

A deep dive into SC would be great. There a very few tutorials on SC. Mostly just scratch the surface. Also, it will be fantastic if you can put up a series that uses SC with existing 3rd party css framework. Preferably a framework that also use css in js.

[@dallanclawson]

I would really like to see a mini series that goes in depth with your specific workflow and usage. I’d like to know how that workflow and usage has changed as well. There are a lot of us CSS guys that get the argument for CSS in JS and now want to see how to make the transition over. This video was a good introduction (teaser 😉) and I’d like to see more!

[@alexdeo8869]

Level Up tuts, A mini series on styled components would be awesome!!.cheers !!.. :)

[@tylerbenton4495]

Do you have a repo utilizing Styled components? I love React and Styled components but the problem is face is having a good project structure. I'm currently putting all my Styed components in the same React component file they correspond with but I don't think that's the best way as my components file gets very cluttered with the Styled components. Any repo I can check out to see how you do yours?

[@tylerbenton4495]

I agree with you where you said the only bad thing about using Styled components would be that you'll be locked in to using React, JSX and Styled components. I watched like 5 talks going over it before I knew what is was as I'm someone who only like to use libs if I know they'll be around for a while. I gave it a try and fell in love with it. It honesty makes the code look cleaner and feel more natural. I don't have to worry about using the same class name in one file and having to change it to another. I think Styled components will be here for a while and I feel like even if it unexpectedly was stopped being worked on. Someone would get to work on a new lib very similar to Styled components.

[@andrewpoe6344]

We've built an element query based grid library and use it in prod at work. Hoping to open source it soon!

[@pordemoni1743]

Unrelated question, but does anyone know how to change VSCode's folder indentation in the explorer like his?

[@lumenwrites]

Thank you for an amazing video! Very helpful. One question - does it make sense to use both sass for general styles, and styled-components for some specific elements? Seems like it would ease the transition(if I alfeady have a ton of sass written), and also I might want to have some general styles that apply to everything. Or does it defeat the purpose of styled components being scoped?

[@syntaxfm]

You can do global styles with SC but I mostly do cascading through based components and extending them. That said, it LUT right now I'm using both Stylus and SC but only because the transition of moving all my CSS to SC is a lot of work.

[@ahmaddekmak2645]

Stoppp!! stop letting me think outside of the box. i feel good in my comfort zone of pure CSS magnificent.

[@Cubannerd]

So, let's see if I get this right. You add a style to every component separately? Every new component you make you add a style to it right?

[@kohahn21]

how to use appenChild with Styled-components ??

[@mframon]

What VS Code Theme do you use?

[@rja421]

I have a library of styled components much like your own. I don't have an index though, that is a nice tip which I shall implement myself.

[@syntaxfm]

Yeah! I have two folders. One for elements.. which is all of my components with an index and one that's for style utilities like breakpoints, color functions, variables also with an index.

[@lewis6590]

At first I thought it would be gross to put CSS in my components but it's basically what I was doing with class names anyway. .header-link .social-link .caption-link etc etc. This way it is at least easier to structure my project as a group of interlinking 'things' rather than components on one side that pull styles from different files over on this other side. I can still reuse stuff by exporting the styled component, too. Now I'm just trying to figure out how to use theming in an elegant and maintainable way.

[@JacobDFrank]

Yes to the miniseries or perhaps just one more explainer and tutorial

[@kniarzyn]

Waiting for mini series on styled components.

[@wilsonlopez697]

How can I traslate this CSS to Styled Component ? .form-signin .form-signin-heading, .form-signin .checkbox { margin-bottom: 30px; } or this one... .form-signin input[type="password"] { margin-bottom: 20px; border-top-left-radius: 0; border-top-right-radius: 0; }

[@BrianBest]

STRONG OPINIONS!!!!!! :P No i mean the reason I can't use this is because it doesn't fit in my stack right now. but more then that I just see some issues coming up with css-in-js with just server side rendering. Scoping is great but i'm not sure if its worth the extra server configuration / potential performance hit for time to first load stuff. idk still early days for me on this front, maybe I'll change my mind

[@RobertR1611]

My strong opinon: Thank you for posting.

[@syntaxfm]

My kind of strong opinion.

[@programadorhispano5203]

Hello I do a betting code, I capture the results of the game with Sun but I do not know how to make the script know if the user won or lost when the user presses the button My friend I am your follower on the web, please help me thanks

[@FishTalkFish]

I love seeing his next browser tab with the search "Why use css in JS?"

[@ChrisFotosMusic]

damn lmao

[@kylerjohnson3317]

In the video, he shows the viewer that tab when he's talking about how controversial CSS in JS is. He didn't just google it and make a video about it or anything. He shows that when you google that, the top 3 results include an article arguing in favor of CSS in JS, an article that is kind of "on the fence" about it, and another one that argues against it.

[@acqzuel]

If everything is scoped, does that mean that theming your app would just be overwriting component css globally? I feel like that is messy. It seems that nobody is addressing this.

[@muscaiu]

Suggestion for a "What is episode": What are mixins?

[@theoligarchist1503]

will be very interesting if this can be used from Rust, then we rust programmers wont have to worry about ever touching CSS.

[@loki6841]

and its so easy

[@thealpha_9]

One argument you didn't mention is performance, is takes much more for the browser to parse this JS code.

[@syntaxfm]

Depends on use case. I wouldn't say is "much more" and if you are using SSR it's going to be much less for initial load.

[@chanlito4896]

Can you do a tutorial on material UI next? Explain their CSS in js usage would be nice.

[@dusanjovanov]

Styled components are great, but it's very hard to use them with typescript

[@greendragon4151]

i would like a miniseries on styled-components.

[@trappedcat3615]

Im liking just CSS variables in JS

[@syntaxfm]

Def loving CSS variables myself too!

[@bigfoot131]

Give us a tut on styled components

[@pelumiman2799]

pls do the miniseries

[@ExplicitPanic]

Little offtopic but... What's your terminal color scheme?

[@syntaxfm]

Level Up Official.

[@younmecreate]

I am not too good in this but here are my points: 1.) As a computer Science Student/developer I feel CSS in JS breaks the Single responsibility principal, and the components functionality is getting tied with its look and feel. 2.) Also I feel it get messier when you start using media queries and pseudo classes 3.) To some extent it feels like it may not go well with CSS frameworks such as bootstrap. 4.) CSS was created for look and feel and JS for functionality, I don't know how mixing these things together will help especially in case when multiple people are working like CSS guy and another one very proficient in JS, so there may be some issues. 5.) Separation of concern is lost here, so if someday if you want to change just the styling or just the functionality, we may end up (to err. is human) affecting the other one. EDIT: 6.) If we are interested in directly modifying things, then it reminds me the era of JQuery, where its enabled us to easily manipulate styling and even the DOM. Obviously it feels great to be able to modify things by our hands, but wasn't this the very reason the Component based approach was started in the first place!. 7.)(Its a Question) I am not sure how good it will be with event handaling in case of nested styled components?

[@Ericsicons]

one of the greatest benefits of styled components that you can control css values at run time

[@hanmingzheng5592]

Might be a weak point. But I really like to put everything(html, css, js) in js and see them all in 1 file. Makes me feel a lot better.

[@sr_aman]

hanming zheng this is my opinion also. All the things that makes up component are in one file. It feels waaaayyyyy better.

[@FrontendZilla]

Really informative Video, but hanming zheng Its easy use script tag to insert script and style tag to insert css on the same page know more #wantedtalks

[@lucasvilela18]

I use styled components everyday now ! And its great but there is donwsides too ! A lot of repetition ! You have to have a better understand of pure css ! Its ok when you doing components and small pieces that is fine.. But when you get into big layouts you have to do a lot for yourself and sometimes a bootstrap is better for that ! You need more planing for the future when using them !

[@akhilk5121]

For me lock-in to the library is a huge no-no! One thing we were always taught not to do.

[@syntaxfm]

If you use just about any library there is some degree of lock in. At least with styled components you are basically just writing sass code anyways.

[@r-i-ch]

Two reasons I don't care for CSS-in-JS. 1. Putting CSS in JS violates the separation of concerns which is the whole reason we stopped inline-ing to begin with. 2. (Depending on your build sys) Simple changes will likely need to be rewritten in multiple locations.

[@syntaxfm]

I'm not sure I follow the 2nd problem. With most css in JS systems you are writing reusable components that would only need to be updated in 1 place

[@wilcas5349]

I use styled components because they are not dumb.

[@darwinmanalo5436]

yes google "why use css in js" haha

[@syntaxfm]

The results are hilariously all over the place.

[@FrontendZilla]

css and js are front end technologies, google also have it so they also use it, every website uses it

[@prashantindurkar]

First

[@honkskillet]

You should redo this one and actually show us code and not try to sell us on the it for 10+ minutes.

[@syntaxfm]

honkskillet All CSS in js libs are different, so showing code of a few of them would only do so much. Also, I'm not trying to sell anyone on anything. Usage of something like this is a choice your team needs to make. I have nothing to gain or lose either way. I'm not invested in your workflow, just trying to discuss the options available. Potentially a better idea for that kind of video would be to make a comparison of differenet css in js libs but even then you would have to separate by platform.

[@majorhumbert676]

Nobody ever reinvented CSS, why is that? It's because it sucks, and because it's designed to style a markup language called HTML, not unlike other markup languages such as Markdowk, LaTeX, and AsciiDoc.

[@syntaxfm]

I’m not sure I follow. CSS is a great language

[@jahongirbozarov3135]

90% of this video is just talking making you wait long to see the actual syntax

[@b.6603]

Yeah? This is a 'what is' video, not a tutorial. It's supposed to be talking, not teaching syntax.

[@manuelsuarezabascal75]

CSS In JS is an abomination

[@syntaxfm]

Why?