7 Things we learned at Generate CSS 2019

On 26th September NE6 attended the first of many language-specific Generate conferences ‘Generate CSS 2019’. The full-day event promised an array of speakers delving deep into modern CSS best practices. From CSS grids (Michelle Barker) to the of philosophy how we use web technologies (Jeremy Keith), the speakers covered all aspects of what CSS looks like today and how best to use it. This article will cover my favorite parts of the day and offer a few pointers for web developers.

Summary

1. SASS was made for designers

Natalie Weizenbaum, Lead Designer of SASS and Tech Lead of CSS at Google kick-started the conference by illustrating the success of SASS/SCSS since its release over 13 years ago. Natalie explained that SASS was initially created for designers.

SASS’s core functionality facilitates the development of efficient design systems with strong consistency. In development, many of us at NE6 use SASS variables, extend/inheritance classes and nesting to mirror Sketch symbol libraries. This improves workflow by making it easy to re-use components and keep a website’s look/feel consistent.

To learn more about SASS check out the beginner guide here.

2. The days of @media min/max-width could soon be over…

Ok, we might have got a bit ahead of ourselves here but you would have too if you saw Michelle Barker’s talk on CSS Grid! Michelle showed that by using CSS grid’s auto-fill/fit with minmax() developers can create responsive layouts without even using @media queries.

The declaration below made on a grid container would prevent any grid item from becoming less than 100px in width, fit as many items as possible on a grid row and stretch grid items to fill the full width of the grid container. Whatever the screen width, all items are the same width as each other, the number of rows and number of items per row just changes.

In many ways, this simulates a normal website layout with % widths set but with one key difference. There’s not a big list of @media queries needed to tell the browser when to change between 3 columns or 2 columns per row (etc…). To find out more about auto-sizing CSS grid columns check out this great article by Sara Soueidan.

.grid-container {
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}

3. Always fall forwards

During their talks, several of the speakers reminded attendees that when testing out experimental CSS it’s important to provide fallback methods. 2 pieces of advice were consistently mentioned by speakers throughout the day:

For example, the declaration below will only apply if the browser supports ‘display: grid’.

Overall, using both techniques together will help mitigate unexpected behaviour from partially supported CSS rules. However, putting fallback methods first is even more essential when using @supports because @supports itself is still not supported in E11.

@supports (display: grid) {
div {
display: grid;
colour: yellow;
border: 1px solid green;
}
}

4. The future of type is variable

After the first tea break, Bianca Berning introduced variable fonts and their performance benefits. In web development, it’s often that websites use several font files to achieve good visual hierarchy. This is usually through applying different font weights (i.e. bold, italic, light) or additional fonts (i.e. 1 font for headings, another for body copy).

Calling multiple font files to the browser increases the amount of data and HTTP requests needed to access a website. This influences load time, especially when using mobile data. However, variable fonts hold all font weights and styles in a single file and depend on parameters defined by the developer to distinguish which font to show.

Not only do variable fonts have great performance benefits but they also make text animations really easy. To see some examples of variable fonts and font-weight animations check out the v-fonts website: v-fonts.com

5. Target interaction type, don’t assume

Brenda Storer welcomed everyone back after lunch by introducing interaction queries and explained that instead of assuming a user is on a touch device by their screen size we can actually target devices without hover states specifically.

The first of the declarations below only runs on devices that actually allow users to hover. No guessing, developers can have absolute confidence!

The fun doesn’t stop there though, CSS now also includes ‘pointer’ interaction queries. This allows developers to tailor the experience for devices that have very small/accurate cursors (i.e. TV browsers and games consoles).

For more information about how to use interaction queries, Ross Bulat has written a great medium article with some tips on how to use them.

@media (hover: hover){
.element:hover {
background-color: red;
}
}

@media (pointer: fine){
.element {
padding: 5rem;
}
}

6. Limitation breeds creativity

Before the final break, Cassie Evans opened up her talk by likening development teams to the childhood drawing game sometimes known as ‘The Combination Man’. This game involves each player taking turns to draw a different part of the human body, which, collectively forms a finished ‘masterpiece’.

Cassie also mentioned she used to play a ‘Scribble Game’ that involved creating artwork inside a scribble drawn by her mother and discussed how these limitations allowed her to be more creative through making the best of out what she had to work with.

We thought both of Cassie’s stories proposed a brilliant mentality for web development; trying to include all the best frameworks and libraries on every project is sometimes unrealistic. Instead, we should focus on making the best with what we are given and never stop introducing new ideas/thinking outside the box.

The second part of Cassie’s talk focused on SVG animations with CSS and proved extremely insightful. She showcased a game made almost entirely with the CSS counter-increment property and :checked selectors that changed on click to calculate the user’s score. If you want to learn more about how to make immersive animations on the web check out Cassie on Twitter.

7. Plan for the worst. How well does it fail?

Jeremy Keith, the final speaker of the day stripped web development right back to its foundations (literally, there were a lot of references to architecture).

He explained that the practice of making people feel comfortable in a space or helping them understand a different medium is not unique to technology. Whether it’s ‘Understanding Comics’ (Scott McCloud) or ‘101 things I Learned in Architecture School’ (Matthew Frederick) there have been many teachers that offer transferable learnings; because the subject of all these disciplines is humans and we evolve a lot slower than we think.

Jeremy reminded us that user experience doesn’t have to be the same for every device. Instead, (as developers) we should make solutions that ‘fail well’. For example, if you rely on JavaScript heavily in your development stack don’t offer no-script users a blank page… offer them the best experience possible with the tools available.

Conclusion

Overall, we thought Generate CSS 2019 was a great insight into the world off CSS today. It explained what’s new and what’s important.

We’d highly recommend attending the next event if you’re an established developer wanting to learn new techniques or if you’re a junior developer looking for the best topics to research and improve upon. Generate’s next conference is GenerateJS on 2nd April 2020. For more information see generateconf.com. Thanks for reading.

Harry RonchettiHead of UX