Grow your CSS skills. Land your dream job.

CSS Long Files

  • # November 13, 2012 at 5:42 pm

    Hi all. I’m really getting into CSS these days, and learning a lot about it.

    I have a CSS file for WordPress that I constructed that’s 42k in size.

    I was wondering if this is bad to have this big of a file. I’ve even used one of those online compressors and trim down all the white space (was originally 50k). There’s just so many elements on the page.

    Does this really slow down load time a lot per page?

    I guess I’m wondering also, does a page load ALL the elements into cache (background images, fonts, etc…)

    In other words, if page 1 has a background image and a CSS3 font, and page 2 doesn’t…if someone goes directly to page 2 does it load all those background images and fonts even if they aren’t being displayed on the page?

    Hope this makes sense.

    Great to find you guys! Thank you so much for all your hard work in helping us all.

    Robert

    # November 13, 2012 at 6:03 pm

    Only images being used on the page will be downloaded, so no worries there!

    42kb is probably nearing the max that you should be aiming for. Trimming all of the white space alone isn’t going to help you much. What you should really be doing is seeing if you should be adding classes to your markup instead of defining more and more styles.

    Here’s an example of a classname that I’ve started using (you can ignore the @mixin declaration if you want, that’s just good ol’ SCSS):

    @mixin bgcover() {
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    }

    .bgcover {
    @include bgcover;
    }

    Now whenever I need to use `background-size: cover;` I just make sure to added the class of `bgcover` to my element. This means I only need to declare the CSS once, cutting down on file size.

    Also make sure you’re using shorthand for things:

    .some-element {
    background-image: url(‘someimage.jpg’);
    background-repeat: no-repeat;
    padding-left: 20px;
    padding-right: 20px;
    border-left: none;
    border-right: none;
    border-top: none;
    border-bottom: 1px solid red;
    margin-top: 5px;
    margin-bottom: 10px;
    }

    /* the above is terrible and can be condensed down to the below */

    .some-element {
    background: url(‘someimage.jpg’) no-repeat;
    padding: 0 20px;
    border-bottom: 1px solid red;
    margin: 5px 0 10px;
    }

    Also remember that if you find yourself constantly needing to override previous styles that you’ve created, you probably need to go back and do some optimization.

    # November 13, 2012 at 9:53 pm

    @TheDoc – using bgcover() and @include bgcover in your example above, is that also preprocessor only CSS or is that something you can do with plain old CSS? I was under the impression that stuff like that was not available in plain-jane CSS. Sorry for the noobish question. Currently, when multiple classes utilize the same properties, I’ve been doing something along the following lines:

    .some-element, .other-element, .third-element {
    /* Styles all three use */
    border-bottom: 1px solid #000;
    padding: 5px;
    background-color: pink;
    }

    .other-element {
    /* Styles unique to this element */
    margin-left: 5px;
    }

    .third-element {
    /* Styles unique to this element */
    margin-left: 2px;
    }

    Using CSS like I do functions in PHP would be even better.

    EDIT: After some googling, I’ve confirmed my original suspicions. So, I’d like to change my question a little bit. Short of adopting preprocessors, what other ways could I optimize my example?

    # November 13, 2012 at 10:00 pm

    Sorry, yea, it would need the preprocessor. I was just using it as an example. Once you go SASS/SCSS (I still am not sure if there’s a difference) you’ll think of standard CSS as some archaic code.

    # November 14, 2012 at 4:28 am

    If your server is gzipping or using deflate to compress files been transmitted, 40-50k shouldn’t be an issue as it will shrink quiet a bit, for example I have a minified css file, (chunks of a css frame work i could probably spend the time picking out parts I don’t use but would take ages) that takes up 50.9k gzipped that drops down to just above 12k if there was whitespace in the source it would probably be even smaller.

    Yuh keep code bloat to a minimum but check if your site is using gzip on css and ofcourse apply best practicles.

    # November 14, 2012 at 7:31 pm

    Oh wow, I never heard of gzipping a CSS file. Actually I’ve never heard of SASS/SCSS either before. I’ll have to look into these “newfangled things”, LOL.

    Thank you guys so much. I’m just starting to get really good with CSS and it only took me 3 years, looks like I have a ways to go now with SASS/SCSS.

    Appreciate it everyone! Love the site!

    # November 15, 2012 at 4:19 am

    its not actually something you do ya self, the server generally has a setting that enables compression of resources before transmission. You’ll find it quite easy to get started with Sass/Scss, the Scss syntax is the same as CSS you can litterally copy and paste your css file into a scss file and it will work, but then you have acess to all the goodyness of sass, so you can learn at your own pace.

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

You must be logged in to reply to this topic.

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