Nicole Sullivan & Mark Otto talk Front End
Notes & images from The Mixin June 2015 at Airbnb
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.
You can see the full list at our website, which was designed by my co-organizer, Mike Fowler.
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 Otto
@mdo-ular CSS
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 Sullivan
Building the Media Block in React.js
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.
Bonus: an Update on LibSass
In addition to the great talks by Mark and Nicole, Michael Mifsud (libSass core team member and NodeSass project lead) gave an impromptu update on the state of libSass. It’s almost at feature parity with canonical Sass!
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!
Thank you to Amy Lee, Susan Lin, Daniel Eden, and Ricky Holtz for notes and photos for the event!
Follow us at @SalesforceUX.
Want to work with us? Contact uxcareers@salesforce.com
Check out the Salesforce Lightning Design System
