Alexander Skogberg

UX, Web & Design

To content

How I write CSS

It takes one day to learn and a lifetime to master. Yes, I’m talking about CSS.

During my roughly six years doing web development, I’ve written some crappy CSS. Luckily, I’ve improved to the point that I feel confident writing this post.

So, here’s my advice on how to write CSS.

Use a preprocessor

If you’re a web developer, you’ve most likely heard about CSS preprocessors such as LESS and SASS.

SASS logo

In recent years, they’ve pretty much become standard from what I’ve seen at clients I worked with and colleagues I’ve talked to.

I started using SASS a few years ago and it still amazes me. It saves me a lot of time every day.

SASS is a scripting language that outputs CSS. It’s basically just like CSS, but turbocharged with features from object-oriented programming like methods, global variables, abstract classes, inheritance and so on.

/* Mixin for setting font size and adjusting line height */
$rembase: 16;
@mixin typography($font-size: 16, $line-height-multiplier: 1) {
    font-size: ($font-size * 1rem) / $rembase;
    line-height: ($line-height * $line-height-multiplier) / $font-size;
}

Using a CSS preprocessor will save you time if you for example:

Follow a naming convention

It’s easy to mess up your CSS and end up with styling conflicts, unused and inconsistently written code, poorly named class selectors and so on.

Therefore, I suggest creating and following a naming convention.

You shouldn’t write CSS for you to understand, you should write CSS for someone else to understand.

In several projects, I’ve taken a lot of inspiration from Trello’s CSS guidelines for keeping my CSS tidy and neat. Please, check it out.

However, I do make exceptions if don’t have full control over the HTML markup. Sometimes it’s not worth the time. And yes, sometimes I’m just lazy :)

Trim the fat on a regular basis

When writing CSS, you’re gonna have to use older CSS features for older browser and even sometimes browser specific hacks. You can’t solely the fancy new CSS3 features.

After a while, these lines of code add up. Once you get less or no visits from a certain browser, this code will be pure bloat.

I’d recommend tracking visitors using Google Analytics and analyzing these on a regular basis. When visits from certain browser drops below a certain level, there might be some lines of CSS you can delete. For example, a vendor prefix for a new CSS3 feature.

Spring cleaning your CSS feels just as great as spring cleaning your wardrobe.

For learning which CSS features work with which browsers, I’d recommend visiting html5please.com and caniuse.com.

Read books

Twitter is my primary source of new knowledge about web development, but I’d still recommend reading some books.

A Book Apart series

A Book Apart offer several book that will improve your skills in writing CSS, especially these:

Finally

That’s all I can think of right now. If you’ve got any advice you like to add, please do that in the comment section.

/Alex

Much responsive Many CSS Very breakpoint So media query Such HTML Wow