CSSconf EU 2019: A Great Community Experience for Those Who Love and Write CSS
CSS is one of those technologies that really divide opinions among developers. Some love its power to craft delightful user experiences, while others hate the complexities around some of its specifications.
Despite what people might think about CSS, two of the undeniable challenges everyone faces when working with it are maintainability and scalability. As many developers put it, “it is easy to write CSS code but it is hard to maintain and scale CSS”. The reason for this is that CSS, as a technology, comes with a lot of freedom and it is up to individual developers to define both code structure and styling approach. On top of that, in many organisations CSS is often an afterthought and development teams do not spend enough time carefully planning its usage. It is therefore quite easy for stylesheets to grow exponentially without a well defined architecture, becoming challenging to maintain and generally uneasy to work with. Any front-end developer has probably experienced some of the typical issues that result from a poorly scalable CSS codebase: unused and duplicated classes, excessive use of the !important rule, variety of styling methodologies, increased time spent debugging CSS code.
At Panaseer, having long recognised the need for a maintainable and scalable CSS codebase, we have kicked off an initiative focused on optimising our own CSS architecture. As part of that work and in order to find out more about the latest best practices and recommendations in the CSS world, in late May we traveled to Berlin to attend what is probably the largest CSS conference in Europe, CSSconf EU.
CSSconf EU is a not-for-profit one-day, one-track event run by a team of volunteers whose goal is to bring together everyone who loves and writes CSS in an inclusive and welcoming environment. This year, it also happens to be the last edition of the conference as we know it, with the team behind it taking a probably deserved break to re-evaluate its purpose and format. With five years of sold-out events behind them and a solid line-up of speakers, we were very excited to finally walk into the beautiful Arena Berlin, this year’s venue for the event.
With a good mix of high level and practical talks, this year’s line-up seemed mostly targeted at an experienced audience. In terms of topics, one of the focus of the conference was definitely Grid Layout (talks by Rachel Andrew and Chen Hui Jing), the most powerful layout specification available in CSS.
Pushing the boundaries of the assumptions and practices that have traditionally driven the implementation of advanced web designs, Grid provides developers with a solid two-dimensional grid-based layout system that effectively makes it possible to place any element in any cell. It allows to easily recreate print-based grid layouts in the browser and refine them with the fluidity of responsive web design.
For those not familiar with Grid, CSS Tricks has come up with an excellent guide on why, when and how to use the specification. In recent years, with browser support finally allowing its use in production environment, Grid has become a powerful instrument for developers and a nice addition to the their layout toolkit together with the Box Model and Flexbox. Interestingly, the introduction of new powerful features, such as sub-grids, is addressing the most critical limitations of the spec and allowing for even more complex grid systems to be created.
At Panaseer, with advanced dashboard layouts on the roadmap, we feel that a combination of Grid Layout and Flexbox will enable us to build even more modular and responsive user interfaces to support our data visualisations.
Another exciting and well-supported technology discussed at the conference was Variable Fonts, which in simple words can be defined as single font acting like multiple fonts. While traditionally a richer typographic experience on the web would come at a bandwidth and latency cost, Variable Fonts finally make it possible to store multiple variations of a type family into a single font file rather than having individual font files for every width, weight or style.
During the talk by Jason Pamental, a series of impressive demos showed how developers can leverage Variable Fonts to create a more fluid web typography by gently modulating weight and size and transitioning smoothly between different values based on the viewport, all making use of a single font file.
Having access to the full range of widths, weights and styles available for a certain font opens up new possibilities for building more immersive web experiences, something that we will definitely try to embrace more with our UX team at Panaseer.
In general, responsiveness and accessibility were two topics highlighted throughout the conference by most of the speakers. While seeing responsive design being a priority among front-end developers and designers is hardly a surprise, it is definitely great to see how much efforts are now put into removing the barriers that prevent access and interaction on the web by people with disabilities.
One of the most anticipated talks of the conference for us was the one around CSS Testing by Gil Tayar. Considering how dedicated the Panaseer engineering team is about testing, we have often discussed whether it was even possible to start writing test for our CSS code. As a matter of fact, even the idea of testing CSS can be daunting as CSS is a technology that generates a visual output and cannot be tested functionally.
However, it turns out that writing tests for CSS is possible and can be done through visual regression, which consists in taking screenshots of web pages before and after CSS changes and evaluating whether the new view unexpectedly deviates from the baseline. As you can image, this is a lengthy task but luckily visual regression tools can automate part of the process and make it easier to run these tests.
The best available tool for the job at the moment seems to be Cypress, which is also the latest addition to our testing stack. Since we are already using Cypress we feel that is definitely worth giving CSS tests a go, especially since the screenshots can be taken as part of the regular end-to-end tests that we will be running anyway.
Another talk that we were looking forward to was the one on Functional CSS by Alex Tait. As part of our CSS architecture optimisation work we have long debated what styling methodology to officially adopt based on our existing codebase and scalability requirements. Even before the conference we felt most attracted to Functional CSS, partly because of the overall good experience we had using it and partly because it appears to be the most scalable approach to styling available at the moment.
For those not familiar with it, Functional CSS is essentially a styling methodology that suggests to apply one visual effect per class throughout the application, eventually building up a modular CSS codebase made of many small parts with a very predictable output. Luckily the talk confirmed our impressions: by focusing on single-purposed, immutable and reusable classes, Functional CSS can provide great benefits when used by a team styling large web applications.
Reducing time spent writing CSS and minimising context switching, decoupling markup and styles, avoiding inconsistencies and adhering to design system patterns all represent points in favour of Functional CSS for us. The talk also highlighted how Functional CSS should be used as a basis for styling in combination with one of the more component-based methodologies to allow for more flexibility, something we certainly agree with.
The last topic of the day was the pioneering CSS Houdini, presented through an exciting talk by Samuel Richard. For those of you who do not know it, Houdini is a W3C task force whose goal is to allow developers to tap into the CSS engine and extend it through JavaScript.
Defined by many as the most exciting development in the CSS world, CSS Houdini aims to enhance modularity and configuration in stylesheets through a series of separate APIs that will make it possible to hook into the styling and layout processes of the browser’s rendering engine. As demonstrated by the live demos on which the talk was centred, CSS Houdini has certainly the potential to change the way developers write, manage and even think of CSS.
While most of the Houdini specifications are very experimental and long time away from being usable in production environments, one of the take-home points of the talk, and of the conference as a whole, is the fact that all these new technologies are already available for developers to try out. On the one hand, even simple usage has the potential to speed up the development and release of these specifications as well as their adoption by browsers. On the other hand, feedback is absolutely crucial for the teams developing these specifications, as it allows them to focus their efforts on what really matters to those who will build websites and applications using these technologies. Whether you are interested in contributing or simply sharing your perspective, as one of the speakers put it, “once a spec is out, it is already too late”.
Looking back at our day at the Arena Berlin, we can definitely say that we felt welcomed from the moment we picked up our passes at the entrance. Still, that was hardly a surprise considering how much effort was put in by the CSSconf EU team into creating an inclusive environment for all attendees. An impressive catering service providing breakfast, lunch and dinner suitable to all dietary requirements, live captioning for all talks, full accessibility to wheelchair users and people with reduced mobility, a dedicated prayer room as well as a quiet room, free all-day childcare and even an inclusivity team available on site were only some of the services provided at the conference. On top of that, both the Community Lounge and the BIPoCiT Space, a dedicated place for people of colour in tech, hosted a series of lightning talks that people could attend during coffee, lunch and dinner breaks. With an additional free frozen yoghurt truck in the venue, live t-shirt printing station and even a corner where to take a break and socialise while getting nails painted by professionals, it is clear that attendees were definitely well catered for.
Overall, CSSconf EU has proved to be a great opportunity for the CSS community to meet, learn and have a great time together in a wonderful and inclusive environment. The fact that this was the last conference in this format saddens us a bit, but it is worth remembering how over the years CSSconf EU has accomplished its ambitious goal of creating a vibrant scene around a technology a lot of us love, with new meet-ups and conferences now sprawling around Europe and beyond. Thank you for the ride CSSconf team, it has been a pleasure!
