 Okay, it's not really funny, it's just because I don't think I'm very decent. So, okay, my daughter's can I at least write it myself? Or actually, it's my journey in the writing CSS in the JS. So, sure, can anyone who's actually writing day-to-day CSS in JS already There's quite a few, but there's about 10. So, we share so much, I have this friend, I think in April she was at this conference, there was like a tech conference, and then this person came up and her first teacher was about how to start with and not use friends. Then once she said, my way of doing it is CSS in JS, and then how to move left. So, I'm not that... This is my Twitter handler, and if you're interested in dead jokes, I retweet a lot of dead jokes. This is from my first job. So, I realized that all CSS in JS are always beginning with. It's not that I don't like CSS. I think it's I like CSS, and my first job was in a advertising agency, so I did a lot of CSS work. And then, yeah, it's not that I don't like CSS, I really like it a lot, but I realized that you can do something else. Okay, so, I think a lot of us went through this process when we were doing CSS styling. So, all the way from the start, we started with UI stuff, before we had the CSS form. And then we went to CSS, we looked at CSS in the garden, because this new enlightened way of writing CSS, that cascades. And then under that, we went to pre-processing. Yeah, so we used CSS, we used less. And then we also moved on to more of, like, structure. There was CSS, there wasn't any CSS. And I think a lot of it is that we wanted to try to manage CSS at scale. And I think this is one of the parts that I was playing out a lot when you were talking about scaling CSS. This is, he's considered, I'm going to say, a B, J, U, X, Christopher. I'm going to say Christopher, something. So, he works at Facebook, and then he shared this session in 2014, talking about how it's actually very difficult to use CSS at a standard scale. So, he found out some of the problems. One is that CSS is always a global space. Like, even if you use, include, like, you depend a lot on it, it's actually added in as a global scale. So, you might have a lot of problems where file A requires file B, so it goes file B, and then file C also requires file B, but then it didn't look file, it didn't look file B, but somehow it still works, because A already wrote it before. And then finally, when you just pick up A, you realize that C doesn't work anymore, because it doesn't, it depends a lot on it, but it's not loaded. So, that is, like, when you're looking on JavaScript, we are very clear whether something is included, but then CSS is a bit weird. And then, and then the most part is the big quote, big quote elimination. Like, when you want to remove CSS, each refactoring is very painful. Like, at first there was this component, there was being a, maybe it's for button, and then after a while, this button's not used. It was removed from all your DOM, but then you, I'm not that comfortable removing that in CSS, because you have to, like, get through everything, and then in CA, is this used before, is this used in other class. So, you feel a lot of pain when you're trying to, like, clean up your code, try to refactoring CSS. So, yeah, this is the one that I think a lot of us end up doing, which is B, E, N. It uses the syntax of block, element, modifier. You can carry that kind. Yeah, all the talks today, like, we used to work there. Nice. This is a song, by the way. You don't have slides when you code that, okay? Nice. What do you mean, you didn't do this, okay? No, I hope not to get one. Just did you have a date? No, I'm not sure. If anyone can find that, I'll use it. I think you should do it in the other side. If you take those. Okay, so this is how you write using VM. So there's, let's say, this base block, it's a button class, and then from a modifier, you actually add a drive dash to mean that it's a modifier. So there's another button, and then there's the depressed button, which takes it across a button, and also a button depressed, which tries to modify some of the, the pattern from where you will get the modified version. Why would you try this? Yeah. So, yeah, working with VM, you are actually working with VM, so there's nothing that you can stop someone from using it that way. Or like, the person has like, crazy naming ways, like, you use that button, but the person loves ice creams, and then just call it dot ice creams, and then they're starting to stop you, and they're starting for someone to stop using VM also inside a project. So let's say if someone comes into a project and doesn't put a VM where you've been like, ah, you, this is not really good. So, we had to deal with CSS on scale, so we worked with VM a lot, and then that's when I started realizing that my code is very verbose, and it's very, very long. So I started to be at Atomic CSS, which is starting controversial, because when you write with Atomic CSS, they put stuff like this. Yeah, so you have like, 1000 class, each of them are designing one thing, actually. So like, DA I think is border or, DW is border-ree, so if you change it, you have 10 different things. So this is padding in the horizontal side, and this is padding in the vertical side. So for this, you realize one thing, your CSS file is super small, because there's no reverb. Like, border-ree, one is going to appear one type in the CSS file, it's going to have a super small CSS file, but then you're gone because it's very hard to read. And then, I realized, like, so I actually used this style to do two projects, two projects that are in production. You are even using it day-to-day, like, this is a phone brand that I was looking for. So, you went to production, it was okay. File size was much smaller. There was almost no big CSS code, because it's nothing that you are learning as custom. And then, like, people are working on a project, I was looking super fast, because I remember, like, padding polynomial, that's pH, and then it was a tempo of 1, 2, 3, 4, but then, if I stopped looking at the code for a while, I realized I need to keep looking at the documentation. Of course, there are people who will try to circumvent it. There are, actually, people who really, really like this library, and then they provide this for you. So, you just have to look at padding, and then you can see, what does each link. But this is still a lot of reference to the documentation. My favourite comment about this way of writing is, this is just a nice style. Like, you are just writing a nice style in another way, using class, so that your face will be beat. We work on another project, like, it's a coding, right, which is that I have to do a regular tool. So, I didn't know, I know nothing about regular tool style and encapsulation. I went into the project, and then I just came in, I wrote a style, and then I realized, oh my god, the style is stuck within my component. It's like, oh, nothing is going to override each other anymore. Like, because what we do is a with each component, that is a hash of your CSS style, and then it's, it pans a class to itself. I don't know whether this makes sense, but it's very close to what actually the CSS model is trying to do. But then this is just, we got to work to just x, y, z, z, 1, 2, 3. So, following that, I was following a lot on CSS model because I realized that it solves a lot of problems of what DN was trying to do. So, DN goes to a convention, but CSS model will force you to write things that I wrote in your police code. You don't want to write any CSS that is global in scope. You can, you can do that, but then by default, everything is going to leave. So, that's when I move on to my next project, which is based on React, and then as any lazy person who works with React, will use create React app, because it sets so many default without you thinking about it. So, what is this? Yeah, so I use, I was like, I'm going to use create, create React app, and then I went in, I looked at an invitation, and it was this. We are not supporting CSS model. I was like, ah, just took away everything that thought was the best way of doing things. I was like, okay, I'm going to ask Facebook what's the best way of doing things. Since you know Facebook because you're quite smart. So, I went in, and then I checked out, okay, okay, React application, how do you do styles? And then they say, you should just set it in the, the document was, it actually writes in the dot style, dot font size, dot style dot, something. So, this is literally in line style. So, I think a good question is why do we not write in line style? I think, a lot of times we will say, we don't write in line styles. But then why? Why do we not write in line styles? The reason, the reason. You can't ever write them? Yeah. You can't write them. You can't use Sudo, any form of Sudo over before, after 10 minutes. You can't write any media queries. So, when you have no media queries, then you write in line. And, if somebody writes important in line, okay. That's enough for me. Okay, so, I looked at what create, create, create app, do you see? So, then I realized that what they are doing is import.app.css house. Like, this looks strange. It goes to the end of one. It's an encapsulate. Is it? Is it going to put in scope? And then I realized, it's just a web app import. So, at the end of the day, you just tap, tap, tap, tap, tap, tap, tap, or import into one. So, I'm back to square one. And then, I think a lot of us are very angry about using CSS and JS because we want to do hard, obtrusive JavaScript. Like, everything about writing styles is CSS. The first thing we think of is something like this. Like, okay, this thing, this title changes the size based on the screen size. And then, over here, I just add an event listener on the resize, like, each size of each one. And if you look at the DOM, it's super ugly. Too big. When we talk about, when we think about, like, CSS and JS, this is what we think about. We're like, ah, this is very ugly thing that we're trying to take straight into our style. And then, we try not to do that. So, I think it needs to come with a modern mind. Okay, so, I think I committed my journey to try to still use CSS in React. And this is still the same tool button, normal button, a depressed button. And then, I still want to use CSS because I don't want to delete from it. I realized that actually, if I just have one similar component to modify it, let's say, I'm passing the pop that will say depressed, I actually have to write something like this right inside my JSX to say that if there's a depressed, you need to put this class in. It's slightly ugly. I feel like, okay, it works, but not beautiful. So, that's why I was like, okay, it's kind of good with CSS and JS. So, there is a dismiss. So, the first thing when you search for CSS and JS, you will come to this place and then you'll be like, okay, let me try one, two, three, four, five, six, seven, eight, and this is the exact way of doing a development. We just have to show that two things that are very, very similar but then need to be changed and then they will think about this one, this one, this one, and then they will think about this one, and then they will think about this one, I found this, which is pretty interesting. Okay, so this was a little bit like a promise CSS. It generates one line as one class. So, color rate is class B, it's green, it's class B. This is actually a bit less painful. So, you are still going to this path. You want to generate this really with your CSS file, but then you do not want to be referencing documentation and then you'll write your own one. You can actually use this one then. So, what do we have here? This. Yeah, so each becomes equal if you are one team, reference one line. So, it's almost like just now the promise CSS, but then this is something that you generate yourself. I think it's a good idea. I guess with this you have really really small CSS file. Thank you. Yeah, but it's the debugging is painful and probably nobody needs that. Okay, so, we have features for Spark Components. And I think this is a library that we talk about over the world then because one thing that really differentiates it is you are not writing JavaScript, but instead we are writing CSS straight here. So, if you use any form of syntax highlighting in more ways, highlighting property for you, we still go here. What it does is instead of writing the class name, what you do is actually which you say is a start button. So, and then you name it as let's say any name that you like I'll name it start button over there and then in case my element will start button and it will become a button with all this starting in. And if you check that if you check what's here with the check button, it generates one class and this class holds everything here. So, why is this? This is actually a hash of all this here. So, if you have the exact same thing you will actually generate the exact same class. So, for this there is a lot of excitement because you are writing real CSS which comes if you have slow and you have linear queries and the V2 of start element varies some of the time which means that you have some CSS using alignment. Yeah, there is team so you can actually write teams and then you can you can pass this team all the way down to all the way to your next third component you can still receive. But let's say that this team has a pink color that's the base color and every element in your in the project can receive this color and a new interesting addition is also attributes. It's sort of like an escape patch for a start element where you actually set attribute strip. So let's say it really let's say if you are using another library let's say you're using bootstrap and you're not using the end bootstrap you're using the base normal bootstrap you just include the CSS file so you need any other casting into your element so instead of adding um instead of adding let's say here so instead of saying let's say um then this is column A6 what the new start component allows you to do with the treatment object over here let's see here over here see this you can like this casting so it becomes like study option you can you can be you can be you can be you can actually start to add things that you need okay so I think there are some parts that comes with it that is not so direct which is I think one thing that I really enjoy is there's no more build process um of course you know okay I'll talk about the build yeah there's no build orders I don't need to set up a guard or workhead although most although the build has workhead it means that I mean the next thing is great but that is context switching when I move between JavaScript and writing next thing and this will mean I have only writing in JavaScript um it fits really really well if you have um if your workflow includes writing style libraries like this is a button you should use across all the pages and this actually works pretty well in this workflow and there's almost no work but I think there's some discussion one is performance because you are going to pass the JavaScript string because it's still a string and then you pass it to the CSS so there are people will ask you is it something like does it affect performance still are you like okay dividing this slightly harder because you can't point towards what it's causing but but the biggest problem with using style component is rapidly changing style okay so over here we have this there's a panel that move in move out how this is calculated is that it has a state and then it actually tries to change the the position of the state so the string and you realize that the problem is changing the problem is because like what we are talking about just now this is a hash of everything here and if something changes this whole problem changes and yeah for now the solution that has been discussed is to not use style component for that the thing is the ultimate suggestion is to realize that so yeah I think what I really like about style component is that this whole notion of falling to success like you don't have to follow conventions because conventions are updating and in order for something to work you must be writing like the best form of the code and yeah this is huge basically you are writing statuses for a partner and then you also have to somehow else also have to react so you might be like this that she knows there's something else we have to add but your react like this is going into the act so it's an awesome way to react it has to be designed housing it's like a work-around so it's designed at what you do where you can actually put in classes you can actually reference another file and you also can so try to import that file and then you reference that file so there's no way for you to write something in the style component and you wouldn't use that outside there's no way to get any if I mean there's still a stream so if you can export that stream and you want it somewhere else you can use that stream then you try to use props inside the stream and then somewhere else you can use that stream it's kind of like a fallback it's a prox about there and then you just you can it's a condition you can use that stream yeah you can and then you can import more props there you can export that yeah I have to export that it's a prox because it's just another way then you can use that stream and then it's also a stream okay so that's how I would import yeah so I just I just want to export this stream and then you can use whatever that might just be a little bit shorter then you can export thank you thank you so much thank you I've got like also so actually the styles can compile when the JavaScript can run instead yeah it's actually inserted in the heap when the tasks in JavaScript come up in here would it work if clients at JavaScript somehow fail I would still get a little bored then yeah you know if the man doesn't run so if you type in why do you sometimes have to get fired do you sometimes have to get fired or are you responsible and sometimes I don't know of them yeah people but you want to be magic you will be the others how is the one that you're looking for where else I'll put that on I'm just not very nice despite not being so if you find a style for the man then he's really comfortable if you just talk about that he has a really good component yeah but you you don't get you don't get state like you don't get state like you don't get state like you don't get state yeah if you don't get state it's actually a component and that is actually the thing around the element that you choose and each of them which is a component any other questions you can get any much any questions any questions I'm curious about the style size like the generated CSS is it any bigger than similar okay so you don't generate when you see this one it's always well when I say generated I mean my generated by-reactions it's like compiling your CSS in essence yeah so how's the file size all of the by-size of your CSS compared to if you're using any other method the key thing is it's always learning what your current file size is so you're never learning your old CSS at any one time so if you have many many components definitely learning the same from that component it might be very faster even small possible you're in a sphere so you're still sending all products to the client anyway so you're still sending them I'm just curious because normally when you have your CSS you have a monolithic CSS file it has everything in there yeah I'm curious if that's significantly different file size unless you've got your how's your file size quite just in time so if you need a way of learning you can click back and you can get to like all on your own even if it's not you're using React and I'm not using like CSS or anything like that so it's to be more traditional in essence so using React doesn't mean you can access it in a specific way I'm curious to know if there's a difference in the exercise if it says as if it says as how much do you believe in difference because CSS doesn't have any probability about the outside it can yeah unless your CSS really like in the lines it's like you believe in difference I mean really really good but I know she did for a test of the I did for it but a bit more responsibility in the learn the difference is usually a couple of hundred lines and then a date of bite size it's really not as if you're if you're optimising down to bites unless you really saw all the bigger forms like I'm not religious um yeah it's to me that's a different micro move but I mean as I said then sometimes you're tailed score a score of maybe I'm over 30,000 so I used to have a problem with I'm strong like user there's a problem yes and then another friend there's a problem and there's a problem yes I think there's a bigger problem in in the in the in the in the CSS CSS If you have questions from the audience, you're shy, you often go and ask a pretty good question. You just don't get chocolate. We can't make a video and he's going to talk about it.