One of the biggest challenges of starting to work on a code base with an already defined style is figuring out and keeping track of all the styles created before me. For example, at Work-Bench, there are over 12 colors beings used, three types of fonts, and multiple combinations throughout. As a developer diving in, it’s extremely overwhelming.
To take ownership in the style of the website at Work-Bench, I created a styleguide to document how everything is used throughout the site.
For me, the most helpful part of creating this styleguide is that I had to comb through the code to recreate the different styles and themes. Thus, I was able to pick apart and analyze how the style decisions were made. By doing this, I became more aware of style subtleties like that the font used for people’s names (Lelum Sans) is different than the font used for titles (Brown Bold) or other text (Avenir Next). This makes me more efficient as a developer moving forwards.
Additionally, I am a big proponent of documenting and storing away low-level Bloom’s Taxonomy processes so that I can focus my brain power on higher level thinking like analysis and synthesis. Before the styleguide, I had to constantly keep in my head which of the 6 shades of green or which of the 6 shades of grey correlate to the design I am implementing. Now, with the styleguide, I can just open up my browser and get the sass color variable in two clicks. That frees me more thinking power for development.
Moreover, the styleguide is crucial for collaborating with other team members across verticals. Previously, I had to point to a specific place in the website that had the themes to describe a particular style. If I could not at the top of my head think of the location on the website where it happens, I would have to take the time to wade through the site and find the style. Now, I can just point a collaborator to one page and they will be able to see the style rules that govern the site’s style.
Although there are rules that govern the site’s style, moving forward, it’s important to think of the styleguide like the U.S. Constitution - as a living document. A styleguide is only purposeful if it represents the tone and vision of the web site’s style. Designers and developers should not be constrained by the styleguide rules that they have created. But, having a styleguide creates for a stronger discussion about any future style changes.