How to Handle CSS Organization

1 Views

I notice not many people have downloaded the plugin Combine CSS. Without it, I don’t know of a better way to automatically combine CSS files. I was wondering, are 99% of the developers using WordPress just working in a single stylesheet? Is there some other way to combine CSS without the Combine CSS plugin?

Post Views: 1

Related posts

5 comments

  1. If you have shell access to an Apache server, Google’s Mod Pagespeed is a great way to do so automatically at the server level. It has really powerful options for doing much more than just combining CSS and speeding up your sites.

    mod_pagespeed

    mod_pagespeed speeds up your site and reduces page load time. This open-source Apache HTTP server module automatically applies web performance best practices to pages, and associated assets (CSS, JavaScript, images) without requiring that you modify your existing content or workflow.

  2. Several constants are used to manage the loading, concatenating and
    compression of scripts and CSS:

    define('SCRIPT_DEBUG', true); loads the development (non-minified) versions of all scripts and CSS, and disables compression and concatenation,

    define('CONCATENATE_SCRIPTS', false); disables compression and concatenation of scripts and CSS,

    define('COMPRESS_SCRIPTS', false); disables compression of scripts,

    define('COMPRESS_CSS', false); disables compression of CSS,

    define('ENFORCE_GZIP', true); forces gzip for compression (default is deflate).

    Is this the answer you are looking for? WordPress has a build-in concaternating of scripts and css. But you have to activate it by yourself with define( 'CONCATENATE_SCRIPTS', true );. It seems most of the blog owner doesn’t know this or simply doesn’t care.

  3. I agree with you that some of the restrictions on what you can/can’t answer on a site titled “WordPress Answers” are a tad ridiculous. That aside, I will actually provide you with an answer rather than argue the point.

    1. Sometimes we have CSS which is only necessary for a single page. This is often the case with things like contact form or archive pages. To handle this we can incorporate some of the answers found here: http://wordpress.org/support/topic/different-css-on-one-page This type of solution will keep you from loading unnecessary CSS on pages that do not require it, very helpful.
    2. Many theme developers will put their CSS in a single stylesheet but this is not always the case. I suggest calling CSS for things like plugins or options panels internally in your theme’s files, rather than having them in the stylesheet for a potential novice to fiddle with.
    3. If you want to compress the CSS you can use any number of free CSS compressors. One I use is Styleneat: http://www.styleneat.com/
    4. I personally find it somewhat pointless to use the plugin you’ve mentioned. It doesn’t take much to move the appropriate CSS to the appropriate stylesheet.

  4. I’m a big fan of CodeKit: http://incident57.com/codekit/

    I work with LESS, so I organize my CSS into multiple .less files: reset.less, webfonts.less, forms.less, style.less, etc. Every time I make a change on my local computer to one of these files, CodeKit automatically compiles the whole thing down to the main style.css. That way my code is nicely organized but the site only needs to load a single, compressed stylesheet.

  5. I use Sass and Compass, which offer numerous benefits beside CSS combining and compression. LESS is another great option, as mentioned by @Dalton above. It’s not necessary to purchase CodeKit to use Sass or LESS (though it is a great app), as both are open-source.

Comments are closed.