This course has been updated! We now recommend you take the Complete Intro to React, v8 course.
Transcript from the "styled-components" Lesson
[00:00:00]
>> Brian Holt: We are gonna be talking about styled-components which is kind of a fun thing. So let's kind of go off on a little bit of a tangent, tell a story. [LAUGH]. So writing CSS can be all the way from really great to really un-fun. Depending on what kind of CSS you're writing and what you need to do with it.
[00:00:27] We've kind of come up with all these different tools like SASS and LESS and post CSS that have kind of been helpers to us to kind of get this rather undecorated rule decorated language. To be a little more problematic, allows us to do all these different kind of cool features with them.
[00:00:52] Well, some smart people came along and said, well it would be really nice if we could use JavaScript like a fully turning complete language. Not that actually CSS is technically turning complete, let's not go there. But we can use JavaScript, and then we could manipulate all these styles programmatically, right?
[00:01:12] And then rather than having to do things like add classes and subtract classes, we could actually just be directly manipulating the style. All these different things, right? It's opening the door for a lot of new and interesting paradigms and things that we're just barely exploring. So we ended up with things like Radium, was one of the first big ones that came out.
[00:01:34] Then Aphrodite was another big CSS and JS library that came out. And sometime afterwards we landed on this one called styled-components, which I think it's really fun to use, for sure. And then there's two that have kind of come out that have also kind of captured the consciousness which are glamour and glamorous which are both amazing.
[00:02:00] In fact I know the author of all three of those, right? One of them giving from a masters, Kempsey Dodds. He was instrumental and glamorous. In fact, I think he literally wrote the first version of it, so all really, really cool awesome ideas. And I'm a fan. However it's become quite controversial.
[00:02:20] The reason being is that we're deviating from the way that the browser has previously worked, right? Previously, you put your link tag that had a separate style sheet that was downloaded and then, all these things could be kind of eventually running parallel, right. We're very optimized for that path, because the web has been doing that for 20 years.
[00:02:38] I don't know how long has CSS been around? Probably longer than that. So yeah, we ended up with this CSS and JS thing, which definitely has its drawbacks right? Its drawbacks, for example, with styled-components is that you have these long CSS strings which I'll show you here momentarily.
[00:02:59] They get parsed twice, right. They get parsed in JavaScript. They output the style tag which then gets powered by the CSS parts, all right? They're paying double parts cost which is not trivial, right? For sure, it's definitely not trivial. We have deviated from the optimized path. So these are all the things to keep in mind when selecting how you wanna do CSS.
[00:03:25] However, what I'm really bullish on, why I think these are paths that are worth exploring.
>> Brian Holt: Is the idea of tying your styling to your components is very very promising to me. My favorite thing in the entire world is deleting code, literally. I just adore deleting code. Cuz when you're deleting code that means things are moving forward.
[00:03:49] Now you went from having this many things to think about to having this many things to think about. And that's just a huge win in my book. We're getting pretty good at deleting JavaScript, and we're being able to detect, like, this file's never included. You might consider deleting this, right?
[00:04:04] There are ways to statically analyze through JavaScript that's possible. However, how often fo you delete CSS? I mean most people look at me like yeah, pretty much never right because it is really difficult to untangle that, like this is you somewhere but this is not you somewhere, right?
[00:04:20] And you have like this crazy style sheets that just going to be huge, right? I remember recently, LinkedIn's CSS, I think was pushing megabytes, right? Which is crazy. But it's totally understandable how you get there, right? Because once you write a rule, it's really difficult to know when you can pull it out again.
[00:04:40] We're getting some new tools from Chrome dev tools which are kind of letting us see like hey, you have this CSS rule and I never saw it called. What's still difficult about this is that it might be called in another part of the website, right? Super difficult to tell where things are coming from.
[00:04:55] All this trade to say is that if you are doing something like styled-components, what styles component is it's going to bring that styling inside of the component. So if you never include the component, you never include the CSS, right? So if you delete the component, you delete the CSS.
[00:05:13] Amazing. I'm so excited about this for that reason. And this is not the only way to achieve this for sure, right. There's things like CSS modules, so I talk a little bit about them in V2 if you're interested in that, but you could do something like import,
>> Brian Holt: Or let's just assume it's in the same directory, ./ShowCard.css.
[00:05:45] Right, we don't have this set up right now, you'd have to do some more stuff with Webpack to get this to work, but what would be really cool about this is that anywhere you included this file, you would also pull along the CSS with it. And it's also cool because I know as soon as I delete ShowCard.jsx, I know I can also delete ShowCard.css.
[00:06:03] So CSS modules definitely one path forward and I would say, maybe for production use, right now, at this very moment, a better way to go. That's a Brian Holt opinion, so take that with all the grains of salt. But I wanna show you how to do styledhcomponents. We're not gonna do it all day because we'd spend a lot of time writing CSS but we're gonna do this much of it, okay.
[00:06:29] So, I want you to go up here and say, import styled from 'styled-components'.
>> Brian Holt: And we're gonna create a couple kind of elements here. The first we're gonna do is called Wrapper = styled.
>> Brian Holt: So this syntax is new for a lot of people.
>> Brian Holt: So what this is right here, I have styled and then I have a back tick, right, and then I have another back tick back here.
[00:07:12] This is called a tagged template literal. It is valid JavaScript, this is not JSX, this is not anything but pure JavaScript right here. In here I can start writing some CSS, just like you normally would.
>> Brian Holt: Border: 2px solid.
>> Brian Holt: And we'll do border-radius.
>> Brian Holt: 4 pixels. Margin-bottom: 25px.
[00:07:56] Padding-right: 10px. Overflow: hidden.
>> Brian Holt: So you might be asking what is this, right? Tags template literals are still not something widely in use. They came with EXS, right? So this is already valid standard JavaScript. A bunch of browsers even still support it. What is happening here is we have this template literal, right?
[00:08:20] We've seen these before, these are
>> Brian Holt: What we were just using before. So if I said const color =, I could totally replace this with
>> Brian Holt: Color, right? So that would totally work here. Cuz it's just a normal template literal
>> Brian Holt: I'm not gonna do that right now but that's what that would look like.
[00:08:47] But this style right here is a tag on this temple literal which means it's going to be run through a function that's getting called here, right? Or from styled-components, so it's gonna be fed into styled-components and what this returns is a react components, right? Sorry, and it's style.div.
[00:09:09] That's important. [LAUGH]
>> Brian Holt: So what this style.div is going to return to you is a div that has been styled like this.
>> Brian Holt: Which is pretty cool. So now I have this wrapper component, so I'm gonna replace this right here with wrapper, and down here at the bottom.
[00:09:37]
>> Brian Holt: So instead of having that encapsulating div, now I have this styled-component that I've pulled in from styled-components. Cuz I guess it probably bears mentioning if what's actually happening, like where the style's coming from? A lot of people just assume it's in-line style, it is not. Cuz that's less efficient, but it's actually going to do is it's going to create a style tag somewhere on the page and then it's going to output this stuff into that style tag and then it's going to get this div right here a class that matches that matches that.
[00:10:13] Make sense? And we can look at how that works. So we're gonna do one more cuz we need some style around our image too. So we're gonna say.
>> Speaker 2: Quick question.
>> Brian Holt: Yeah.
>> Speaker 2: So we replaced the div showcard. What is I wanted to keep that class name within the wrapper tag.
[00:10:38]
>> Speaker 2: Okay.
>> Brian Holt: And then I would just add it. Yep.
>> Brian Holt: I think later we actually have to do that. I don't remember why, but yeah. For now we'll leave it off cuz I forgot why.
>> Speaker 2: So is it babble that's interpreting that and putting it into the CSS style tag.
[00:10:59] How is it?
>> Brian Holt: It's magic. [LAUGH] No, it's the styles components library. It has nothing to do with babble. I don't know what actual mechanism it's outputting into the dom. I haven't looked that closely at it. But it's taking that and outputting it to a style tag somewhere on your page.
[00:11:20] The nice thing slash gross thing about CSS is it's universal, right? If you put a style tag anywhere on a page it's all global, so as long as it's on there somewhere it will work.
>> Speaker 2: So could you forsee almost like a webpack tool in the future that would go through and find all the embeded styles and.
[00:11:38]
>> Brian Holt: It's already happening. Styled-components doesn't have one. It's on their roadmap. I actually met with the creator. Like week and a half ago in Austria. And yeah, they just released Style Components 2 last week, which is what we're using today. And I think for V3 or something like that they're actually gonna do something where they can actually separate it out to a separate style sheet which you can include and kind of get into that more optimized cow path.
[00:12:09] I believe Glamorous already does it. Glamorous or Glammer and or both will allow you to extract that CSS, make a separate file and include it, which is pretty cool.
>> Speaker 2: So that replaces SASS or LESS than.
>> Brian Holt: Yep, totally. What's cool about this too it automatically gets run through an auto pre-fixer.
[00:12:33]
>> Brian Holt: Which is really nice, so you can just do like display flex and then forget about it.
>> Brian Holt: So we're gonna do one more for our image tag which is gonna be styles.img. As you may have guessed, style.tag is how you create that particular type of tag, and they have everything that's valid CSS, sorry, valid HTML.
[00:12:59] Width 46%, float: left, and margin-right, 10px. If there are things that you like in SAS like lighten and darken and some of those things, there's a library called Polish which is a partner that goes with styled-components. That will do things like lighten and darken and some of those other SASS specific features.
[00:13:33] So now we have image here. So I'm just gonna change this image right here from img to image. Everything else can stay exactly the same. So now if we save that. We come back here.
>> Brian Holt: This looks like it's mostly working. Well, this doesn't look as nice as it was supposed to.
[00:13:57]
>> Brian Holt: That's nice, that's what I was going for. [LAUGH] Well at the next break call figure out why those CSS went wrong but this should be look a little bit nicer.
>> Speaker 3: So is there supposed to be an extra directory under the search one?
>> Brian Holt: I think I messed that up last time I gave this as well.
[00:14:24] Yeah, there needs to be a div here.
>> Brian Holt: Yep, hey, it looks all nice now. [LAUGH] So you just need an extra div down here.
>> Brian Holt: Thanks, friend.