Grow your CSS skills. Land your dream job.

Faster CSS!

  • # January 7, 2013 at 9:11 am

    i have a wordpress site with a lot of pages. i have just one style.css file. so i think this could be time consuming for loading every page because everypage has to load styles of all pages that doesn’t need! .so can i have a separate css file for every separate page? i mean a file with style of header and footer and other files for styling page contents. is this useful for speed?
    if it is useful how can i do this?

    # January 7, 2013 at 9:25 am

    any help?!

    # January 7, 2013 at 9:38 am

    It’s better to have all your styles in one CSS, the more css files you have, the more HTTP requests your site has to make. The same goes for your javascript files. Here’s a great video by Chris to help with improving site performance: [http://css-tricks.com/video-screencasts/114-lets-do-simple-stuff-to-make-our-websites-faster/](http://css-tricks.com/video-screencasts/114-lets-do-simple-stuff-to-make-our-websites-faster/ “”)

    # January 7, 2013 at 9:50 am

    thanks a lot @Bonzai . that was what i wanted to know.

    # January 7, 2013 at 10:21 am

    @mostafaghanbari, here’s an article from this site about appropriate css files as well.. http://css-tricks.com/one-two-three/

    # January 7, 2013 at 11:09 am

    @mostafaghanbari, use [This…](http://www.refresh-sf.com/yui/ “”) to compress your css and scripts and with .htaccess apply cashing to static resources and you’ll be fine

    # January 7, 2013 at 11:40 am

    @mostafaghanbari, its depends, if you have a big css for another section (another page) of the site maybe you should put on a separated file, if the user ever hits that section that stylesheet is loaded, but if not they don’t need to load.

    If isn’t so big just shove all on the same CSS.

    Besides that try to use caching as viewed on Screencast [#114: Let’s Do Simple Stuff to Make Our Websites Faster](http://css-tricks.com/video-screencasts/114-lets-do-simple-stuff-to-make-our-websites-faster/) quoted from @Bonzai and if needed [Requirejs.org – WHAT ABOUT LOADING CSS?](http://requirejs.org/docs/faq-advanced.html#css)

    # January 7, 2013 at 12:16 pm

    @ChrisP great article but no CodeKit in windows :(

    # January 7, 2013 at 12:18 pm

    @jurotek, very useful. i never heard of that! thanks

    # January 7, 2013 at 12:25 pm

    @ooredroxoo, i’m designing a forum for myself and trying to separate all things from together. because of this it doesn’t matter the css is big or not, it **must** be separate! but i have a problem. the only way i know is using tag but its in header section of wordpress site. how can i say if for example “contact page” in active, bring “contactpage.css” file?!

    # January 7, 2013 at 2:06 pm

    I mean the size based on the requests, if somewhere on the road you end up with too much css loading on a single page, and they are not so big you can merge them to avoid some http connections on your site, and avoid repeating styles between pages.

    By separate the CSS I mean that you will end up with two o more files, and need reference them by link.

    The requirejs can be helpful to load dynamic after the initial load on the page, say you use ajax, you can then require the css for that section.

    # January 8, 2013 at 6:24 am

    yes as you said the answer is requestJS! but i think for avoiding multiple server requests its better to have all things in one place. thanks any way @ooredroxoo.

Viewing 12 posts - 1 through 12 (of 12 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".