Style guides

When I started my job about 2 months ago I went through their standard Front End Developer training and in it we talked a whole bunch about modular CSS and reusable patterns, it was super awesome. But in the course of it we also talked about style guides. At the beginning of each project, they’ve been trying to get started on a style guide first, just building out resusable patterns so that it is all in one place when it comes time to do builds of pages, etc.

So on my first project I started doing this as well. And now, with a few projects under my belt I can safely say that it is the only way I would start a project in the future. It is amazing how much easier it makes life once you’ve abstracted out all the patterns and modules from a design. Then you do the grid or layout styles and when you actually build out pages they fall right into place. The reason I think so many people don’t do this is because it takes time up front. For at least a day, or longer if it is a large project, you are just building out one page of code filled with components. For project managers or bosses, they don’t see a lot of progress towards the finished project. But the beauty in this process is that you find all the gotchas in the designs and code before you already have 50% of the project built out. This is extrememly helpful and it gives the developer a lot of time to ask the pertinent questions of the designers to make sure that all the things in the comps are truly what was intended. In addition it allows for some baselines to be set, allowing for fewer classes instead of realizing part way through a build that you now have 10 different classes for copy font sizes. Getting all this discussed early on makes the rest of the process extremely smooth. Because to be honest, designers don’t always do things exactly the same in every layer comp and a lot of times it is oversight on their part, not intentional. Best to figure that out early and save a lot of time and code up front.

I’m sure most of you have seen examples of public style guides that are out there, if you haven’t Anna Debenham has a great collection going, but what you build doesn’t have to look really good, it just has to be enough for the team to know what is happening in the code. I can’t imagine starting any project, no matter how big or small, any other way. Plus, I now just think they are fun. I enjoy creating the legos that will go together to make the site or app really shine.