The closing curly brace
Now my friends we have reached the end of this little book.
While I'd hope that some of you might be able to take ECSS 'off the peg' and start implementing it wholesale, I'll be just as happy if it merely provokes your own journey of discovery.
At the outset I was trying to find an approach to scaling CSS that dealt with the following problems:
- to allow the easy maintenance of a large CSS codebase over time.
- to allow portions of CSS code to be removed from the codebase without effecting the remaining styles.
- it should be possible to rapidly iterate on any new designs.
- changing the properties and values that applied to one visual element should not unintentionally effect others.
- any solution should require minimal tooling and workflow changes to implement.
- where possible, W3C standards such as ARIA should be used to communicate state change within the user interface.
ECSS answers all of those problems:
- Compartmentalizing CSS into modules allows easy removal of deprecated features.
- The unique naming convention avoids global naming collisions, reduces specificity and prevents unwanted changes to unrelated elements.
- As all new modules are 'greenfield' it's simple to build out new designs.
- Despite some tooling to accommodate globbing imports and linting, we are still writing CSS in CSS files, making on-boarding developers a far easier process.
- We can also embrace ARIA as a means to control and communicate state change, not just for assistive technology but in a wider sense too.
The considerations of scaling CSS are a somewhat niche pursuit. In time, we will have things like CSS Scoping but until then we must use the tools and techniques at our disposal to bend existing technology to our will.
I've mentioned it numerous times but there are many ways to skin this cat. Other methods may be preferable. What follows is a list of people and resources, in no particular order that may help in your own odyssey.
Until next time dear reader, I wish you the most fruitful of adventures.
Absorb what is useful, reject what is useless, add what is specifically your own.
Resources
Here are some folks that often talk or write about CSS architecture/scaling:
- Thierry Koblentz
- Nicolas Gallagher
- Kaelig Deloumeau-Prigent
- Nicole Sullivan
- Harry Roberts
- Jonathan Snook
- Micah Godbolt
For a discussion about using inline-styles via JavaScript: Shop Talk show #180
Interesting approaches/projects around CSS: