Really interesting article on CSS (past, present & future!), my thoughts!

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.