Good Custom CSS Communication, and Correct Placement

Custom CSS is essential in the look and functionality of any website. I’m assuming you might know what it is. If not, find out.

Part One, Placing Your Code Well

I picked up a new customer this week who was in need of getting some changes made to her site that was not quite created the way she wanted it. The site needed to be edited, functional and launched as soon as possible. When I met her, I looked in the usual places for CSS to get an idea of the set up and progress of the site made by the other designers. I missed a couple of spots! There was CSS in the child theme’s stylesheet, as well as in the WordPress customizer, as well as in the Theme Options > Custom CSS. What a mess! I’m glad there wasn’t any more in individual pages.

I’ll talk about being polite and respectful to future developers in the next post. For now, let’s talk about location of custom CSS styles.

What are the options for placing custom CSS?

External Style Sheets

You can access the stylesheet directly from the Appearance > Theme Editor in the main WordPress menu. This is the most direct way to modify the one sheet that will load the quickest and keep your work in one place. It’s best to use a child theme so that your file is not rewritten during any template update pushed by the developer. However, there are other location options to add CSS.

On The Page Itself

Many themes or site builder plugins like WP Bakery and Siteorigin have an option that lets you add specific CSS to a single page. That can be convenient if you know that you want styles to appear only on that page. The drawback though, is that if you need to access the code, you need to go to that page instead of working out of your one “main” css file. Also, the browser will be reading the code from more than one place, which slows down page load speed.

The WordPress Customizer

This is a handy location to add CSS, and you can use the browser inspector to see the changes you want to make and then copy that code directly into the customizer. This is under Appearance > Customizer. You must hit Publish in order for those changes to take place. Still not the best place to store CSS as it is the database.

The Best Location for Custom CSS

As I said above, ideally all your styles should be placed in one stylesheet in one location. This makes the site faster because the user needs to only download one set of styles. It makes life easier for you and other developers who may come along, because with proper documentation, all the code will be right there, well organized.

The best place to put them is in the styles.css of your child theme! Child themes are an excellent way to create modifications to your site without disrupting the basic theme’s templates or worrying about updates the theme developer may make. I recently dropped into a learning curve of php as I’m working on a woocommerce retail site. It needed several cart and checkout page options rearranged, so I was in the child theme’s files quite a bit. That file is accessible through the Appearance > Theme Editor menu option. So handy.

I’m going to wrap up this post now, and follow up in the next post with some thoughts and insights into how I like to document my CSS. Please make your lives easier by placing your CSS in the best location. Perhaps I’ll come across it one day, and thank you for that.