Improve performance & reliability with Poetic CSS Architecture

Miriam Suzanne describes Poetic CSS Architecture, why it makes a difference, and demos an example of what to expect if you get tailored training or a fixup.

It’s a modernization of your application or website, starting with the core web technologies. CSS has come a long way since the early days, but many sites and apps are still using decade-old approaches.

We’ll help you organize your CSS around accessible and performant HTML, and make sure everyone on the team understands the tools and strategy to keep things running smoothly – so you can focus on your users and business goals.

You decide! Start small with a conversation, jump in to a full assessment and training. We can customize the project to fit your budget and needs, but the options below are a great place to start.

Miriam Suzanne

Miriam (she/her) is a co-founder and front-end architect – overseeing the user-experience & overall cohesion of a project.

• @mia@front-end.social on Mastodon
• @miriam.codes on Bluesky
• MiriSuzanne on Github
• MiriamSuzanne on CodePen

Miriam leads a tight-knit team of senior front-end developers including David Herron, James Stuckey Weber, and Stacy Kvernmo.

A developer, teacher, and pioneer of modern CSS – Miriam is an Invited Expert on the W3C CSS Working Group and core contributor to the Sass language. She created Susy for responsive layouts back in 2009, and recently lead the design and specification for popular new CSS features including container queries, cascade layers, and scope.

In addition to presenting talks & workshops at conferences around the world, Miriam is a former staff writer for CSS-Tricks, co-founder of the Mozilla Developer Channel, and co-author of SitePoint’s Jump Start Sass. She’s also a cross-media artist with extensive experience in theatre, writing, music, and visual art.

The web allows us to reach a world-wide audience across all internet-connected devices, with the promise of long-term compatibility. But that reach comes with complexity that can be scary without the right mental model. What does it mean to design for an infinite and always-changing canvas, across widely different interfaces?

While the breadth of the problem can seem daunting, HTML and CSS are designed to help us – providing built-in functionality to reach the broadest possible audience with minimal code. We end up relying on tools that try to hide the web’s power and complexity behind a veneer of familiar programming constructs.

When we switch from fighting the grain of the web to working with it, we can unlock superpowers only available in the browser.

Writing code is only one small part of web development. Along the way we are making constant decisions about the user interface, accessibility, and long-term maintainability. New tools can automate parts of the code-writing process – with varying levels of success – but no machine can make the hard decisions for us. It’s more essential than ever for us to understand the decisions being made, and how they will impact the users and the business moving forward. There’s no replacing ✨ Actual Intelligence.

There are a few guiding principles of writing Poetic CSS. At the core, we aim to use the wide vocabulary of language features to express our intent clearly and efficiently. In practice that means:

• Start global, end local
• Everything that can be global should be global
• Stop naming things that already have names
• Use selectors for selecting, use cascade layers for layering
• Use a wide range of units and intrinsic values to say what you mean
• Use both logical and physical properties
• Every layout method has different strengths
• Use declarative browser behaviors whenever possible
• Meaningful abstractions require less maintenance
• Use progressive enhancement to reduce workload
• Use the minimum constraints to achieve a goal
• Plan for the unexpected (user preferences, devices, and interfaces)

To say it another way: write CSS, not too much, mostly global.

For the last decade, a large part of the industry has tried to push in the opposite direction – renaming every feature in the language, and using brute force or abstinence-only approaches to CSS. Everything is re-named. Everything is a single class. Everything is scoped. Nothing is !important. Everything is flexbox. Everything’s a utility. Everything is rem or em or px. But on the whole, they still seem unhappy with the results – and constantly insist that CSS can’t be maintained.

Meanwhile we’ve been happily building large-scale projects by using the language as intended, and embracing new features as they come along. Third-party tools come and go, but a deep understanding of the language allows you to keep working with the grain of the web over the long term.