Improve performance & reliability with Poetic CSS Architecture
Level up your team, improve your user experience, and scale with confidence
The web allows us to reach a world-wide audience
on any device,
with the promise of long-term compatibility.
But many teams get lost
trying to re-invent browser features,
or requiring third-party tools
to mask the complexity.
It doesn’t have to
be like this!
We can create a prioritized strategy
to level-up your team
and streamline your HTML/CSS,
so you can
improve performance and reliability,
scale efficiently,
and spend less on maintenance.
Make sure your whole team
has a shared set of tools
and a comprehensive strategy
for building reliable front-ends.
Streamline Workflows
Save significant time, effort, and money
by understanding the range of web features available,
and how to use them efficiently.
Improve Performance
Keep your users coming back
with a more performant, reliable,
and accessible app or site.
Reduce Maintenance
Create and document
resilient design systems
for fewer updates and
less maintenance over the long run.
Reduce Dependence
Third-party tools
often stand between us
and the platform features
that work everywhere –
forcing dependency upgrades
when we could be
making progressive enhancements.
Prioritize with Confidence
Come away with a clear set
of top priorities
to reduce your tech debt.
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.
Expert Advice
Sometimes all you need
is a chat with an expert.
Miriam Suzanne will spend an hour with you,
answering your CSS architecture questions,
and recording the conversation for you.
Tech debt
is holding your company back,
and you’re not confident
about moving forward.
Miriam and the OddBirds
will help you make your application
more performant, scalable,
and resilient.
A developer, teacher,
and pioneer of modern CSS –
Miriam is an Invited Expert on the
W3CCSS 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.
Miriam knows CSS better
than nearly anyone on the planet.
Not only does she help shape CSS specifications,
she applies the nuances of CSS
in honest-to-goodness real-world work.
To learn from Miriam
is truly a privilege,
not only because
she is involved in writing specifications,
but because,
at the end of the day,
she is also a developer like us.
This puts her
in a unique position
to help you understand
not only how to use CSS,
but also to understand why
it works the way it does.
Miriam is one of the very few people I trust enough to point my own
students toward. She gets the “why” as much as the “how,” and makes
learning CSS feel genuinely empowering.
There are few, if any,
who are more qualified to cover the ins and outs
of CSS layout, and I can tell you that Miriam’s work really helped
inspire and inform the content in my course.
I’m not sure I know anyone
who understands CSS layouts better than Miriam,
but her real skill is being able to explain it all
in easy to understand ways.
Miriam doesn’t just teach how things work,
she explains why they work that way,
and how everything fits together.
It was a treat to learn
from someone involved in writing the specs.
Miriam has a unique talent
of being extremely technical
with CSS but communicates
that so seamlessly
and so inclusively that regardless
of what level you’re at now,
you’ll be so far beyond
that when you learn from her.
A true super talent.
Miriam is your favorite developer’s
favorite developer.
She’s been the driving force
behind a ton of modern CSS features,
and is better positioned
than anyone else
to help you understand them!
Even with my 20 years
of experience writing CSS,
I sometimes hit the wall.
Whenever that’s the case,
I know I can ask Miriam,
and I’ll get a clear and competent answer.
Miriam’s knack for explaining thorny subjects
like CSS layout
in ways that are easy to understand
will put you right at ease,
helping you level up
your CSS game in no time.
Whether you’re a beginner
or an expert,
you’re guaranteed to learn something new.
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.
