Multiple Page Templates & CSS

February 24, 20232 Views

What’s the best practice for handling CSS on a theme with multiple page templates?

For example: I will have a Full Width page template and a 2-column page template.

Is it best to just call out the containers in a single CSS (#fullWidthContainer vs. #twoColumnContainer)

Or is it better to have separate CSS files for each page template?

Post Views: 2

1 comment

Anonymous says:

February 24, 2023 at 1:45 pm
This isn’t really WordPress specific, but from the server perspective it would add additional http requests for visitors to load additional css files, versus pulling the same site-wide css file from cache.

From a css perspective, I prefer to keep it all in one file. Some people prefer to organize things differently, like all text styles in one file and then layout specific stuff in another. In that case, they may keep layouts specific to certain templates separate.

For simple layout differences, I do something like:

template a:
```
<div id="main-content" class="full-width">
</div>
```
template b:
```
<div id="main-content" class="narrow-width">
</div>
```
css:
```
#main-content {
    /* common to all content */
}

.full-width {
    width:500px;
}

.narrow-width {
    width:300px;
}
```
I keep IDs meaningful to the content, and use classes to define layout.
Log in to Reply