In Part 1 of this series, we discussed several reasons to establish a style guide for your website. In this part, we’ll examine how to create one. We will use a service called CodePen to embed the HTML & CSS needed to create these elements, so that you can take a peek behind the curtain to see how all of this works.
Naming Conventions
Your style guide provides a reference for developers to use when building the website. A useful tool to have in your pocket is easy-to-remember, meaningful class names. This not only makes it easier to read and understand but also helps increase efficiency.
Using easy-to-remember naming conventions helps your developers to code faster and make fewer mistakes overall.
Both of the classes in the example above perform the same function. But, if you need the background of an element to be white, which of the two class names do you think you’ll remember?
Modularity
Some new developers learn the bad habit of creating one large CSS style for each individual element on the page. Although the end result might be the same, the code quickly becomes cumbersome and unwieldy.
Keeping classes small and utilitarian allows a developer to only apply the necessary pieces needed to achieve their design. Multiple classes can be combined to achieve different effects.
You can see some of these principles at work in the CodePen examples below. We have several classes that change the sizing of text, more classes that control the weight and style of the text, and even more that control the line height of text on a page.
This gives you the option to pick and choose which of these utility classes are needed to cause the markup on your web page to match the vision of the original design.
Take a look at the HTML and CSS tabs in the example below to see how one might put something like this together.
Consistency & Accuracy
One of the strongest arguments for creating a style guide is the need for consistency and accuracy when building your websites.
In the example below, there are many different styles of buttons that can be used depending on what you are using the button for. Having a btn-light class allows you to create the exact same button anywhere on the website and it just works.
Adding to that modularity is the option to force a button to fill the width of its container using the btn-full class, which could be thrown onto ANY button on the website!
This means that any developer who builds a page or a section on your website can simply reference the style guide and copy and paste the markup and CSS for each element they are using, saving time and avoiding inconsistencies.
Putting It All Together
In the example below, these methods are used to build bigger and more complex elements with bits and pieces from your style guide. The topic cards below are containers that hold the previously described text styles, images, and previously created button styles.
