CSS Long Files

[robertallen]

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

[TheDoc]

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.

[pmac627]

@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?

[TheDoc]

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.

[robertallen]

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!

[Author]

Posts