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

@gintoki_sakata__

5 ай бұрын

JavaScript be doing that sometimes😂

@mohdsameer8899

5 ай бұрын

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

@petarkolev6928

5 ай бұрын

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

5 ай бұрын

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

5 ай бұрын

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.

Soon will do just

@wlockuz4467

4 ай бұрын

Honestly, it seems more sane than stylex.

@epicmetod

2 ай бұрын

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

@mahmoudzakria6946

20 күн бұрын

Svelte ERA

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

5 ай бұрын

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

@DeepTitanic

5 ай бұрын

Tailwind was awesome for beginners but times have changed

@dragoscatalin

5 ай бұрын

​@@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

5 ай бұрын

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

@michaeledison1974

5 ай бұрын

periodt.

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

5 ай бұрын

Too much overhead just to make a blue heading🗿

@ankitak5939

5 ай бұрын

Please tell me a practical way to learn tailwind

@mvargasmoran

5 ай бұрын

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

5 ай бұрын

@@ankitak5939 RTFM

@Daijyobanai

5 ай бұрын

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.

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

@ScriptRaccoon

5 ай бұрын

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

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

5 ай бұрын

We already have JSS tho

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__

5 ай бұрын

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

@goosydev

5 ай бұрын

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

5 ай бұрын

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

5 ай бұрын

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

@T1Oracle

5 ай бұрын

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

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

4 ай бұрын

Its called arbitrary classes

@wlockuz4467

4 ай бұрын

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

4 ай бұрын

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

4 ай бұрын

@@wlockuz4467tailwind made coding in react tolerable to me

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

@greenshaheen6716

5 ай бұрын

mostly titles and thumbnails are clickbait and misleading

@Aezur20

5 ай бұрын

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

5 ай бұрын

StyleX is framework agnostic as well

@zmeireles68

5 ай бұрын

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

@DeepTitanic

5 ай бұрын

Tailwind was great for beginners but things have moved on

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

@Joso997

5 ай бұрын

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

@foolmoron

5 ай бұрын

​@@Joso997 You can with unset

@birthdayzrock1426

Ай бұрын

@@Joso997 padding: unset;

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

5 ай бұрын

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

5 ай бұрын

@@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

5 ай бұрын

​@@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

5 ай бұрын

@@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

5 ай бұрын

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

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

4 ай бұрын

Correct

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

5 ай бұрын

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

@hiryuimajin

5 ай бұрын

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

@derciojds

5 ай бұрын

@@aimableruhumuriza8603 Actually it adds simplicity on large projects.

@petertyldesley6542

5 ай бұрын

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

@ChibiBlasphem

5 ай бұрын

@@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.

This is absolutely not the end of tailwindcss!

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

5 ай бұрын

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

5 ай бұрын

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

5 ай бұрын

Nope you are not alone : 👋

@coherentpanda7115

3 ай бұрын

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

3 ай бұрын

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.

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

5 ай бұрын

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

@Daijyobanai

5 ай бұрын

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

@Kiev-en-3-jours

5 ай бұрын

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

@user-lm8bj6wb4q

5 ай бұрын

Does facebook create any good things on earth?

@Kiev-en-3-jours

5 ай бұрын

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

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

5 ай бұрын

Yep, me neither

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.

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

@harikrishnanprabhakar4520

5 ай бұрын

But better than how styled components work

@coherentpanda7115

3 ай бұрын

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

css is all you need.

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

5 ай бұрын

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

5 ай бұрын

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

4 ай бұрын

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

No need tailwind works great

sorry man. i will go with tailwind and scss now

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

5 ай бұрын

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

5 ай бұрын

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.

feels like styled components.

@macctosh

5 ай бұрын

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

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

5 ай бұрын

💯

looks like react native devs are going to be happy

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

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

@zlackbiro

5 ай бұрын

Nothing can beat SCSS. Period...

@rafikkasmi1406

4 ай бұрын

@@zlackbiro until tailwind...

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

5 ай бұрын

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).

A new framework pops up every day 😂

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

5 ай бұрын

Great to hear!

Being a FE developer is so hard nowadays 😢

@randomd00d19

5 ай бұрын

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

5 ай бұрын

Feel the pain

@priyeshvaghela9920

5 ай бұрын

@@randomd00d19 true bro

@IvanRandomDude

5 ай бұрын

Try being a surgeon

@suyashsrivastava3671

5 ай бұрын

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

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

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

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

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.

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

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

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

5 ай бұрын

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

4 ай бұрын

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

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

3 ай бұрын

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.

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.

I'd rather stick to vanilla css or tailwind. This seems like a solution to a problem they are yet to create.

So basically RN stylesheets 🙂

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

5 ай бұрын

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

5 ай бұрын

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

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!

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

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.

just an extra headache

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.

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

@paradoxalJohn

5 ай бұрын

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

@Amaraticando

5 ай бұрын

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.

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

5 ай бұрын

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

4 ай бұрын

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

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

5 ай бұрын

Better than styled components you are dumb.

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

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.»

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

5 ай бұрын

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

5 ай бұрын

@@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

3 ай бұрын

@@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.

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

@moimsk8

5 ай бұрын

I just thought about It.

Nice style library styleX 😃... Fully dynamic thanks for letting me know about this 🙂

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.

I'm happy with tailwind

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

@NamanGoel34

5 ай бұрын

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

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 ?

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.

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.

I'm following your channel and everytime I watch your videos I learn something new so thank you for that

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

@coherentpanda7115

3 ай бұрын

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

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

3 ай бұрын

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.

i have a questions can we do animation and if change the class can base class style apply the transition property mean like CSS we define base style that has the transition property for smooth transition and we use another temporary class to chang in style can we do that in stylex

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.

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

5 ай бұрын

react hater spotted. nobody is gonna use svelte

@Dev-Siri

5 ай бұрын

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

@ZedDevStuff

5 ай бұрын

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

@wlockuz4467

4 ай бұрын

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

@x4fingers

4 ай бұрын

@@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.

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

@stijn3085

4 ай бұрын

Except it’s essentially CSS though

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

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.

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

5 ай бұрын

how can styled components become messy compared to tailwind?

@mobythereal

5 ай бұрын

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

@NotTheLastOne

5 ай бұрын

@@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

5 ай бұрын

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

5 ай бұрын

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

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.

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

5 ай бұрын

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

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

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)

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

5 ай бұрын

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

@drprdcts

5 ай бұрын

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

5 ай бұрын

@@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.

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 {...}

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.

Tailwind will not go anywhere

" 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 *

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

5 ай бұрын

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

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

@wlockuz4467

4 ай бұрын

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

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

5 ай бұрын

It was great but Tailwind would get out of control fast

@KodeAsura

5 ай бұрын

@@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

5 ай бұрын

@@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

5 ай бұрын

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

5 ай бұрын

CSS modules handles that already.

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

5 ай бұрын

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

@brangja4815

5 ай бұрын

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

5 ай бұрын

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

5 ай бұрын

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.

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

@wlockuz4467

4 ай бұрын

Just wait, Vercel is probably cooking a metaframework for stylex

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

whats the main difference with this and styled components?

@macctosh

5 ай бұрын

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

@DeepTitanic

5 ай бұрын

Linaria also does this @@macctosh

@WebDevNiko

5 ай бұрын

ah k thats cool@@macctosh

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

5 ай бұрын

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

@sarojregmi200

5 ай бұрын

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

I think vue had the right idea a while ago. Literally just put in a style tag and write your css in the component file

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

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.

styled components?

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.

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!!!

is it similar to styled components 🤔🥱

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__

5 ай бұрын

You're speaking facts.. Things should be separate

@reed6514

5 ай бұрын

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

@damagee8141

5 ай бұрын

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.

What is the difference between styleX and css module. Any insight 🤔