I was invited to speak at HTML5 Developer Conference, a two day, five track conference in San Francisco on October 19 and 20, 2015. It was a beautiful conference, held in the heart of San Fran in three buildings, located by the Yerba Buena Gardens. I was joined by other highly knowledgeable speakers from companies such as Microsoft, Netflix, Yelp, Google, Meteor, Dolby, Paypal, Adobe, EA, Sony and many more.

My talk, Evolving Web Applications with Module Design Components, was slotted for the opening track on day two in the Screening Room of the Yerba Buena Center of the Arts building. A cozy, intimate room that held just over 100 people.

I talked about the benefits of writing CSS that is reusable and easy to maintain. Along with giving tips and tricks to get you and your team started, I showed living examples of applications that already use these principles and applications that would benefit from them. At the end of the talk, there was an engaging Q&A with the crowd, and discussion of best practices. I’ve included a few of them below:

What is the smallest module that makes sense?

Use your best judgement. Create ones that offer a specific style choice, but don’t create classes based on CSS properties. Think of input types, font choices, common layout styles as good choices for module classes.

How many classes is too many classes to chain?

I think this depends, but if you’re consistently using more than 5, it might be time to create a new class that consolidates those chained classes together.

How do you ensure that you’re not breaking other parts of the application?

There has to be regression testing, and open communication with the team and QA. Ideally, if everyone is using global classes, they should piece together correctly. Things tend to break, when people starting creating one-off classes. If you find broken UI elements, bring them up in Slack, and check git commits to see where, why, and how it broke.