Styling Marketing & Auth Pages

[00:00:00]
>> Scott Moss: Now we're gonna dive further into that and actually not just have null components that return hello world and start building out some of these pages, starting with our marketing pages or what I like to call the signed-out experience. So anything that doesn't require a user to be signed in, we're just gonna go ahead and scaffold out all those pages.

[00:00:20]
Don't worry, I'm not gonna sit here and make you hand-code a bunch of CSS and divs. We'll just copy and paste those because they're unrelated to Next.js. But I want you to go through the motions of that and then we'll talk about prerendering and static pages, and what does that mean, and what is Next.js doing, and optimizations there, and all different types of things, so.

[00:00:44]
But for now, let's start talking about styling in Next.js. So TL DR, there are an infinite amount of ways to style in Next.js, because Next.js is just React and React has an infinite amount of ways to style. So there are a few ways, there are CSS modules. I don't know who uses this anymore, but you have that.

[00:01:10]
So what is the CSS module? Well, it kinda looks like this. If you don't know what a CSS module is, it's kinda in the name. It makes a module out of your CSS. But really the best part about CSS modules is that it scopes your CSS so it doesn't have conflicts in the global space.

[00:01:27]
So it'll basically create random class values for the styles that you make so you can apply them to your components so they don't conflict. So it's scoping your CSS with the components in which they belong to, so you don't have to have this global styles, even though the components that those styles might be for aren't even on the page yet.

[00:01:51]
So this cleans up your CSS a lot, so you're only loading in a CSS that's specific to the component and not all the CSS at one time. So that's what it looks like. How do you do it? Pretty simple, you can go here, anywhere you want. Let's say I wanna make one for this new page.

[00:02:08]
I wanna call it newissues.modules.css, like this. And if you've never written CSS modules, it's pretty much kinda like CSS. So for instance, I can give this, I don't know, let's go in here. Let's say I wanna have a div in here and I have a button in here, hello.

[00:02:36]
And I wanna add a class to this. So what I can do is I can go in here, I can say, for my button, I want a background color of red, right? So I have a button. And then what I can do is I can import my CSS module.

[00:02:52]
So I'll just call it styles, and I can say from that. And then now, what I can do, what does this do? TypeScript, okay. Now, what I can do is I can go in here and I can say className and I can say {styles.button}. And that's typed, so we get that free type stuff there.

[00:03:15]
So now this is going to be included in this page. So I would only see this styles when I load this page up. So let's go check it out, see what happened there. So that was issues/new, I think. Yeah, there we go, we got our red button. So that's CSS modules, you can add as many as you want here.

[00:03:43]
And the name of the class is the name of the property on the object when you import it in, so. But if you were to go look at this in the DOM, it's not gonna say button, this is how it creates conflict-free styles. So you can see right here, it's this.

[00:04:03]
It's the name of the file, the name of the class, and then some random value to make sure it doesn't conflict with global space CSS. And that's CSS modules. It's a good approach, it's great. It's been around for a while. You could do this in React, but who's doing this?

[00:04:24]
[LAUGH] Who's actually doing this? I don't know. You definitely don't wanna do this if you're making a library. My goodness, if you make a library and it has CSS, I'm never gonna use it. So don't ever do this, this is only for application stuff. But it works and it works really great.

[00:04:43]
And maybe you need to use this for a specific reason, there you go. So that's CSS modules. You have global CSS, this is great. Global CSS is exactly what you think it is, we already have some. This is where you would put global things. So perfect place for CSS variables, perfect place to set up Tailwind.

[00:05:05]
Perfect place to set up things that are gonna work the same on every single page. So yeah, you just put that in there, and then the really good strategy is import that in your RootLayout. So as long as you import that file, you don't need a variable or a from, you just import it, it'll get included.

[00:05:24]
So by putting this on the RootLayout, that means it'll be on every single page because everything is inherited from the RootLayout. So highly recommend putting that type of stuff like fonts, themes, CSS variables, Tailwind things, inside of a global style file. Don't abuse it, don't put all your component stuff in a global CSS file.

[00:05:50]
Do something else, this is just for global stuff. So try to keep your global CSS small in my opinion, and then use something else for everything else, and we'll talk about the other options. But yeah, you will most likely always use this. Especially if you're using Tailwind, you will almost always use global CSS.

[00:06:08]
You don't have to call it global, that's not a special name, you can call it whatever the hell you want. It doesn't have to be in the app directory, it could be anywhere in your app. That's just a convention. Okay, Tailwind, yeah, just use this, [LAUGH] just use Tailwind.

[00:06:23]
We'll get into it when we talk about rendering and stuff in a little bit, but honestly, just use Tailwind. It's just gonna save you so much time. And it's really good for compatibility when it comes to a lot of the server side stuff that React does now. Just being able to use classes that you didn't have to make is just so easy.

[00:06:45]
So use Tailwind or something like Tailwind, I think, is probably the best approach. And this is coming from someone, and I think I'm on tape saying this here, that I just don't like Tailwind, and now I use Tailwind for everything. So yes.
>> Speaker 2: What's your opinion on Shadcn?

[00:07:01]
>> Scott Moss: I think Shadcn is great. I think it's good, I think it looks good. I think I understand it now, but I still don't like it. Is like I never understood why people want to copy and paste components when the whole point of a component library is that I don't have to maintain it.

[00:07:15]
So if I have to copy and paste it and now I'm maintaining it, then why am I doing this? But when I look at it from the perspective of being able to, one, get things done very quickly, and then two, less about maintaining but more about customizing. It does feel better to go in and customize a component that I have full access to versus hoping that that component library author created the right props and the right witchcraft for me to customize this dropdown.

[00:07:49]
I think people try to do that with headless components and stuff, but they never really feel right. The only way to really do it is just have access to the whole component, and that's what Shadcn does. So I look at it from that angle, it makes sense. If you look at it from the angle of using AI to write code for you, Shadcn is the God, because AI can just understand that so easily.

[00:08:07]
So I don't know if the author knew that ahead of time, but because of AI, it's probably one of the best libraries, I think, out there. But personally, I don't like it.
>> Speaker 2: What component library do you use?
>> Scott Moss: I don't, I don't use a component library anymore.

[00:08:22]
I just use Tailwind, that's it. And if I need some functionality, I'll find something like this, like Ark that has absolutely no styles whatsoever and it's just functional components. It's like, I need a carousel right quick. I'll just use this carousel thing, and I'll use that. It's mostly headless.

[00:08:46]
But even then, I almost don't use this. It's weird, I don't really use component. I'm in this phase where I just try to keep everything super simple and basic. So I feel like I don't need that stuff anymore. But if I had to, yeah, I would have reached for something like this.

[00:09:04]
But no component libraries, I just use Tailwind. So [LAUGH] you wanna follow somebody else when it comes down to this path. This is not the right way, this is just after years of pain. So if you haven't had that pain, don't do this [LAUGH], do something else. But I have to give props where props are due.

[00:09:25]
Shadcn, Tailwind, great tools, changed the community. I mean, shit, v0 wouldn't exist without Shadcn and Tailwind, let's be real. And v0's a pretty good product, so yeah, it's doing something right. Yep?
>> Speaker 3: Do you have any thoughts on Material UI? Have you used it?
>> Scott Moss: When Material UI came out almost a decade ago, or however long it came out, I was a big fan of it.

[00:09:47]
Now, I hate it [LAUGH], it's just so bloated. It's just so much like, I think, I don't know, I gotta give credit to the designers at Google and Alphabet, because it's a great product and I still go back to it sometimes to get certain color palettes and fonts and things like that.

[00:10:08]
But I'm just not a fan of it, I'm kinda over it. It's too enterprise for me. And if you start changing it so much, it's not even Material anymore, it's just like some Frankenstein thing. So unless you really love that aesthetic, it's just too opinionated for me. I prefer something way less opinionated, way simpler than Material.

[00:10:32]
I think Material was created for people who wanted their apps to look like Android apps. And I don't want all my apps to look like Android apps, so [LAUGH] because of that, I don't really like it. Yeah, just use Tailwind. Tailwind 4 is out, just trust me, it's good.

[00:10:49]
I hated it, but it's really good. I have to swallow that pill, it's really good. You also can do CSS and JavaScript. This is not unique to Next.js. You've heard of style components, you've heard of, you know what, they have a whole list. Let me show you. They have a whole thing.

[00:11:09]
You heard of all these things. These are all CSS and JS things. So there's some version of using CSS and JavaScript. There's pros and cons to that. When you're just thinking of purely single page application, this is probably not that big of a deal. Once you start doing React server components and stuff, yeah, good luck, it's not really gonna work, at least not easily.

[00:11:34]
You're at the mercy of these authors here of getting it right. So me personally, I would never use CSS and JavaScript, I just would never do it. It's just not worth the limit, is not worth the squeeze to me, I would never do it. I would never use a library that uses it.

[00:11:51]
I mean, as soon as we talking about something like this, I'm already not interested. I don't wanna have to do this, I don't wanna have to maintain. I don't wanna have to build the system that ensures my styles get put in the right place on my app. I just want that done for me, why are we doing this?

[00:12:09]
So I don't know why people would have to do this. I think there's something that you have to do because you are using one of these. Quick shoutout to something you've probably never seen, styled-jsx. This is something that you get to get in next year. So they're gonna show me, my God, they're not even showing me an example of it.

[00:12:32]
It basically is like, let me just look it up. Cool, you get to do this. You get to add a style tag in your JSX,
>> Scott Moss: And then you get to use JSX but a CSS string. So if you fancy that, you can do that. I guess this is a better version of CSS and JavaScript.

[00:12:51]
But again, if I wanted to use Vue, I'd use Vue [LAUGH]. So I don't know, to me, I think this is like, it's another tool in your tool belt. But if you're building a proper application, you have access to the tooling and the foundation. Yeah, I think this is something, in fringe environments, I don't know, maybe using some email thing that allows you to write React for email templates, but only on their app, and you have to ship the whole template as a bundle.

[00:13:24]
And you don't have access to a build system, so you need to find a way to package styles. This might be a good alternative. I don't know, but if I have full control over everything, I'm using Tailwind and global CSS and I'm calling it a day. It works for everything, it works on every environment.

[00:13:39]
It works on the edge, it works on the server, it works on the client, it works on my computer, it works everywhere. So I'm just gonna do that. But you got options.
>> Scott Moss: And then, of course, for all the OGs out there, we got those CSS preprocessors. Whoever here used Stylus before?

[00:14:02]
Damn, am I that old? [LAUGH] I used to love Stylus. This would be my thing, I hated Sass. And what was the other one, Less? That one kinda died. Yeah, Stylus was the best one, man. Tj Holowaychuk went crazy on that library. But, yeah, you can use those too.

[00:14:22]
You could even use them in combination with CSS modules. But I feel like, what is that library? What is it called? Yeah, I feel like PostCSS kinda just killed preprocessors anyway. So that's why I said, again, why would you use this? If you're still using Sass today, greenfield, it needs to be studied, [LAUGH] because I don't know why you're opting in to use that today.

[00:14:50]
Now, if that's legacy, pat on the back, bravo, kudos, Nobel Peace Prize, I get it. But you choosing this? Come on, we need to have a conversation, we need a podcast episode. So don't do that, just use Tailwind, in my opinion.
>> Speaker 4: What about defining the style attribute, like on a div or something?

[00:15:13]
Are you just treating that same way as the styled-jsx kind of in terms of philosophy?
>> Scott Moss: Yeah, I mean, if you're putting a style on the div, that means you're doing it client side, I would imagine. There's some state that you have client side that you wanna bind to a style.

[00:15:32]
In that case, I guess that's fine, cuz you're already on the client anyway, so you're not being penalized. Yeah, I guess that's totally fine. But that wouldn't be my main source of styling. That would be a very specific use case, I need to change the positioning, the x- and y-coordinates of this element based off of a scroll thing, so I'm gonna use a style tag, yeah, sure.

[00:15:57]
I mean, because you essentially are doing that when you're using animation libraries anyway, so that makes sense. But I'm not gonna draw boxes and change fonts with that, that's not gonna happen. But if you're using React Native, you have to do that, that's the only way to really get it to work, so.

[00:16:13]
But here, no, I'm just using Tailwind, and I'd rather just use whatever Tailwind has for extending their styles than to fiddle around with something that's not gonna be compatible tomorrow, right? So I'd rather, how do they do it? Right here. So I'd rather do like this inside of a CSS file and make custom classes and custom Tailwind themes guaranteed to work no matter what than the alternative [LAUGH].

[00:16:46]
So yeah, because I can take these styles and take it to any framework. It's gonna look exactly the same, it's gonna do the exact same thing, so.