Ask any team that works with a design system, and you’ll find the benefits are clear—designers and developers are more productive, products are more consistent, communication between disciplines is clearer.
However, most design systems still have a fundamental flaw. Designers and developers continue to work in entirely different mediums. As a result, without constant, manual effort to keep them in sync, our code and design assets are constantly drifting further and further apart.
For companies working with design systems, it seems our industry is stuck with design tools that are essentially built for the wrong medium—completely unable to feed our…
In the past few years we’ve seen the rise of CSS-in-JS, emerging primarily from within the React community. This, of course, hasn’t been without its controversies. Many people, particularly those already intimately familiar with CSS, have looked on in disbelief.
“Why would anyone want to write CSS in JS?
Surely this is a terrible idea!
If only they’d learn CSS!”
If this was your reaction, then read on. …
CSS selectors all exist within the same global scope.
Anyone who has worked with CSS long enough has had to come to terms with its aggressively global nature — a model clearly designed in the age of documents, now struggling to offer a sane working environment for today’s modern web applications.
Every selector has the potential to have unintended side effects by targeting unwanted elements or clashing with other selectors. More surprisingly, our selectors may even lose out in the global specificity war, ultimately having little or no effect on the page at all.
Any time we make a change…
BEM was a transformative methodology in the world of CSS, but — when limited to the style sheet — it can only take us so far.
The act of defining “blocks” forced us to treat our classes more semantically and methodically, clearly defining the component boundaries and relationships in our interfaces, and yet — as I’m sure the methodology’s originators at Yandex would be quick to point out — CSS is only a fraction of the BEM puzzle.
We need a new generation of tooling and workflows to make this methodology truly transform the way we construct our interfaces.
CSS Modules co-creator, @MelbJS organiser, DesignOps Lead at @seekjobs.