Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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?

share|improve this question
add comment

1 Answer 1

up vote 2 down vote accepted

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.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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