Re: CSS Long Files

[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.