[CSS] 6 tricks to make your CSS file smaller

[CSS] 6 tricks to make your CSS file smaller

...without making it look weird or/and hard to read.

1. If it's 0, drop the units

Easy. If you're setting a margin, padding, box-shadow or anything like that, you can just put 0 instead 0px. 0 in CSS is always a zero.

The difference is usually 2 characters.

2. Combine properties

You have something, and you want to add margin on the right and at the bottom. The most obvious way is to write margin-bottom: X; and margin-right: Y;. But you could use a shorter way: margin: 0 Y X 0;. You can handle paddings by doing exactly the same.

The difference is 18 characters, ~50%.

What about left and right border, with no border on top and bottom? Classic approach would be to write border-left: 1px solid #ddd; and repeat it with border-right. Combined way? border: 1px solid #ddd; border-width: 0 1px;.

The difference is 13 characters, ~25%.

3. Combine/group selectors

If you're using :before or :after for ratio-reasons, you can combine them with basic styles, you know, content, display: block;, etc.

If you're using them for creating arrows, frames or whatever, or when you're styling slider arrows - group the biggest chunks of code.

Of course, it won't always be efficient. Sometimes, repeating a selector 5 times, just because they're sharing 2 properties, just won't make sense. It's better to switch to reusable classes.

4. Use smart classes

Smart doesn't mean a class that looks like button_blue-background. It's more like blue and button. We can style .blue to have blue background and white font color and we can style .button to have slightly rounded corners, sensible padding, and probably a hover effect with box-shadow.

First of all, the classes are short. Then, we can add the fact, that blue may now work with any div, section or whatever.

The difference is... making your life easier in the future.

5. Use variables

Variables are almost the best way to save some space, without overthinking stuff! While with colors it might not make a difference (color is usually 7 characters, meaningful variable can be longer), it really works like a charm with box-shadow, border and font-family.

Setting up a set of variables like this...

--main-color: ;
--accent-color: ;
--main-font: ;
--accent-font: ;
--border: ;
--box-shadow: ;
--font-size: ;
--gap: ;

...can make your code cleaner, easier to maintain and way way easier to adjust for dark-mode or accessibility. It can also be very helpful with RWD, when some of the fonts or gaps should be smaller.

--gap: is the variable I'm usually using for margins and paddings across the site. It's extremely useful within grid elements and just helps with being consistent.

6. Tabs vs spaces

This is that time when programmers start to melt. There is no right way there, but there is a right way with CSS. And it's TABS. Your CSS can be even 30% smaller if you're going to use tabs instead of 4 spaces indent.

Of course, you could drop indentation in general, but... please, just don't. It's not worth it.

What's not worth it?

Long time ago, when I was learning how to code, filenames used to have spaces in them. So when I was writing the piece for background image, I learned to put ' around the url. Just to be sure, that even in case of a filename with spaces inside, it just won't break.

It might feel like a waste of 2 characters, when we're that character-greedy, but it's for safety. It's just not worth risking.

I know, WordPress changes the whitespaces into - and drops a lot of special characters, but if you're uploading files to the server or using any custom CMS, that still might be useful to keep the precaution.

If the idea of dropping new lines crossed your mind - please, don't do it. If you care about the size of your file, just use some minifying tool, but always keep the original version in the form, that's easy to read. If you will need to edit or add anything it'll way way easier, if your code looks nice.

It's also extremely helpful, when you're working in a team and someone else might work on your code in the future. Sounds like something obvious, but it's still pretty common to leave ugly CSS behind you.