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.

I am creating a theme but find the CSS file too long, would it be acceptable to split the CSS file into several so a typograhy.css buttons.css table.css or would that reduce performance and cause other problems? or are there better ways of managing CSS files.

share|improve this question

closed as off-topic by Chip Bennett, G. M., s_ha_dum Apr 19 at 14:45

This question appears to be off-topic. The users who voted to close gave this specific reason:

If this question can be reworded to fit the rules in the help center, please edit the question.

2  
Please edit your question to clarify how it is specific to WordPress, rather than merely taking place in its context. –  Chip Bennett Apr 19 at 13:32
    
Who upvoted this?? –  Pieter Goosen Apr 19 at 18:00
add comment

2 Answers 2

Single HUGE CSS file maintaining is very difficult.But you split that files in multiple then it causes extra http requests which could slow things down.

sloution according to me.

  1. If you know that your CSS will NEVER change once you've built it, Build multiple CSS files in the development stage (for readability),and then manually combine them before going live (to reduce http requests)
share|improve this answer
add comment

It all depends on your current focus. If it feels more manageable to write loads of css files with loads of http requests. Go for it. If this isn't a "proper job", and you don't really care about "best practices" it's just training anyways.

However, when you get to "best practices" of finishing a site, not just a theme, you'll want only one css file, and you most likely want to dequeue/unregister css files from any plugin in your functions.php, and put the relevant code into the main theme stylesheet as well.

If you really wanna look at creating a better workflow, take a look at css-preparsers. I myself is biased towards SASS: sass-lang.com If that's out of the scope you're working in, you can also make a css file more manageable by separating it into logical structured parts as you write it.

This way you can ctrl-f to the right section of the file by looking for * print or * all.

/* css */

/******************************
 * reset / normalize / opinionated */
 ******************************/

/*general css-rules for all sites first. box-model: border-box, normalize.css and html5boilerplate helper classes for starters */ 

/******************************
 * typgraphy
 ******************************/

/* site-specific h1, h2, p etc ... */

/*****************************
 * header
 *****************************/

/* banner, logo, menus, etc ... */

/*****************************
 * all pages
 *****************************/

/* stuff that goes in the middle on all pages */

/****************************** 
 * plurals, archive, search, blog
 ******************************/

/* stuff that goes into pages that show more than one post per page */

/*******************************
 * solo, singles, pages
 *******************************/

/* stuff that goes into .page and .single pages. one article per page */

/*******************************
 * front-page
 *******************************/

/* stuff for only the front page. */

/*******************************
 * widgets, sidebars, hero-units
 *******************************/

/* stuff in other places of the site. */

/*******************************
 * footer
 *******************************/

/* stuff that goes in the page footer, colophon / copyright etc */

/*******************************
 * print
 *******************************/

/* simple styles for printing */
share|improve this answer
add comment

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