 Okay, so hello, my name is Hongking, I'm from Nice Beach too. So today's talk will be a quick intro about CSS Produce. I mean, how many of you have heard of CSS Modules? Like quite a lot, right? So I recently went into using CSS Modules for React.js. Ya, it's okay lah, talking about React and... Okay lah, whatever. Ya. So it's just a basic, what is a CSS Modules? So this is a very basic concept. So in normal button.css, you just declare something like a base and normal and disabled. So in your React component, you import styles from CSS, button.css. So these styles actually is like a key value that returns the base normal and disabled. Then you just pass in and just do a button custom. Your custom will be the style.whatever that you pass in. Then when you compile it using your webpack, you will be some gibberish. Actually this gibberish, you can define in your webpack about how you want to hash off your values and things like that. So this is all we know about CSS Modules. But apparently there's actually more about CSS Modules that I discovered. So this property called compose. Like, have you heard of compose using, do you use compose? Ya, but apparently compose is a very powerful feature. So if you know your, if you don't use CSS, you know extend. Extend tends to, let's say you extend a base. Then your base actually is included inside the maybe normal buttons. But for this case, it's not. So let's say if you have a button with base styles, you don't want to, then you don't want to replicate this code over and over again. So you just put it in base. Then you use compose dash dash hash colon base. Then you write the whatever normal button you want to be. Then in the final code, what happens is it will include the normal style and also have a class of the button base. So actually it's not exactly a class that is sort of replicated. So it actually is sort of like your CSS will be smaller. So it's sort of save your CSS space. Because I think if you are very concerned about the size of your CSS payload, this will be a huge advantage. So this is one of the powerful feature for compose. So apparently compose, you can also have multiple compose. So in my example, I only have one, but apparently you can import other classes like you can do import compose with a class of a nav file. So actually it's possible to do that. Then they will just keep congratulating a lot of class. So your last compile will have a lot of these kind of things. But if nobody, your user won't care about your DOM. So actually it doesn't matter. So another feature also is the global and local. So let's say you don't want to have the compile class, because if let's say then you compile the class contribution. But what if you, at that I also want to write my class name. I don't want to publish it. So you use something called colon global inside the class button.css. Then you just put it there, then you won't actually sort of like jambal of your class names. Then another one is local. Local is basically, it's actually the same. It's the same kind of syntax. But another one, one thing is that you can actually mix them together. So let's say it gets more fun. Let's say you mix them together. It works very similarly like your class. But you can actually sort of like have multiple global, local kind of thing. So it sort of like, let's you have more power. Let's say for example, I want to have my label global to not be Jewish. But I just want it to be there. But I just want my CSS to be local or something like that. There are actually cases you might need this. So it work, it can work. So for example, in my next slide I'll talk about it. So let's say for CSS modules, naming convention is prefer camel case rather than dash. So can use it with other kinds of CSS systems. Actually yes, you can use it. Oh no, yes, you can use it. Because let's say if you want to try out you have libraries, actually we have an internal library that is written in CSS. Then I want to try to use CSS modules. But the language are different. CSS, CSS, is it possible? Yes, it's possible. You can, you can. Just that you have to be, your paper will be harder. So you have to write a bit more code to enable you to make this work a bit of a bummer but no choice. But yeah, we want to use shiny things. So it's possible. So let's say if you're using things like bootstrap or some kind of libraries that you want to use. But you still still want your local kind of nice, componentised, but you don't want the global kind of stuff. So you can do something like that. So you sort of like say that oh for classes that are right I just enable the modules. Then for those I don't want like global style sheet, I just disable it. If you don't do that, I think you'll get a weird case where your global style sheet get the jumper classes. So a bit, not so nice. So let's say global style sheet example and include a Zendesk CSS button. So then in your button class you just say in your component you can do something like this. C button, button primary, then you can just make some match. So it works out quite well if you need to use a global style sheet. Ya. So it says it's the same. Just that you will use says syntax all. Ya. So quite easy to understand. So overrides. Is it possible? Ya, it's possible. Overwrite your, sometimes you need to do it because maybe design changes or you have some special cases you have to do this. So it actually works. So, which one? C-CHK. Oh, actually that C-CHK is based on the Zendesk. So this example is the same. So let's say so the Zendesk CSS form has C-CK. So that is the global name. So if they say there's a trick to say that you're not to like the CSS module to jump out your classes is to just define it as a string. Then all they care about is the style label then they will jump out that class. Ya. So that is the thing. Overrides ya, quite good. End of my talk. Yes, thank you. So any questions you can just find me on Twitter. Thank you. Thank you.