Facebook Did It Again

Learn CSS Today Course: courses.webdevsimplified.com/...
StyleX is a new CSS library from Meta and it is a really cool mix of CSS-in-JS and Tailwind. In this video I cover everything you need to know about this new library as well as why it may be useful for you to learn.
📚 Materials/References:
Learn CSS Today Course: courses.webdevsimplified.com/...
StyleX Docs: stylexjs.com/docs/learn/think...
🌎 Find Me Here:
My Blog: blog.webdevsimplified.com
My Courses: courses.webdevsimplified.com
Patreon: / webdevsimplified
Twitter: / devsimplified
Discord: / discord
GitHub: github.com/WebDevSimplified
CodePen: codepen.io/WebDevSimplified
⏱️ Timestamps:
00:00 - Introduction
00:34 - CSS History
02:08 - StyleX Ideaology
04:17 - Basic StyleX Features
07:30 - Styling Components
13:03 - Type Safe Styles
16:03 - Advanced Stylex Features
18:25 - StyleX Design System Features
#CSS #WDS #StyleX

[@HeyJes]

I honestly think this looks worse than just using vanilla CSS. There’s way too much unnecessary complexity and clutter.

[@gintoki_sakata__]

JavaScript be doing that sometimes😂

[@mohdsameer8899]

agree it is just tailwind or vanilla CSS like normal or hover state that you can already do why complicate

[@petarkolev6928]

This is what Kyle told us exactly - looks, it just looks but believe me, with the growth of the project this comes really handy

[@lou.104]

That's usually the case with most frameworks/libraries. They are useless if you're already good at the main languages like HTML, CSS and JS.

[@NoName-1337]

The people should really learn vanilla css and then something like scss/less... its enough. Everything else is some overthinking stuff, that nobody needs, except the fanboys.

[@wayneswildworld]

There's no way this is replacing tailwind the point of tailwind is being fast, not making a nested object just to get a blue heading.

[@macctosh]

Yes, but that speed creates a mess that is a pain to read in the long run.

[@DeepTitanic]

Tailwind was awesome for beginners but times have changed

[@dragoscatalin]

​@@macctoshno, it's really easy to read and understand what that element does. It's even easier to copy that style from another source

[@wayneswildworld]

@@DeepTitanic I don't think times have changed tailwind is still very new and I see no real added benefit of facebooks alternative

[@michaeledison1974]

periodt.

[@user-pt2rv6br6w]

The main reason i'm using tailwind is because of how fast and easy it is to build good UI. I don't have to just switch between files like i would with regular css or... styleX. No way this replaces tailwind

[@hendrywilliam]

Too much overhead just to make a blue heading🗿

[@ankitak5939]

Please tell me a practical way to learn tailwind

[@mvargasmoran]

yes, the only issue is maintainability. but if you are careful, you can just throw away all the tailwind and just rewrite when changes come.

[@Daijyobanai]

@@ankitak5939 RTFM

[@Daijyobanai]

If you're using a text editor or IDE how is looking at 2 files side by side such a massive problem for you? Really want to know how side by side panes stops your flow, but scrolling up and down, never having all the code on the screen at once is apparently sooooooo easy to work with? WTF.

[@climentescu]

Soon will do just

[@wlockuz4467]

Honestly, it seems more sane than stylex.

[@epicmetod]

now write that to 1000 react components with each have 4-20 elements

[@mahmoudzakria6946]

Svelte ERA

[@Kiev-en-3-jours]

Soon FB code to style a single button will be more complex than the code used by NASA to land on the moon. This company did so much harm to web dev and society.

[@patricknelson]

True. At least they made Yarn (and Hack, which was alright when it was still relevant).

[@Daijyobanai]

so true i'm going to start a bot farm just to upvote this comment ^

[@Kiev-en-3-jours]

@@Daijyobanai Thank you so much. Can't wait for the thousands of likes!

[@user-lm8bj6wb4q]

Does facebook create any good things on earth?

[@Kiev-en-3-jours]

@@user-lm8bj6wb4q I can't find one single thing but there might be things I am not aware of.

[@yashsolanki069]

as a FE developer i feel like i would just stick to scss or tailwindcss for now. Facebook built this to solve there problem but still in the enterprise projects scss is prefrable and works just as fine.

[@gintoki_sakata__]

😂 facts.. As much as we stay updated, we just gotta mind our business

[@goosydev]

Just a personal take you probably heard a dozen of times: I dont really like scss that much for most projects cuz it discourages flat-specificity and variables are a pain and much more limited compared to vanilla css.

[@yashsolanki069]

How does scss is limited compared to vanilla css? How we style is majorly a preference in a team but i feel like we just do not need to necessarily jump on any UI library just because it's creating hype quickly.

[@ridl27]

facts, bro. I tried different styling methods and ended up going back to scss.

[@T1Oracle]

SCSS + modules = Win You don't need anything else.

[@fave1201]

This feels like a javascript version of CSS modules with a lot more code. I think you can achieve the same using css variables for consistent styles & having the entry level css file carry default styles for themes, buttons, links, inputs etc... If you really want to spoil yourself with CSS then use a .css file to write out your code.

[@XzeroNetwork]

We already have JSS tho

[@juviess]

The cool part that Tailwind is framework agnostic and basically pure html/css. so it's not replacement for Tailwind for sure

[@greenshaheen6716]

mostly titles and thumbnails are clickbait and misleading

[@Aezur20]

But... so is this? It builds into pure css classes and adds them to the component at compile time. Did you watch the video?

[@can_pacis]

StyleX is framework agnostic as well

[@zmeireles68]

I Think Kyle's context was to replace tailwindcss in React projects

[@DeepTitanic]

Tailwind was great for beginners but things have moved on

[@moofymoo]

look! CSS-phobes created another one of these wrappers around CSS.

[@ScriptRaccoon]

Yeah I wonder when they realize what they are missing...

[@volimsir]

18:30 You made a mistake here, when you said that tailwind doesn't allow you to specify exact values for padding. You are able to do this with brackets. So if you want to specify that padding should be exactly 5px on an element, you can just write it as a p-[5px] class.

[@osamajune9]

Its called arbitrary classes

[@wlockuz4467]

Or if you want a reusable padding that is not offered by Tailwind out of the box, you can extend it in the config. Tailwind really has everything figured out.

[@roshantalluri2681]

What he mentioned there was the opp. tailwind doesn't have a way to restrict classes in a typesafe way as far as I know atleast.

[@michaelcarnevale5620]

@@wlockuz4467tailwind made coding in react tolerable to me

[@stonebubbleprivat]

It's not difficult to get the browser defaults in vanilla css. Just use initial or inherit depending on what you want.

[@Joso997]

true but you can't "remove" a parent style

[@foolmoron]

​@@Joso997 You can with unset

[@birthdayzrock1426]

@@Joso997 padding: unset;

[@shivangrathore]

It will be hard to debug these classes in web inspector, atleast in tailwind classes we don't have to look into its code, we can just guess the applied styles

[@charleschukwuemeka8482]

I honestly do think that this is where Tailwind beats it. The generating of random words and numbers that houses the styles will make it hard to debug, especially if the person debugging is new to stylex.

[@sammavrs]

@@charleschukwuemeka8482 Shoot, youre right. I was going to say it was ok if at least the file was given a specific name that you can track but even those are randomized. Thats a SOLID no for me. Being able to track whether its the GLOBAL or the Component's file thats making the Margin all rickety like, is a MASSIVE critical for debugging.

[@petertyldesley6542]

​@@sammavrsI haven't used it, but I'd guess that in the dev environment would be the name you assign and when building for prod, they get replaced with hashes. Of course, that would still make debugging harder in prod.

[@sammavrs]

@@petertyldesley6542 i saw something in the Docs that talked about how when compiled, each CSS style made for a Comp is isolated to THAT Comp only. Im sure im misinterpreting it though so dont quote me on that Lol. The idea is that 1000 people doing different CSS, cant affect the style of the you make. Yah, this is really just Enterprise only. SHOOT!!!! 😞

[@petertyldesley6542]

@@sammavrs yeah I think that's the point. There are no global styles, everything is component scoped, by design.

[@jackdavenport5011]

This looks quite similar to how React Native handles styling and I honestly don’t mind it. I’ve never really been satisfied with how most CSS-in-JS libraries for react work, they’re either too messy syntactically or they don’t have proper types. This looks like a good intermediate solution.

[@ajmalhasan9759]

Correct

[@biggsly]

I can see how this would be good for managing styles across hundreds or thousands of components, but seems like a lot of work to add to smaller projects.

[@Nodsaibot]

well it will turn your 3kb html page into 250kb

[@hiryuimajin]

Its what he said though that its good for large scale projects

[@derciojds]

@@aimableruhumuriza8603 Actually it adds simplicity on large projects.

[@petertyldesley6542]

​@@NodsaibotIt's compiled, not run-time. So your bundle should still stay fairly small

[@ChibiBlasphem]

@@petertyldesley6542 HTML file size isn't an issue, more and more framework who wants to improve pages performance tends to serialize things in HTML cause it has almost no overhead.

[@priyeshvaghela9920]

Being a FE developer is so hard nowadays 😢

[@randomd00d19]

FR. I can't keep up anymore. You have to GUESS what the next big thing is and start mastering it. In addition to THAT, so many jobs I'm applying for seem to think that everyone either has 10 years of experience or is a backend wizard that can also do FE blindfolded... with 10 years of experience. I'm fucking tired. I just want to work

[@anothermouth7077]

Feel the pain

[@priyeshvaghela9920]

@@randomd00d19 true bro

[@IvanRandomDude]

Try being a surgeon

[@suyashsrivastava3671]

You don't need to learn everything, just learn the thing use for your project.

[@bakbak1830]

Simpler terms: you can create your own component based UI library (just like mui). There is a difference between component based approach (which mui or any other UI library) and utility based approach (like tailwind). StyleX seems to be more on the side of component based approach (like mui but with no existing components) but with better control & customisation since it is your own components. I can see how it will be useful in a medium to large organisations where one is trying to bring uniform design using components. Love this approach; will try it out.

[@ChibiBlasphem]

StyleX lets you generate "classes" it's like CSS modules. You can create UI Library with tailwind, styled-components or even CSS Modules. MUI is already an UI Library, you can only specify the theme but it already ships components

[@dawidfrankiewicz8994]

StyleX is definetly not compoenent lib, it is just CSS but.. in JS 🤯(with extra features). In every project you usually build your own basic reusable compenents library using Tailwind, StyleX, CSS, SCSS - it does not matter, but with Bootstrap, MUI, Vuetify you just use predefined components where possible, it saves a lot of time for sure, but every website built with it will look similar. Also making custom designs is much easier and faster with CSS/Tailwind etc. than modyfying Bootstrap components. Tailwind has some components libs, StyleX is going to have some probably too.

[@codecifra]

when i first saw StyleX, it reminded me of how shadcn/ui makes components using tailwind and cva

[@EverriseN]

Am i the only FE who codes in vanilla CSS this days and loves every part of it? I code in react and use module.css. Having css on another file is way nicer for me.

[@klopferator]

This. I think Facebook's efforts are not really solutions to problems but a stubborn way to do everything in Javascript because the developers are too lazy to switch their mindset. And it usually doesn't work that well. (See react. Facebook is not a well-working website. Neither is reddit.)

[@MrThebigcheese75]

Yes, CSS is far from perfect but you will always have a better understanding than using some framework that in the end just ends up forgotten for the next big thing. Pure CSS won’t. It’ll be a bit faster too.

[@ScriptRaccoon]

Nope you are not alone : 👋

[@coherentpanda7115]

On a massive project with a ton of moving parts, CSS in JS solves a lot of problems. Also, Styled Components can be in their own file.

[@coherentpanda7115]

On a large site vanilla css just won't work. You need the responsiveness and conditionals that something like Styled Components provides. If I was just purely making a non-interactive site, sure css is fine, but on anything large scale pure CSS would be a disaster waiting to happen.

[@alfonsoalejandroespinosade1728]

looks like react native devs are going to be happy

[@sitedel]

I think mixing CSS with JavaScript is counter-productive for most use cases. You can't infer how a web component will be used, maybe your button should disappear on print ? Maybe colors of this button will have to match user's preferences (dark mode, protanopia or any other color blindness...) ?

[@silent_syntax]

I disagree. I understand your point, but being able to mix your JS into your CSS is just too much of a benefit, for example in React's Styled Components, where you are easily able to apply different css based on the different props that you pass to that component, easily making styles for different variations of a component. It looks weird at first, but when you type it a couple of this you just cant ignore that much of a benefit.

[@shrin210]

common button css but in one page that button needs to have additional font size, margin, padding for this i'd prefer inline css, also responsive with tailwind style css is easier. For me combination of global css and inline css is easier and maintainable.

[@anmolsharma4049]

I don't understand what's wrong with using separate css file for components in the same folder and importing it inside component only, it solves major issues with using global import, use global variables for theeming purpose etc, it'll be more semantic than tailwind and easy to debug

[@ScriptRaccoon]

Yep, me neither

[@CSKeys1]

So Facebook just fixed problem that styled components fixed years ago?

[@harikrishnanprabhakar4520]

But better than how styled components work

[@coherentpanda7115]

@@harikrishnanprabhakar4520 Other than being compatible with server components, I don't see anything it does better.

[@codernerd7076]

No need tailwind works great

[@fabrizio.dipietro]

A new framework pops up every day 😂

[@arnvgh]

css is all you need.

[@Manas-co8wl]

Svelte has local and conditional/dynamic css already with very easy syntax to do so. In fact I only use tailwind for configuration and a bit more ease of production, otherwise I don't even need that much. I don't know how much this is true with React or how much scaling big companies expect of their projects. But I don't think any component that allows locally constricted and dynamically programmable css should require this much syntax and indirection.

[@patricknelson]

Just a case in point: With svelte, I use svelte-preprocess-cssmodules to _prevent_ overly broad CSS classes from accidentally affecting my components (e.g. if I used “wrapper”). And the syntax for it is simply to add “module” to the tag. And it’s just… css. Not pseudo CSS where every property has to be converted to camel case which isn’t very portable. And if I want/need to share isolated stuff between components, I can just import an SCSS mix in or placeholder or whatever (assuming a CSS variable doesn’t solve the problem).

[@coindivision388]

The last thing we need is another javascript library to abstract away a basic browser primitive (which is already intuitive enough once you understand the cascade)

[@ScriptRaccoon]

💯

[@Gionnakis87]

I am curious if you could implement facepaint for dynamic and easy media queries inside css-in-js objects. With emotion it is feasible. Other than that, I think I might try styleX, since it actually uses css files and not on runtime

[@sealone777]

Yeah this is what very large scale app needs especially if there are multiple projects. For a single project, tailwind is still better. Beauty of TW is that it uses built in names and not developer named styles. For now sticking with TW

[@coherentpanda7115]

Large scale apps will keep using Styled Components and standard css files, Stylex looks like a mess to deal with, and its only advantage is it is out of the box compatible with NextJS app router without needing to add 'use client' to the to pof the page.

[@greenshaheen6716]

just an extra headache

[@sathishkannan6600]

You have to write full vanilla css styles in js object. Think about just using `bg-red-400` rather than writing background: #aa0000. Also tailwind provides default variables in spaces of 4px, which is much more convenient. No way this is replacing tailwind.

[@patricknelson]

I’m not a React dev per se, but I see why Tailwind is so popular. Writing colocated CSS looks painful in react if this is the sort of syntax you have to deal with.

[@jackdavenport5011]

It would still be fairly easy to have shared colours, you could have a shared file with the colours defined and use them. But i agree it’s not as intuitive as tailwind

[@scottmilholland176]

This is great. Thanks for sharing! I wanted to test out a project with it and I've been running in to trouble setting it up. Just finally got it up and running: Vite + React/TS + StyleX. Might be a handy video to make to show how to get a project up and running from scratch with StyleX to help others avoid the trouble I had. I wanted to play around with it for a bit and see how I like it before I suggest bringing it in to any work projects.

[@humanityatitsbest7136]

Honestly I think this is just a shiny Emotion/css replacement with different agenda. If you use CX to combine classes in the same way it's shorter and deterministic and it works server-side VERY well, but you have to go through some setup pain (e.g. Next + Emotion). Other than that? Valid JS with styled-components like templating with actual TS support and linting. It's been done before, but Facebook just couldn't have as much a hold over. And btw - senior frontend engineer's opinion - Tailwinds sucks (reading and maintaining) and it prevents you from scaling a prototype to an enterprise product.

[@kanishknishar]

Why do you think it sucks? Isn't it great to be able to use built in variables instead of having to manually write it each time

[@lamdiv]

tailwind isn't maintainable. It makes life way easier while working in a team.

[@user-qe2ps9vm9o]

CSS = Cascading Style Sheets Cascading being the most important feature here. Not sure why there is a trend to keep trying to get rid of the core concept in the language.

[@atikahammad7446]

sorry man. i will go with tailwind and scss now

[@kudafoolhu]

Javascript to write css? this would have been great a couple of years ago. But i would rather use vanilla css.

[@vlados01]

This is absolutely not the end of tailwindcss!

[@sultondev]

feels like styled components.

[@macctosh]

yes, that's why it's so awesome!

[@shivanshusingh7615]

I started with HTML & CSS, went on to use MUI and other css frameworks then css library like tailwind, then when I dived into react native found that it works differently there so had to use this similar structure with native Stylesheet object to define styles. I found this was as a more logical and convenient approach to structure, optimize lines of code and gives flexibility. As someone who has done a decent amount of time in pure-css, this felt pretty easy, tailwind kind of abstracts the intracacy of css, although does increase UI development speed, at loss of reusable style components/design systems. Both have their pros and cons I believe. For big projects this should be the way. My react native project got pretty complex around a time, and then I felt glad I had extracted the common style components and had sort of made a design system beforehand which then probably saved me more time than I spent building it. Also, it was good for my sanity, not writing the same css over and over, rather just import it.

[@waliahmed3035]

I use Tailwind CSS because it is easy to make my pages responsive with small amount of code. But this is looking like a better version of styled components with type safety.

[@muresanandrei7565]

Better than styled components you are dumb.

[@mattd5419]

Looks like styled components all over again. With tailwind I see all the css on the html tag, so I don't have to scroll up and down every time.. type safety is nice but this feels slow to use

[@Daniel15au]

More efficient than styled components though, since it just compiles to regular CSS files. styled components has a lot of JS that runs at runtime.

[@wlockuz4467]

Type safety for styles seems like a solution to a made up problem.

[@obelisk.5890]

This makes me love pure CSS even more. Nothing beats non out of the shelf customized UI’s.

[@zlackbiro]

Nothing can beat SCSS. Period...

[@rafikkasmi1406]

@@zlackbiro until tailwind...

[@patricknelson]

20:24 - Take this hiccup and add to that the increased cognitive load required to mentally parse this and other CSS-in-JS frameworks and, to me (coming from a back-end background and now coding in Svelte), it feels like we’ve got ourselves tangled up into knots. I will say it’s sweet to have typed styles, but beyond that, I’m feeling glad I went another route for now where I can _both_ colocate my styles _and_ have them be simple CSS (or SCSS), taking advantage of CSS vars and etc. The scoping is either free (via framework) or better isolation can be gained w/ plugins. Writing a special media query or using the new container query syntax doesn’t require much overhead. Just learn it and you can apply it immediately.

[@snowwhitecat5408]

for me the main strong point of tailwind over vanilla css is that doing responsive styling is a lot more convenient. I doubt this is better than tailwind in that aspect

[@slapmyfunkybass]

It shouldn’t be really, styling should be done with responsive in mind, if you do it that way your media queries should be vastly reduced

[@christemp188]

Gotta love how much JS is written just so devs don't have to write any CSS...

[@stijn3085]

Except it’s essentially CSS though

[@hamzakhan9862]

Man your are on the who push my career ❤ keep it up bro

[@kasparsiricenko2240]

I am using tss react and it gives same functionality but without static compilation benefit. Gives you all the necessary functionality you might for your own component library system

[@gasparsigma]

Looks a lot like how I was using Emotion with typescript. I tried Tailwind after a large project with styled components, I'd not switch back to be honest

[@markobreadfish8997]

Yeah we are using Emotion too, its great. After I saw what stylex does I'm like: 95% of this already works with Emotion, why did they put in the effort to reinvent the wheel?

[@twiccox]

@@markobreadfish8997 emotion and styled component are runtime css-in-js solution (inline style), however, stylex and tailwind are compiled to css in build time.

[@coherentpanda7115]

@@markobreadfish8997 FAANG companies often justify their massive team sizes by creating internal tools for no good reason. Google is very famous for that. Facebook at least releases their tools open source when they feel the need to push things forward a bit. Honestly, the reason why they released this in my view is because all of the CSS in JS libraries aren't fully compatible in NextJS 14 app router, so this may have been open sourced to help the developers of Emotion and Styled Components out with solutions.

[@suyashsrivastava3671]

So basically RN stylesheets 🙂

[@simpingsyndrome]

I think it's great for devx because we don't need to naming things and got type safety, and we don't need any extra libraries just to replaces styles like tailwind-merge/cva.

[@tuancao85]

Man. You just save me hour of researching about this. Thanks Kyle!

[@GuyHeartless]

Been doing this for years with styled components/MUI createStyles and now with Mantiene lol

[@moimsk8]

I just thought about It.

[@silverkinggamer2630]

I'm happy with tailwind

[@damonmedekmusic2015]

I use Sveltekit and Tailwind in JS variables.for example: let twTitle = 'text-green-500'; Then Hello I find I can quickly read my html by what the tag does, while also quickly editing my tailwind in my script.

[@user-re8lt2gy3g]

I wonder how this will work with dynamic styles and state in general in addition: The stylex.create lack code completion that vscode give us by default when using regular css like this for example stylex.create({ base:{ style : { //this object should be typed with all css properties } } })

[@lucabaxter4002]

well is js, dynamic styles is super easy in js.

[@ConnerArdman]

Stylex was one of my favorite internal libraries when I did FE work at Facebook/Meta. It always just felt like it worked exactly how you'd expect it to. The big benefit I found was knowing the CSS was in the same place as the component, and not going to accidentally override some other component. For small projects, I don't know if it really makes sense. But for medium-large projects, it can save you a ton of time and frustration imo.

[@NamanGoel34]

Great to hear!

[@memaimu]

Will adopt it if it starts trending for some reason. I can't imagine another dev coming into the project and understanding wtf is going on when just a button can have so much complexity to it all due to some styles.

[@aram5642]

How long before yet another framework comes and stylex will get crossed out on the poster frame?

[@wlockuz4467]

Just wait, Vercel is probably cooking a metaframework for stylex

[@yasserkouddan9189]

I am used to styling in react native with the StyleSheet API, and it looks familiar

[@erickmoya1401]

Love how facebook makes more and more tools to try to fix the shit that react is. Svelte has this builtin. Looks much better and obvious, and using something really similar to vanilla css.

[@tubeclips3646]

react hater spotted. nobody is gonna use svelte

[@Dev-Siri]

dude this is framework agnostic just because bookface made it doesnt mean its react-only

[@ZedDevStuff]

@@tubeclips3646 Lmao is one of the most loved Frameworks out there, and a lot of people use it

[@wlockuz4467]

React also has this built-in with the style prop so stylex is utterly useless.

[@x4fingers]

@@tubeclips3646I use Svelte for almost my production web apps so you are fucking wrong. I've work on several project using Next.js and React, simply to say it bad. React is backed by Facebook doesn't mean it good.

[@BHFJohnny]

Reminds me of styled-components. Main disadvantage of those is that it's still in javascript and it calculates the styles in runtime. This lib seems to solve that so I'm actually quite interested

[@coherentpanda7115]

The styled components in runtime is so small, it's pretty much meaningless unless you didn't follow the documentation. SC also looks far easier to work with than StyleX, so I doubt it will take off. Styled Components just needs to get a RSC-ready version out the door before they get one-upped.

[@smithjohn2367]

What about re rendering ? Its is like normal style attributes and recreate the object everytime the state change ? Or the value are memoize or can be memoized ?

[@MrSamFTW]

Doesn't Styled Components already exists? I am sure I have used in a project before but the syntax is a little different.

[@paradoxalJohn]

I was thinking the same thing. I use Styled Components at work (wish I didn't) and I'm unimpressed, really.

[@Amaraticando]

Styled Components is some of the worst ones out there, due to performance, design, inheritance and naming wrapper components. But it rocks in that you can copy/paste from CSS/devtools directly into the template string.

[@davidrempel433]

This feels very similar to what component libraries like Mantine or MaterialUI use.

[@coherentpanda7115]

MaterialUI uses Emotion, which powers Styled Components, so yes, it should feel similar.

[@joemobes1632]

Vanilla css everyday of the week over a css library. Also unpopular opinion here....angular does it best. The separation of concerns design principle makes development so much better in my opinion. Each component has its own html, css, and typescript file. No need to mix everything in a single file.

[@shubhamshekhar23]

You spoke my mind. Exactly what I never got to like about react. 😢

[@brangja4815]

Separation of concern principle is overrated. I don't want to waste time naming classes and jumping around files during development. Tailwind sped up my development process by 3 fold. Btw I was also a big fan of 'Separation of concern pattern'. I once mocked people for using CSS libraries.

[@shubhamshekhar23]

I think both have pros and cons, If you write everything in the same file just like in react, you save time by not jumping but loose time scrolling up and down and just finding the things. For me personally, I have found angular code just looks and feels cleaner. But then again it's a personal choice.

[@dawidfrankiewicz8994]

I like how Vue does it, all in one file, but JS, HTML, CSS has it's own section. If you want to have CSS and HTML/JS side by side you can just open same file twice. No need to have open 3 files for each thing. Much easier to work with many components at once.

[@mk.gurenzero9434]

Great video, absolutely brilliant! Thank you! This framework looks so cool, guess who is volunteering tomorrow to rewrite the styling of the front end.

[@chrikke]

man, i just want something like Jetpack Compose where styling doesn't overwrite. If you for example apply a border, then padding, and then a border again, you have 2 borders. It allows for a lot of creativity

[@ApacheGamingUK]

" It doesn't actually matter if you're doing React, Vue, normal JavaScript, TypeScript, whatever it is; this library works in any framework you can think of because it's just normal JavaScript code." * laughs in Blazor *

[@ronykax]

I don't need this since I can just specify my styles directly using CSS syntax in my Svelte files haha

[@NamanGoel34]

Svelte could just compile to this and it could be a config option.

[@garrin5922]

People be thinking of small to mid level projects when he specifically said the framework is for enterprise level projects where, as he said again, there will be presence of difficulty in overriding and removing old CSS and specificity issues especially if you're using Tailwind where a component will have at least 10 different classes with probably specific configs. I really hate when enterprise projects are using Tailwind, there are times the component's class has more content than the component's actual content.

[@78SuperWhite]

Hey :) Would it be possible to get a setup guide? When I tried to install with a Vite project about a week ago it wasn't playing ball very easily.

[@gh0stcloud499]

It's nice that it has it automatically overwrites styles, but the reason TW is so nice is that it just makes 'writing CSS' much faster. With this you still have to write CSS :) there are some really great patterns with TW that you can use (shadcn UI essentially generates it for you)

[@mostafarezaie-yt]

The major benefit of Tailwind CSS is that you don’t waste your time thinking about class naming, object naming and class naming wastes most of your time, refactoring Tailwind CSS is not difficult when you have well structured and minimal components.

[@DeepTitanic]

It was great but Tailwind would get out of control fast

[@KodeAsura]

@@DeepTitanic i dont think it does if you follow dry principles and the actual design system config tailwind allows there is hardly any "out of control" stuff happening

[@dnserror89]

@@KodeAsura Especially when using the plugin that automatically sorts Tailwind classes so you know exactly where to look in the possible wall of classes.

[@Shulkerkiste]

That's a great benefit. However, is that really what you want for big projects? When I see HTML with a lot of Tailwind classes, it's really hard to understand the HTML. If you give the HTML elements a CSS class and put the (S)CSS code into its style section (like in Vue for example), you can read the HTML code easily. It's similar to writing good JavaScript variable names. But everyone can choose the favorite technologies of course.

[@T1Oracle]

CSS modules handles that already.

[@CJIu3eHb]

FB copy that from their RN. The most useful feature is redefining children component styles passing styles prop from parent component and merging them (24:09). In css modules u can pass classname, but there can be problems with specificity and sometimes you must use hack like .yourClassName.yourClassName {...}

[@ParasMendiratta]

With dynamic classnames, it would be hard debug which code is hampering the style. There is no way it can replace tailwind.

[@WebDevNiko]

whats the main difference with this and styled components?

[@macctosh]

it creates actual CSS files at compile time and therefore doesn't need to compute the styles at runtime!

[@DeepTitanic]

Linaria also does this @@macctosh

[@WebDevNiko]

ah k thats cool@@macctosh

Great introduction to StyleX, thanks! Just to get tailwind-merge out of the way - I consider it to be code smell, the point of Tailwind is that classes that are there are the styles that are going to be generated. Having to remove interfering class names does not only sound like an API mistake, but it also sounds error prone, especially when arbitrary variants come into play. Next, as you indicate, in your simple examples StyleX looks like a lot. To me some of the features seem out of place, for example limiting styles that are allowed. Also, I don't quite understand the need for "type safety" in the context of styling, here it looks to me like solving a problem the tool has created. Regardless of that, some aspects that I really liked about Tailwind is being able to see styles right with the HTML, not having to name classes, being able to define a couple of styles by adding a dozen characters etc. StyleX takes all that away from me and takes up quite a lot of vertical space, which means that I'll have to keep those in separate files… I don't believe in separation of concerns in frontend tech. I imagine that the main strength of StyleX is composability, so when dealing with component libraries, but from the DX perspective it looks like a high price to pay.

[@samuellamimdecarvalho]

Its is pretty similar to Styled Components and React Native. It brings back naming classes, and we know how this can become a messy pretty fast.

[@NotTheLastOne]

how can styled components become messy compared to tailwind?

[@mobythereal]

Not at all since your component is the one responsible for the style.. naming convention is not a problem here

[@NotTheLastOne]

@@mobythereal styled components do the same thing in cleaner way that we can use pure css instead of a whole made-up vocabulary of classnames

[@slapmyfunkybass]

Have no idea why you consider naming classes a bad idea, think it may be your naming convention that’s wrong here, not the concept itself

[@Daniel15au]

The names just have to be unique per component; they don't have to be unique globally.

[@bmehder]

I can see the value in this for large projects and teams. If only vanilla CSS had mixins. I guess I should just be happy we have css nesting and custom properties.

[@arashitempesta]

Looks extremely similar to the stylesheet create from react native and at least over there this does not help with unused styles at all, they can still in the codebase, its normally worse in RN because styles are added in a different file but even then you end up having to create a lot of miscellaneous classes for the most generic stuff in a layout or UI. I would say stylex is better than stylesheets but I would not say its just better than tailwind or other css solutions overall. Type safety is nice but there is still much more than that.

[@PedroCouto1982]

It seems many people see CSS like Assembly language. And we get frameworks to abstract a very high level language to avoid a certain paradigm. At least according to the StyleX documentation, «All styles are bundled in a static CSS file at compile-time.»

[@sarojregmi200]

TO be really honest, I think it's for frameworks like react but it would be great if they supported the style tag at the first place like svelte does it would solve most of the problem if not all of them.

[@hoaxygen]

NextJS and Remix are React-based frameworks. React itself is a library.

[@sarojregmi200]

@@hoaxygen yep, they like to call themselves a framework so that is why i said so.

[@iamcookbook]

this is nothing like Tailwind, this looks terrible to develop with

[@Petoj87]

This seems cool but makes it more or less impossible to prototype styles in the developer tools? With tailwind I can move some stuff around and it works but here I have cryptic class names.

[@ps2cscpp]

I like it, I would definitely give it a try. I did a pet project responsive website long ago with tailwind and I suffered a bit with the usage of media queries. The end result was hard to read and maintain (probably there is a clean way to do it, but I didn't have much experience in that scenario). With the features you mention I have the impression that the chaos of multiple styles applied in different conditions is controlled greatly. Btw, your touch on the key points was excellent. Thank you!

[@zunnoorainrafi5985]

Tailwind will not go anywhere

[@keremardicli4013]

Every single day, react makes web development more complicated and ugly and dirty. Every new morning, a new tool is released to solve the problems of other tools. This is not how it should be.

[@reed6514]

That was my impression too. I don't want to put my css in an array.

[@drprdcts]

Meta devs have to justify their job title somehow. These people are not solving problems. They're reinventing the wheel again, and again, and again, and again....

[@reed6514]

@@drprdcts honestly i feel this way about so many jobs. That the job doesn't have much utility, but it is necessary bc jobs are the main way we distribute resources. Like i just think a lot of jobs could be eliminated if that were a goal, and a different distribution system were developed.

[@LemonTheInternetDog-nx4bo]

an "unset" will work in any CSS framework the same as passing an explicit null in stylex

[@JamesPero]

On the project I'm on, for a little over a year now we've been using a library from Microsoft called griffle that provides exactly the same functionality as StylesX. Anyone know how long StylesX has been floating around internally at FB prior to being released?

[@NamanGoel34]

For the last 4 years and it’s been evolving. And we’ve been in conversation with the people who make Griffel. We lean more heavily in favour of consistency, predictability and performance than Griffel and the cost of slightly more boilerplate.

[@alexgrinberg1888]

Amazing intro. Can you create a course that covers StyleX more deeply? It would be very beneficial to know how to use StyleX with advanced theming or design system scenarios, especially automation from Figma design into components. Thanks for your work!!!

[@jwoods9659]

It's prob over engineered crap

[@KodeAsura]

backward engineered

[@DanielFerreira-qu1rp]

One interesting thing about this new tool is that you can now pass using json structure and typescript to write css ...

[@wlockuz4467]

Yes it mentions this one their landing page. They say now you can share styles on npm which is something nobody asked for lol

[@jamescanady8156]

I'm curious how you have this configured with vite?

[@footballforlife09]

I understand all the benefits mentioned in the video but this is just my personal opinion, I don't like my css inside js, and why would I want my css, my styling to be typesafe, why should I want to add typescript to my styles?? This is a genuine question, not a diss or sarcasm.

[@gintoki_sakata__]

You're speaking facts.. Things should be separate

[@reed6514]

Nah, it should be a diss. This looks stupid lol.

[@damagee8141]

This could be wrong but as I understand it, it forces the user to use styles that are part of the design system and it does so via typescript. so the type safety just means that you can limit which strings can be used.

[@jessejaanila2380]

This... doesn't seem like a really interesting library. Tailwind css can make you're site look "modern" so easily, has excellent documentation and build tools, etc. and it doesn't require any JavaScript. This seems like a step backwards than forwards. I've seen similar styles inline in JS solutions already.

[@kennethkipchumba2532]

Very nice stuff here. I've got a question for you, Kyle. Since you're a master of JavaScript, if you were to start all over again, would you use Vue or React? I want to begin learning a JavaScript framework, but I am spoilt for choice.

[@jurarexx]

senior frontend dev here. definently go with nuxt 3. react is kinda nice but I dont like the syntax. vue (or nuxt) is much cleaner and dev friendly.

[@jakekinchen635]

is this production ready?

[@jeetgangwar1614]

I can write css faster with tailwind and its easy. For me stylex just makes everything complex.

[@booi_mangang]

Not gonna happen

[@abdullahlimon9976]

already have solution for specificity.... styled-components library is component specific..and have tailwind for master of classes. Why we need it ?

[@mattwoolford]

If this is cross-platform, how do you use :hover, and @ rules in React Native? Do you use dynamic styling? e.g. const styles = stylex.create({ main: (isDark) => { return isDark ? { // If dark theme backgroundColor: "#FFFFFF" } : { // Light theme backgroundColor: "#000000" } } }); ... export default function ThemedButton() { const theme = useColorScheme(); return } or is there a better inbuilt way that I don't yet know about? Themes? And does stylex.keyframes work in React Native too?