[♪ 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. 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. 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.
[♪ 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.
Comments