React Components and How To Style Them

[♪ music playing ♪ Hi everyone, I'm Jemima and today I'm going to be talking to you about styling React components. This is a lightning talk so we're gonna move fast. Basically this talk is gonna be one of those like Buzzfeed articles that's like I tried out five different methods of styling with React so you don't have to.

Basically when I first got started with styling in React components I used to run into a bunch of like annoying errors like you nested components in another component and then the style is getting overridden or you have layout problems you're trying to put a fixed component in a flex container and it's not fitting in the flow or you have to start figuring out how to be naming components and sub components and sub sub components. Or you have to be real specific with how you target your elements.

So basically I had all these problems and asking for a styling method that was easy for me to use and learn because it was like there was a switch from how you style in HTML to how you style in React and I did something that was kind of similar for me, something that helped me maintain file structure and code structure, something that was optimized because of course performance is important, and something that could be used across multiple components, and it was scalable. So these are the methods I've tried out over, you know, time.

Inline styling, CSS stylesheets, and CSS in JS. So we're just gonna go into each of them real quick and then just see what they are. So for inline styling that's just your regular, regular putting the style method in like the elements as an attribute. I use this mostly for overriding existing styles because inline styling does have a very high specificity and for passing a star properties as props, things like when you need to set a background image as a prop, really great for that. With the CSS stylesheets, that's your CSS files, your CSS modules, and your pre-processors, and Tailwind style sheets, but it wasn't really CSS in JS, I just kept it here. I saw someone on Twitter called it CSS in HTML, which I think is very apt. So yeah, this is how you just have your regular CSS files and then you can use them for, I really like CSS files because they are very useful for putting the stylesheets directly with the elements you're working on, so it's great for like co-locating and it's just easier to know where the changes you need to make are. For handling global styling you can just pass in a global method target all elements and pass them to your app.js and it's great. For nested styling, if you're using your pre-processors, you can kind of include your style names in the global nest of the component name, and that really prevents that whole overwriting error that I was running into earlier. So that's great. Tailwind is something I recently started working with and maybe it's just me personally I didn't like it, because it took me two days to figure out how to set it up, but I included it here for intuitivity's sake. Basically Tailwind kind of works with utilities, utilities are like let's say pre-existing class names that just have all these properties already, so you don't start defining them, so for example like py2 would be a padding top and bottom property of whatever you define the 2 to be, so that could be like one REM. Tailwind is really good for if you have like a design system across, let's say you work with a company that uses the same design system across multiple projects, you can just kind of define all those properties like your modding or your padding or your colors in your Tailwind.config.js file and you can import that across multiple projects and it's great. CSS and JS, when I first heard about CSS and JS I was like, CSS and Javascript? That's ridiculous, and now I'm like, why isn't everything in Javascript? This is the best thing ever. So I've worked with Style Components and Emotion, I haven't worked with JSS but I just put it there because I thought the name was very apt because CSS and JS. Style Components are, basically think of them as like template literals. You know, you have your CSS properties and just pass them as a template literal. So they're really great because it gives you all the benefits of like inline styling, but also like CSS files because you have access to like your pseudo selectors, you have access to global styling, you can set like themed elements, it's just, Style Components are just really useful. They're like really powerful when it comes to styling. And the same for Emotion as well, most CSS and JS libraries support specifically Style Components. Another reason I love Style Components because they really help you with like accessibility. A lot of times you can just define the elements as using the semantic label, like the semantic element name, and it will render it semantically, which is great. Another really cool thing about Style Components is this thing called polymorphism, which is just like a fancy way of making one element look like another element.

For example, here I have a style div element, and I have a style button element. I am passing in the button element to my prop. What is going to happen is that my elements, the style div element, is actually going to render as a button element. This is really useful for when you have, let's say, you have links and buttons that need to have the same styling, but you don't want to start like overriding all the button styling, like all the buttons default styling, you can just be like passing style button as link or passing link as style button. And the link render as a button or the button render as a link, depending on how you made it work.

This is like a little chart I came up with from my experience and my preferences. It's not like saying this is the one method that is better than this. It's just like how I found them. From this chart, I would say my favorite method is definitely style components, just that it was a bit hard for me to pick up, you know, there's a bit of a learning curve, and it's not very easy to set up. You have to install a lot of things. Tailwind was my least favorite, not because it's bad just because I just could not get my head around it. I could not figure out how to set it up. I could not figure out how to use it. I had to, like, literally to date, if I'm using Tailwind, I have to Google whatever property I'm trying to define. I just do not know these things off hand. But yeah, I think it's still a fine framework, if that's what you're into. Of course, each of these methods are suited to a particular kind of, you know, it's kind of that's what your project needs. You know, if you're doing like a large scale project, you might want to use like a style component or CSS file because you can attach multiple files that way. If you're doing something small scale, you could stick to like Tailwind, for example, because that way, you don't need to start thinking of class names and stuff. You can just pass in the utilities. So you know, it all depends on what you prefer.

So yeah, that's about it. Like I said, lightning talk for you real quick. I do have slides for this. These are the slides to the original version of this talk, which is much longer and does include a more specific point for each styling method, you can see it on my website jemimaabu.com slash slides slash styling hyphen react. So you can check it out there. I also included some links for more on react styling methods you can read up on there are really good, really useful, you can check them out there. That's about it. For me. Thank you so much for listening. If you do have any questions, I think there's going to be a I could q&a with the MC after this, or my thing, there's an advice lounge, either way, you could just like reach out to me there. Or you could fill out the contact form on my site jemimaabu.com, or send me a message on Twitter or LinkedIn. You'll find me online everywhere at jemimaabu Thank you for listening and have a pleasant rest of the talk.