Avoiding CSS crime scenes - practical tips for maintainable styles.
Time: Wednesday 12th March 13:45-14:15
Room: Cinema 1
Track: Drupal Development
CSS is as easy to write as it is to mess up. Over time and with many developers working on it, most projects spiral into a state of organically grown mess, making it increasingly difficult to update the design. At some point, even seemingly simple change requests can require a major rewrite, which is always a hard sell. This talk aims to help developers recognise and avoid common pitfalls that decrease the half-life of their codebase.
We’ll examine the challenges that make CSS inherently hard to maintain and discuss strategies for addressing them. While I’ll briefly touch on approaches like atomic design, BEM, living style guides such as Storybook, and soft-decoupling to integrate with Drupal, the focus will be on resolving bad CSS patterns. This includes issues like excessive specificity, weak selector intent, and hard-to-reuse styles with mixed concerns. I’ll share real-world examples of these CSS “crime scenes,” unpack why they occur, how they escalate into problems and how to handle them.
We’ll examine the challenges that make CSS inherently hard to maintain and discuss strategies for addressing them. While I’ll briefly touch on approaches like atomic design, BEM, living style guides such as Storybook, and soft-decoupling to integrate with Drupal, the focus will be on resolving bad CSS patterns. This includes issues like excessive specificity, weak selector intent, and hard-to-reuse styles with mixed concerns. I’ll share real-world examples of these CSS “crime scenes,” unpack why they occur, how they escalate into problems and how to handle them.
Speakers
Tina Reymann
I’m a frontend developer with 15 years of experience in Drupal, specialising in maintainable CSS and design systems. At PreviousNext, I work with both legacy code and brand-new projects. I’m passionate about creating efficient, modular, and scalable interfaces, and love exploring generative art (which used to mean coding art – rather than using AI). When I’m not hiding behind the screen, you might find me climbing walls or hugging trees.