In 2013, I started a quarterly San Francisco Sass & frontend meetup called The Mixin. I have felt very fortunate with the line up of speakers we’ve had so far. Some of those speakers include:
- the inventor of Sass, Hampton Catlin
- Sass core team member and author of Compass, Chris Eppstein
- Adobe & HTML5 Boilerplate’s Divya Manian
- creator of Susy, Eric Suzanne
- co-creator of SassConf, Claudina Sarahe
- creator of Modernizr, Faruk Ateş
- and Google HTML & CSS spec writer, Tab Atkins
- …among many others.
As if that line up wasn’t already amazing, last week we were very excited to have both Nicole Sullivan, creator of Object-Oriented CSS, as well as Mark Otto, creator of Bootstrap. It was a wonderful coincidence that their talks complemented each other. Common themes were smaller APIs, obvious naming conventions, style guides, and extensible platforms.
Mark shared his tips for modular CSS, or @mdo-ular CSS, as he calls it. ☺
- A simple class structure is preferred. They should be more meaningful. No chaining.
- Minimize overrides; build for reuse.
- Avoid shorthand attribute syntax. (i.e. background is bad, background-color is good.
- Avoid deeply nested selectors.
“Every line of code should appear to be written by a single person, no matter the number of contributors.”
- Document and evolve guidelines for your team.
- Use utility classes that have a single purpose and use obvious nomenclature.
- Automate and track your CSS.
A couple Bootstrap bonus updates came up in Q&A: Bootstrap 4.0 will be built on Sass and will include a flexbox layout system.
Nicole shared her team’s experiences with React and how they iterated over time to land on a “reactified” media block that suited their team’s needs. It was great hearing the steps they took, what they learned, and where they landed.
- React is great for components because it creates consistent HTML.
- It provides a smaller, simpler API.
- It provides “lightning fast” DOM updates.
- She acknowledged that user testing and talking to their designers would have avoided a lot of the steps and helped get to the result faster.
“Designers usually just want traditional top-aligned media blocks & centered flag components. So make those dead simple to use.”
- Don’t reinvent HTML tags, but make different components to package different functionality.
The event was held at Airbnb’s beautiful, well-lit headquarters. It was a great turn out! Airbnb graciously provided dinner and beverages.
I was stoked to have Hampton Catlin, Chris Eppstein, and Michael Misfud in attendance. It’s pretty awesome that leaders in the Sass community come hang out with us!
Finally, I felt very fortunate that so many members of my team at Salesforce UX came by as well. We also gave out some Salesforce UX t-shirts!
If you would like to stay updated on future events for The Mixin, you can follow @TheMixinSF.
If you would like to keep up to date with future events hosted by Salesforce UX, follow us at @SalesforceUX!