A style guide is a visual representation of all the styles we might want to share across the pages on our application.
Wouldn’t your website development be much more efficient if you used a style guide to reference various components?
At Averment, once we’ve signed off a design our next logical step is to create a HTML/CSS style guide of all the basic components. These may include any heading styles, typography, iconography, alert boxes and form styles.
The major benefit of this approach is that if you have multiple developers working on something, they’re not creating unique styles every time they want an alert message displaying for example.
After the initial guide has been created and development has started, our team of front end developers will look in the style guide first to see if a component has already been created such as a responsive table.
If the component already exists this means a developer will have more time to spend on a feature enhancement or a code refactor. If the component doesn’t already exist then they’ll create it and it add it to our style guide page ready to be shared with anyone else working on the project.
Another small perk of using a style guide is that your code is more consistent throughout and by changing one style in the future it reflects throughout.
@AvermentDigital on Twitter, Facebook and Instagram