Style-sheet organization: where stuff is… or should be, and why.

In this 2nd part of the series on “How to Customize Responsive WordPress Themes”, we’re gonna take a look at the differences between the style-sheets for regular WordPress themes and responsive ones. We’ll also see how they should be structured, and why some theme designers put responsive styles in separate files.

If you’re new to CSS, you may want to bone up before diving into this series. See the end of this article for a few great resources to get you started.

“Classic” non-responsive WordPress theme style-sheets

In a well-structured style-sheet for any WordPress theme, one of the first things you may notice is the presence of an opening section called “reset”. This is a set of base styles that, even if there is nothing else in the style-sheet, should render the theme content equally in all browsers. We won’t get into exploring whether this is required or not, as even the “experts” are of divided opinion. Suffice it to say that the consensus is that it’s a question of craft and personal choice of tools according to the needs of the project.

There are several variations of reset styles (see here for the 5 most popular). WordPress themes, in general, tend to use the reset script by Eric Meyers. Here’s a screenshot of what that basic code looks like:

As you can see, it’s minimal and uncluttered, it gets the job done, and it’s up to date. After the “reset” section, you’ll see hundreds or possibly thousands of lines of (hopefully) familiar CSS. Whole sections would be clearly labeled using commented-out headings like this example: /* Main menu styles */.

Then… well, that’s about it for “classic” themes. First “reset” styles, then the theme styles; not very complicated are they? Now it gets fun…

Responsive WordPress theme style-sheets

Responsive theme style-sheets can look completely different at first glance; they can even seem oddly blank. You will encounter some style rules that may be a bit unfamiliar: things like rem for instance (rem stands for root em; see here and here for more on that). You may see @import rules at the very top (required by themes that may have several different style-sheets for different purposes). And then there are the all-important media-queries.

Let’s start by looking at how Twenty-Twelve is set up, then explore something a bit different. Don’t have Twenty-Twelve yet? You can download it here.

Twenty-Twelve is a responsive WordPress theme designed by the folks at WordPress and is intended to be the upcoming default theme. Open up the style.css file in your favorite text editor now. You’ll notice a difference right off the bat: there are notes at the top of the file referring to the rem values used throughout the style-sheet. (Did you read up on rem by following the links above? Good.)

Those values are essential in a responsive theme as they allow the theme to maintain a consistent appearance across all devices. The notes are followed by the familiar reset styles (slightly extended). Then comes about 1200 lines of plain ol’ CSS. So far, so good.

At line 1351, you’ll spot something new and exciting, and maybe a bit confusing: media queries. Media queries perform the actual wizardry that makes responsiveness possible. If you’re not familiar with what they are and what they do, you can Google around to arm yourself with your own expertise. Then use it to challenge my presumptions when we get around to exploring them in much greater detail in parts 4 & 5 of this series!

And now for something completely different…

So far, we’ve seen how the style-sheet for a non-responsive WordPress theme is set up, as well as an example of a basic responsive one. However, many responsive themes will have more than one style-sheet. Take a look at this sample file structure:

In the main theme folder, we see the familiar style.css file, then a file called responsive. There’s also a folder labeled stylesheets with 2 more of them inside. That’s 4 style-sheets in all!

When several style-sheets are used in a responsive WordPress theme, they must be called in the theme’s header.php file. Here’s what that could look like:

We can see there is the standard call to the style.css file. Then 3 more to include the responsive, base and layout style-sheets. There are 2 simple reasons for the multiple style-sheets as in this example:

1. Sometimes, it’s just easier to keep things organized by putting the responsive styles in separate files.
2. This particular theme example was built on a grid framework that already had the base and layout files in it; so why complicate things by removing them? (We’ll look more into grids and other frameworks in the last part of this series.)

Conclusion

We can see that style-sheet structure in responsive WordPress themes is really not that complicated once you’ve taken a good look. For designers, it can be a question of personal preference, or simply keeping the file structure of the base framework being used.

When you get into customizing a responsive WordPress theme, it’s important to understand that structure, and where to find the stuff you want to modify. When your theme is based on an unfamiliar framework, that can get a little tricky. So, if you have selected a theme you want to modify, take some time to inspect and familiarize yourself with its style-sheet file structure.