 Now, with Elementor websites, we have so many options on where we could add our CSS. We got every single Elementor widget. You got the Elementor columns, Elementor sections, and even the Elementor settings. We have our customizer. We got child themes. We even got dedicated plugins just for adding CSS. And nowadays, just about every single Elementor add-on plugin comes with this own section to add CSS. So with all these different options, where should we be putting our CSS? What are the best practices? And how could we develop good habits? What's up everyone? I'm Jeffrey at Lightbox. That's what I want to discuss inside this video. I want to talk about developing good habits and best practices for adding CSS to Elementor websites. I wanted to make this video because one of the common questions that I get asked is, why am I adding my CSS where I'm adding it? Because you'll see in other tutorials, well, they're adding their CSS in a completely different area. And I'm not going to say that I'm right and other people are wrong because, well, these are dedicated spaces for CSS. So technically, nobody is wrong for adding CSS there. Now, the one thing I know we could all agree on whenever we are adding code to a website. The main thing is to keep it clean and organized. And because of this, I choose to keep our CSS always centralized and organized in one space. See, I'm thinking about what is best for the long term? What is a good practice and what's going to help out if somebody else needs to come in and make edits to the website? Might have team members. The client might hire another developer to come in. We might have a backend developer that also needs to collaborate from another team. So we need to prepare for situations where somebody else will come in to edit the code. And because of this, this is the reason why I don't add CSS into Elementor widgets. Because well, it scatters it all over the place. If we have everything centralized in one location for our custom CSS, well, we could go to that section and find it. But if it's inside each individual widget throughout the website, just imagine somebody else trying to come into the website and locate that. They're going to be clicking through pages, through elements. They're going to be all over the website and it's going to be a very frustrating situation for them. So really quickly, I want to give you an insight into how we add our CSS. Now here is our personal company website right here. And this one has a lot of CSS in it because we did a lot of customizations. And you can see we put it inside the customizer. Now I chose to keep it inside the customizer because it is easiest for when in development. It doesn't cash. And then when we finish with it, then we usually transfer it over to a child theme. But one thing to keep in mind, the child theme does cash. That's why we use the customizer right here. And then we could copy and paste it directly into a text editor. And then we could work right inside our text editor, which is a lot easier. Now if you put it inside your Elementor widgets, you can't do this. And before we start any project, we have our own process and own system that we use. And this is our system right here. We start off and we keep all of our CSS in the customizer for development. We split it up in sections like we got our global section. We got our header. So anything that needs to be changed in the header goes here. We got our footer section. So any customizations goes inside here. And then home page and then so on. And by doing this, while everything is in one section, it's easy to find another developer, somebody else could come in, they could easily access it. They could find it and they could locate it. And it's going to make their job a whole lot easier, which in turn is going to be best for the client and for ourselves. So if keeping our CSS all centralized in one location is the best practice and is the best habit to go within, why even have a CSS section inside Elementor. And there's a very good reason for at least one that I see. One of the biggest benefits, and I think it's quite genius in fact, that Elementor added that inside there. It allows us to export templates and to create kits. And this means you could create custom kits, you could send them out, you could share them, you could even sell them. And it's all right there, good to go. So there are some situations where adding CSS directly into the Elementor widgets or into the spaces for CSS on Elementor makes sense. Those are just a bit more rare. And whenever you import templates, you're always going to see the CSS in there. Well, I hope this video helped out and I hope that it could get some clarity because I know that it could get quite confusing with so many different options. And I know that many of you are watching tutorials out there where there are some CSS snippets that need to be added and they're being shown to be added into Elementor. And I really wanted to help out with helping others develop good practices and good habits because those and forming those in the very beginning are going to help out for the long run, not the short quick fixes, but developing something solid for the long run. If you got questions and if you got comments and if you disagree or if you got another system that works better for you, drop it inside the comments. I look forward to hearing from everyone, you know, all that good YouTube stuff. Like, subscribe, hit the notifications. I'll be back again soon with more Elementor and web design related content. All right, thank you.