Hey! I thoroughly enjoyed reading this post on CSS despite the click-bait-y title and I wanted to share why this is so relevant for Penpot.
The author, Klint Finley, does a great job in time-travelling back to the 2000s and resurfacing some of the challenges the web was facing back then and how CSS ended up championing a modern web technology.
In terms of how Penpot can continue to leverage open standards, including CSS, and bring some neat ideas to the design process, I loved this testimonial around how Sass eventually won the hearts of developers.
Developers compile their Sass code into standards-compliant CSS code they can use on websites. That might sound complicated, but it actually made working on large CSS projects less complex. âI worked at an agency during the early days of Sass and there were a lot of strong opinions at the time,â Fisher says. âWhat tipped the scales towards âyesâ was the ability to more easily import and combine different CSS files so we didnât all have to work in one giant file.â
I think we can derive some inspiration for the future of design systems and designs in general.
Also, as a Tailwind user myself (I donât have strong opinions, I just use it for my personal projects) I would argue this next thought holds some truth and might apply to design&prototyping these days.
Tailwind, on the other hand, has developers specify styles throughout their HTML. The reason for separating the two is to make it easier to modify one without affecting the other. But Wathan argues that this isnât the way it works in practice. âSeparation of concerns never really existed in HTML/CSS,â he says. âYou have to write CSS with reference to the underlying structure of your HTML and, realistically, when you change HTML you have to make changes to the CSS and vice versa. People are trying to do something thatâs never really worked and it comes at a high cost.â
Tailwindâs approach was controversial at first, but it skyrocketed to the top of the State of CSS Survey charts, demonstrating that there was room for multiple different approaches to CSS.
Also, in relation with how web standards evolve, these comments from Lea Verou and Miriam Suzanne made me nod.
âWe canât just copy features straight from third-party tools like Bootstrap or Sass,â explains Lea Verou, a computer scientist and instructor at MIT who has co-authored several CSS specifications and is now a W3C Technical Architecture Group member. âWe have different constraints when designing specifications, especially with regards to performance. We work closely with the community, including browser makers, to balance all potential trade-offs in new features.â
âCSS has to work on every screen, and even in places where there is no screen, like screen readers or smart speakers,â Suzanne adds.
Finally I was really excited to see container queries mentioned towards the end of the article but what really made me think about Penpotâs role in keep bridging that gap between design and code was things like ârelative color syntaxâ.
One major new feature is ârelative color syntax,â which enables you to define a color as a calculation of the components of another color, in any color space. âFor example, if you wanted to have the color of some text become darker when you mouse over it, you would traditionally have to specify the color you want it to change to,â Verou explains. If you wanted to change the original text color, youâd have to manually update the darker color as well. Now, developers can simply specify how much they want to lighten or darken a color in different contexts. âBeing able to express the relationship means that every time you change A, B just adapts without your intervention. This is basically the software engineering principle of âdonât repeat yourself.ââ
We have discussed elsewhere that âEverythingâs a variableâ (or a macro) should be part of the toolkit Penpot offers to designers. Being able to go beyond setting static values to design asset properties and instead having the chance to input relative values based on custom variables would be amazing. It could make designs grow in sophistication without growing in maintenance or cognitive costs but also conveniently keep up with the possibilities arising from evolving open web standards.
