Twitter | Search | |
Mark Dalgleish
If you haven't seen Styled System before, do yourself a favour and check it out. It's been a huge influence in my thinking on component-oriented styles. Even if you can't use it in your particular stack, you can still borrow the core concepts—as we have.
⬢ Style props for rapid UI development. Contribute to styled-system/styled-system development by creating an account on GitHub.
GitHub GitHub @github
Reply Retweet Like More
Mike Plis Mar 18
Replying to @markdalgleish
I'm not super familiar with it, but it only works with CSS-in-JS libs, right? Is there any way to get the same or similar experience without CSS-in-JS?
Reply Retweet Like
Mark Dalgleish Mar 18
Replying to @mikeplis
You could equally implement this as a React component that wraps a bunch of CSS utility classes—no CSS-in-JS required.
Reply Retweet Like
Mark Dalgleish Mar 18
Replying to @mikeplis
Although, in some sense, that component essentially becomes a form of CSS-in-JS.
Reply Retweet Like
A. Sharif Mar 18
Replying to @markdalgleish @mrmrs_
Yes, styled-system is impressive. After being amazed by Tachyons it was that pointed me to styled-system. So many great ideas and concepts in there. So much to learn from there.
Reply Retweet Like
Erik ā Mar 18
Replying to @markdalgleish
I hadn't! This feels like what we've been wishing for (but didn't even know it yet). Thanks for sharing, will definitely be digging in further! 😃
Reply Retweet Like
Brent Jackson Mar 18
Replying to @markdalgleish
Are you *trying* to get a quote on the landing page? ;)
Reply Retweet Like
Justin Bennett Mar 18
Replying to @jxnblk @markdalgleish
This just in, styled-components the best thing since sliced bread. It tastes better too.
Reply Retweet Like
Justin Bennett Mar 18
Replying to @jxnblk @markdalgleish
But really... it's good.
Reply Retweet Like
Dylan Broadbridge Mar 18
Yeah I actually miss it when working with react native stylesheets. Tried to keep it simple, but I'm starting to implement styled system like components so might have to make the jump.
Reply Retweet Like
Sid Mar 18
Replying to @markdalgleish
> you can still borrow the core concepts yes! exactly what we ended up doing
Reply Retweet Like
Mitch Stewart Mar 18
Replying to @markdalgleish
So good! The responsive style props work great with Playroom too 😂
Reply Retweet Like
Dave Allen Mar 18
Take a look at or . To me, they are the CSS equivalent. The idea being that they are more than CSS classes, they are a whole system.
Reply Retweet Like
Giuseppe Mar 19
I used to do this with SUIT CSS But yeah JS makes it way easier. Probably a way in between (CSS Modules-ish) is
Reply Retweet Like
Dennis Hansen Mar 19
Replying to @markdalgleish
We don’t use styles system as a dependency, but have utilized this spec, and it’s been awesome.
Reply Retweet Like
Andrew Pomeroy Mar 19
Replying to @markdalgleish
Are there any significant concepts you're opting out of intentionally? There's a lot of really powerful stuff here, but I personally still am having trouble getting on board with the tachyons-style hyperabbreviation of style property names.
Reply Retweet Like
Rudi Yardley Mar 19
Replying to @markdalgleish
I think it’s great so long as you remain committed to extracting out your boilerplate to reusable comps. If too much gets left in place from prototyping I felt markup becomes verbose and hard to grok. Straight SC forces creation of semantic comps from the start which I prefer.
Reply Retweet Like
Rudi Yardley Mar 19
Replying to @markdalgleish
Also we found it hard to remember the API and the way units work can be difficult to get your head around. These things led us to remove it from our codebase before it got too entrenched. I think there are some great ideas in there however! I love how it is put together.
Reply Retweet Like
Mark Dalgleish Mar 19
Replying to @rudiyardley
In our version, it only has semantic, designer-friendly prop values—no raw calculations—since it's wrapping a static set of classes, not a CSS runtime.
Reply Retweet Like