I started this process by researching which styleguide framework would work best for our current team and tech stack. I researched different options between static and living styleguides using tools such as Frontify, Pears, SourceJS, KSS-node, and a gem. I then gathered this research and presented it to my teammates. We decided KSS-node was the best fit for our tech stack at the time.
After we had finalized our framework, I worked with our Product and Design team to decide which design elements we should work on standardizing first.
Our lead UI designer then created a master Sketch file to outline what he wanted our elements to look like. I translated these design requirements into CSS expressions contained in global LESS mixins. Other developers could then use these standardized styles by simply adding a class name to the HTML template.
Since adding new class names to templates could potentially cause confusion, I also worked with the rest of our Frontend team to develop a new standard for class names. I researched different recommended models in the field and created one similar to the BEM model. An example of a class name for a subelement would be something like "pricing-tile__features-list." And to make sure changes to these class names didn't disrupt any functionalities associated with that element through jQuery, we began adding classes starting with a "js-" to represent any elements selected with jQuery to further separate design and functionality.
Finally I built styleguide pages to demonstrate these new standardized styles to developers and designers alike with the help of KSS-node. Using it's specialized templating language, I built pages offering descriptions, use cases, visual examples, and HTML examples of the newly standardized elements. Developers could then simply copy the HTML to create a new instance of the style and designers could copy the style while designing new features.