1

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?

2

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.