This year’s CSSConf was filled with incredible talks from seasoned speakers and amazing first-time speakers alike. Ever since I made it back home, I’ve been thinking about this event.

Although I didn’t make it to last year’s CSSConf, I heard it was a great start to a new tradition of pairing CSSConf and JSConf. Both events sell out quickly and have a great mix of leaders who talk about the next big thing, alongside relatively unknown speakers sharing their incredible research and work.

Nicole Sullivan: Style Guide Driven Development

Conference Video

The day started off with CSSConf co-organizer Nicole Sullivan. For the last couple of years, I’ve sought out any talk from Nicole to find the next trend in CSS development—and this talk did not disappoint. Her major projects for the last couple of years have included redesigning styles, restructuring CSS and performing code audits for Trulia and Pivotal Labs.

Through these projects, and probably others not mentioned, she has worked at building a process called Style Guide Driven Development. This process involves breaking out the view/pages structure of design to see individual pieces of applications as components. When iterating on features, a styled component is just another piece of the feature that needs to be completed. Designers deciding on style, backend devs on server data for features, and frontend devs structuring and coding styles all need to communicate with a consistent language in order to move a project forward. Designing everything on the page, then asking if that will work with code, is a slow process and many iterations can be lost through tossing a page over fences.

On a project with Trulia, Nicole created a documentation tool that builds a living style guide. The resulting HTML document lists all the current components, styled, with code samples to show how it looks in a browser, as well as how to create each component. As she stated in her talk, Trulia built a better version and integrated it into their build process, and open-sourced it too. The project is called Hologram, and is similar to other documentation software, using markdown to create code samples and formatted comments.

Coming home to an existing project, I decided it was time to leverage these tools and development styles. Our frontend web development team works hard to improve our processes and adapt to new tools and flows, and we have been working with living style guides for the last year, starting with the Big Nerd Ranch website. On my existing project, we are now using Hologram to generate the living style guide.

Antoine Butler: CSS Can Solve Problems We Don’t Know We Have

Conference Video

As a first-time speaker, Antoine Butler engaged with and amazed the crowd. His topic was height-based media queries. If you’ve ever written an @media , most likely the conditions for the style were min-width, max-width, orientation: landscape or orientation: portrait.

Antoine talked about making media queries for min-height and max-height. His example was for a left-aligned navigation bar. The complete navigation list could be toggled open and closed, but the critical items on the list were displayed as icons. If the height of the page was less than the needed space for the icons, the navigation item moved to the bigger list. The first and last list items, the brand logo and the “more” button for toggling the full list, were kept in the icon list. Antoine’s example and code walkthrough were eye-opening. It help me realize that we think of most UI space issues in one dimension: how wide it is. The takeaway for me was that CSS can solve problems we don’t even know we have. As developers, we need to translate the capabilities of our language to designers, and that is a career-long journey.

Patrick Hamann: Finding the Critical Path

Conference Video

Patrick Hamann works for The Guardian, where he and his team are currently developing a more performant version of The Guardian online. His talk was about the journey to find “the critical path,” the most important information to get in front of the user as quickly as possible, and the code needed to style and structure that article or information.

His journey began with research on what users want, and the acceptable speed to get it. It turns out that users think applications work if they see it within 300ms-1000ms. Seeing it in 10,000ms meant the site was broken to the user. Patrick shared useful tips for how his team met their goal of a 1000ms time budget:

For his team, this meant fewer requests, or fewer blocking requests, for styles and JavaScript beyond the request for the HTML page. One solution (that other sites use as well) was to inline the critical style definitions in a <style> tag. This reduced requests while declaring styles for the markup that the user needed to see. Putting that code inline meant one less blocking request and the browser could paint. The next solution was adding an async attribute to the JavaScript files. This also made the script loading non-blocking. The scripts could also load the remaining styles as an Ajax call, and store the content in localStorage for the next visit. Combined, these techniques reduced the load time of the new Guardian website so readers can get their articles in an acceptable amount of time.

Watch the Videos

These were just some of the amazing speakers at the conference. JSConf and CSSConf usually post the video of the talks a couple weeks after the event here, so be sure to check them out.