Skip to content

24 ways to impress your friends

Styling Components - Typed CSS With Stylable

5 Comments

Comments are ordered by helpfulness, as indicated by you. Help us pick out the gems and discourage asshattery by voting on notable comments.

Got something to add? You can leave a comment below.

Bruce Lawson

@Mike, good Q. Basically, inside the CPU, Stylable assigns dozens of Nano-ninjas to guard each component to ensure styles don’t accidentally leak across – sort of like white blood corpuscles. Or so I like to picture it. Less imaginatively (but perhaps more accurately), Stylable transpiles all class names with a prefix made from a hash of the filename to ensure uniqueness. (You can, if you want, set your own namespace name.)

@Paul, thanks! We look forward to seeing your experiments!

@Julie, we’re glad you like the hedgehog. It’s actually the hedgehog that lives in the backgarden of the house that the Styable team lives in. His name is “Spikeable”. He says“Happy new year”.

Philippe Futureboy

Great work, thanks for sharing and making the web better! 🌍
Now I have a hard time to wrap my head around how Stylable would be more performant than, let’s day, Vue.js. In the end doesn’t the JavaScript still need to render it’s VirtualDOM in the DOM before anything is displayed to the user? If so isn’t the performance benefit of raw CSS import rather than through a Vue component marginal?

Cheers 🚀

Mike Davies

Useful writeup on a different approach to managing modular/component CSS. Thanks Bruce!

In your section “Components all the way down” you give an example of a Gallery component and inside that component there’s a Navigation component. How is the Navigation component protected from inheriting styles from the parent Gallery component? Is it based on the idea that styles are only applied to classnames, and having unique class names is how the separation is enforced?

Good to see extensions that work with CSS’ strengths.

Paul d'Aoust

My, that Mr Lawson is a snappy gent in his paisley button-up and flower-print tie.

I looked at Stylable a few months ago and it sounded really intriguing, like the sort of thing I’d wished I could write. But alas, it didn’t fit in with our tooling; our shop uses pretty much every kind of app stack except server-side JS, and since classnames are injected into the HTML, I didn’t know how to make it work for us.

But this article intrigues me afresh; I’ll have to check it out again. Who knows; I might be the one to contribute some sort of .NET, Django, or PHP integration to the project! :)

Julie

This seems very promising, I look forward to giving it a whirl. Also thankyou for the nice picture of the hedgehog, I enjoyed it very much.

Impress us

Be friendly / use Textile