Creating Better CSS

For most web developers we are knee deep in CSS on a daily basis. This can be a good or bad thing. It really depends on the state of the CSS. A well-organised codebase can be a pleasure to work with but, generally speaking, most CSS is a complete nightmare, especially on larger projects.

Good CSS requires a good foundation, some well thought-out coding principles and a selection of tools to keep you on the right track.

Each team, individual and project goals are different so the resources below may not align, but hopefully some off them can be incorporated into your workflow or give you ideas to create better CSS, that you enjoy working on.

---

Principles

It really depends on the stage of the project you are working on, but as a starting point, working together with your team members and deciding on some principles on why and how you do things is paramount to producing a good long-lasting CSS codebase. There are various ways to go about this. It could be a simple text file that is shared amongst team members or a stand-alone site.

Some great starting points for creating CSS principles are CSS Guidelines written by Harry Roberts, Mark Otto’s CSS Code Guide and Nicolas Gallagher’s Idiomatic CSS

It is also worth having a look at how companies do it, like GitHub.

---

CSS preprocessors

Using a CSS preprocessor like Sass or Less can be hugely beneficial if used correctly.

I’m personally a fan of keeping things simple, so when using a preprocessor I tend to only use the basic functionality like variables, mixins, multiple files and limited nesting.

Whatever preprocessor you decide to go with, make sure your team members are all on the same page.

Also, if you do decide to use Sass, Hugo Giraudel’s Sass Guidelines is a must read.

---

Starting resources to build on

If you are lucky enough to be working on a greenfield project, utilising Normalize.css is highly recommended. Normalize.css makes browsers render all elements more consistently creating a level playing field going forward.

Another variation worth looking at is Jonathan Neal’s Sanitize.css.

If you feel you need a little more out of the box, Basscss is an extremely lightweight collection of base element styles and handy utilities.

---

Grids

From my experience, sites that start off small continue to grow over time and, without a solid grid foundation, things can get ugly extremely quick. Having a simple or complex grid within your CSS for easy use is a lifesaver.

There are a billion and one grid frameworks currently available, but Chris Coyier’s Don’t Overthink It Grids article has a very simple starting grid which is super helpful.

If Sass is your choice to author CSS, I have previously written about various grid frameworks to help point you in the right direction.

---

Tools

Having some solid principles and good foundation to your CSS is a great base for creating good CSS. To help take it to the next level we can utilise various tools within our workflow.

The most common tools today are Grunt and Gulp. Each have a selection of useful plugins that we can use to help enforce rules, manipulate our code and provide feedback.

Some plugins that I find useful are:

Recess – Originally developed at Twitter to support their internal style guide, RECESS is a simple, attractive code quality tool for CSS.

• Grunt Recess
• Gulp Recess

CSS Lint – Lint CSS files because speed matters.

• Grunt CSS Lint
• Gulp CSS Lint

PostCSS – PostCSS is used by industry leaders including Google, Twitter and Shopify. The Autoprefixer PostCSS plugin is one of the most popular CSS processors.

• Grunt PostCSS
• Gulp PostCSS

Page Speed Insights – Run mobile and desktop performance tests for your deployed site using Google PageSpeed Insights, with tidy reporting for your build process.

• Grunt Page Speed Insights
• Gulp Page Speed Insights

Grunt and Gulp currently have an astounding amount of plugins to not only help your CSS, but all facets of your project. I highly recommend spending some quality time creating the best build file possible.

Performance is an extremely important part of any project so using tools that can provide real feedback is a must. Some tools that offer a little more than just CSS information are Calibre, WebPageTest and SpeedCurve.

If you just want CSS Stats then cssstats.com is it.

Working on a codebase that is handled by many developers should have one aim.

Look like it was developed by one person.

Thankfully, most common editors have the ability to use the EditorConfig plugin, which can look at the preferences set in the .editorconfig file that resides in the project’s root directory. These preferences should align to the coding standards set out by you and your team.

---

Wrapping up

Nothing will ever be bulletproof in creating perfect CSS. Experience helps. Questioning and analysing your code, your process and your team members’ code can help, but at the end of the day, creating perfect CSS kind of feels like catching the perfect wave. It’s elusive… but if we don’t try, we will never know.