5 Tips for Writing CSS Based on a Style Guide

When I first started as a front-end developer, I was often overwhelmed when beginning a new project. Even with mockups and style guides to help guide my work, I was oftentimes still unsure of where or how to begin writing my CSS in the most efficient way possible. This article will outline 5 tips that I’ve learned over the years that have helped me break down new projects into more easily manageable chunks. 

*This article assumes that you’re writing your CSS using Sass.

1. Decide on a class naming convention

Are you using BEM? SMACSS? Some other naming convention that you’ve created yourself? No matter which naming convention you choose, it’s important to decide before you begin writing your HTML and CSS so your class names are consistent and understandable. This will not only help you as you continue development, but it will also help any other developers who may end up maintaining your code later on.

2. Set up your variables

The first thing you should do before writing any actual CSS is gather and assign values to all possible variables. If you have a style guide, many of these should already be documented for you. Color hex values, font stacks and sizes, horizontal and vertical gutter sizes — anything that is documented for you in your style guide, you should be documenting as variables. That way, as you begin styling your elements, you can immediately begin using the variables you have already set up. You probably won’t capture all of the variables you’ll need right away, but that’s okay. This will at least get you a good chunk of the way there!

3. Identify similarities and use mixins

Web/UI designers know the importance of designing with consistency in mind. When you look at a style guide, you’ll probably notice that many different components use similar style rules. For example, a blog post teaser card and a form might use the same background color, border color, and padding. Whenever you notice more than one component using a similar set of style rules, create a mixin for it. That way, you’ll not only reduce duplicate lines of code in your sass files, but you’ll also make your project easier to maintain in the long run. 

4. Start from the smallest elements, and work your way up

Sometimes (or, if you’re me, most times) it can be really tempting to start by styling the most impactful and exciting elements of a page, such as the main navigation or the main hero component of the home page. However, it’s much more efficient to begin by styling the smallest elements first, such as headers, links, buttons, inputs, etc., and letting those styles trickle down into the larger components. You’d be surprised at just how quickly your design starts to take shape before you’ve even touched the complex stuff!

5. Test responsiveness and browser compatibility as you go

Sometimes, it can be easy to put off looking at your styles in other browsers and on other devices, especially if you’ve got momentum or you’re working on something particularly complex. However, I’ve personally found it to be extremely helpful when I’m working on a single component or region to check my work on different browsers and screen sizes before allowing myself to move onto something else. That way, I don’t have to remember to revisit that component later on, because I will have already caught and fixed all of the bugs related to that component.

Conclusion

Starting a new project can be daunting, no matter how experienced you are. However, as is true with anything, I’ve found that if you break down all of your tasks into smaller chunks, a new project and feel a lot more manageable. This is by no means an all inclusive list, but these are just five things that have really helped me whenever I’m starting a new project!