 You want to introduce yourself, or you want me to introduce you? Sure, I can do it myself. Hi everyone, I assume since this is a JS plus CSS meet up, a lot of you are web developers, correct? So my name is Lin, I'm a software engineer at Facebook Singapore. I work on internal tools, nothing fancy. So yeah, this is my sound production. At work, I use the flow react relay plus CSS modules at work. All of those things were kind of created by Facebook and open source. But during my personal hours, I use TypeScript plus React again and Apollo to replace relay. That is a GraphQL client and also a JSS to style my components at home. You are going to learn what JSS is. And I like inline styling. So I find this is a really fitting topic since we have both groups here. So do I need to talk this again? I think yes, and I'll tell you why. So there was this ancient talk in 2014 by Facebook engineer about problem with CSS. Those are true. Some of them have been fixed by CSS modules, some of them are not. And we have a lot of solutions right now both in the CSS world, like just now the gentleman talked about. And also we have JS solutions. So Facebook actually recommend you to use inline style for React. Surprising it is, but it is true and we actually do things like this. Can you tell me what this button is? Probably not, right? So this is a primary button. Because of the background color here. I was hoping that someone could tell, this is blue. My previous manager could tell any color from the RGB values. So this single element shows all the problems with inline styling if you use the native React inline styling solution. So it's messy and if you want to customize this kind of stuff, you have to either provide props for individual attribute, or you open up the whole style to be merged together with your own implementation. Yeah, that's a pain, right? You want to control how other people use your components if you are in a large team. So classes, CSS class is still left. We have this thing called style components. And it's kind of inline styling, supercharged. You write your components using the ES6 template. These are kind of strings, but they are converted to some function calls. Using this special syntax and it's converted to your, if you notice here, these are classes that are generated from your attributes here. Looks ugly, doesn't it? It's not JavaScript and it's not HTML, it's a new thing. And you want to inject it into your JavaScript, which a lot of people hate. Here comes CSS. Although this talk is about inline styling, the CSS is not specific to React, but I'm just going to do the demo using React. This is a setup you need to do. It's actually pretty much all the setup you need for your normal needs. Just call setup with the preset. So preset is a set of plugins that is most commonly used. And write your inline styles. This looks almost the same as the normal inline styles. It's an object. It can be nested. And you can specify numbers using numbers, surprising. And you can also specify strings as JavaScript strings. Everyone loves that. Looks surprisingly familiar, right? Because it's JavaScript. And you use those classes that are generated by CSS by inserting those classes into your HTML. Don't do that. But this is just for demonstration purposes. Okay, so what does that piece of object generate? It's actually this thing. It inserts inline classes into our HTML document as your page renders. Usually we use this for single-page applications. So as the user interacts with your page, the style changes. This also works for server rendered pages. And the amazing part is that JavaScript is a general-purpose programming language. That means you can do a lot of amazing stuff. Someone actually created some plug-in that generates atomic CSS. I'm not sure if you know what that is. Actually, it minimizes the number of classes that is generated into your inline documents to minimize the size of your page. And it's actually pretty awesome. All right. So let's come to the demo. I assume a lot of you will have questions about how we do this, how we do that. So I'm going to demonstrate these six stuffs. First is how do you use basic CSS attributes? So you're looking at a component. React has this concept of higher-order components. And we are using a React.js library that creates this higher-level component that kind of does what I showed you using the inner HTML. But it integrates with React. The style definition is here. Can I change the resolution? You can try that. Never mind. So the styles are here. It's cut off. You can see normal styles. I'll explain what each of these mean. And the library will create this class prop that will be injected into your component. And you can use these objects, these fields as class names. They are strings. They are generated. When you are developing, they generate really meaningful names for you to look at, to debug. And when you publish it, it minimizes the names. Fantastic. You don't even need to use any minimized solutions. All right. So the next thing is setting generate classes to React class name props. It's here. It's still class. I know some people, CSS die-hard fans, don't want to use inline styles. But rest assured, these are still CSS classes. CSS is not dead. The third thing, how do you do some complex stuffs? First, nesting. If you have used this before, you might be familiar with this concept. You want to have hierarchy in your classes so that you don't want to rewrite a lot of stuff. It's supported here. It's almost the same. It has the same syntax. You have the n% plus whatever you want to add to it. And the CSS library will just generate that kind of classes based on this hierarchy. Second, pseudo selector. I think someone just now asked me, how do you do that? How do you hover? You can do that. And it's not JavaScript. That's perfect. Just use the nested attribute plus your whatever pseudo selector you want to use. Hover, adjacent components. And it definitely works. And third is the class name reference. To achieve this kind of, you want to style the adjacent classes. You use the plus and together by referring back to your class name. Of course, you can refer to other class names, but that usually doesn't make sense. Media query. This is important. I see a lot of people questioning how media query can be done in this method. It's just string. You can use string as JavaScript object names and just use string, the media query as the name of the field. And CSS will generate the media query for you. Still the same syntax. So your skill in CSS will be preserved. It's not deprecated or obsolete. Media query. Okay. Customizability with special props. Right. Remember I talked about how you want to customize an object with the old inline style is by exposing attributes. If you expose the whole style object, you open up the risk of people meddling up with your component in a way that it's not intended to. So I can actually define a different variance for my object, for my component, and use the prop to determine the attributes when the user of my component actually uses it. Oh, theming. Look at this. So you kind of don't have global variables if you use these kind of modules, but you can achieve that by defining your theme in a single file. So that's another question that a lot of CSS diehard fans ask. How do you, you know, you don't have the global thing. How do you let the designers design your themes just by putting those variables here, never have magic strings or magic numbers. And I think it's really easy principle to follow as developers. Right. Okay, next. Built-in customizability with a higher order component. This with styles doesn't only injects the classes into your components as some kind of internal stuff. It's actually exposed to the outside world. So that gives you, that automatically gives you the ability for your user to understand how they can customize your components without even looking at your code. Just look at the props. You know, you can have some doc generator to generate documents for your React components. And if you want to customize, for example, I want to customize the wrapper attribute, I can just use these, like, special classes that I created within the common styles. If, if I want to change the background color of my disc component, I can actually... Oh, yeah, here. Right. Let me do this. I shouldn't do it, but I can actually do background color with, what's that, light sea green? Thanks. And, yeah. Isn't that this one? Right. So I actually customized this component by injecting that class name into the style component of a component when I was using it. Right. And, yeah, so I think that's everything that I'm going to show today, and it's almost time. Sorry? Yeah, if you have questions. So, you know, there are, when I use a lot of solutions, I really prefer to put the styles into the components so that, you know, when you get a lot of files, you don't search around your file system, which can be nasty. All right. Yeah. Thank you very much. Hello. Thank you a lot for a very great sharing about GSS. I have one question about how it works. So as you mentioned that it will make the style, in the style tag, right? In a React style prop. Yeah. No, it's not in the style tag. So if you look at here, they are class names. If you use React before, you know, class name is just a string. Yeah, these classes are just generated strings. My question is that, can it extract the style into an actual CSS file or not? Oh, I believe you can. There are a lot of plugins written for this, but you need to understand that these classes are generated at runtime. So there's one solution that actually generates your CSS for your server rendered components. So you can extract just this string after running your web page for once. So that's what we're talking about. No, actually what I'm asking is that in front-end, right, maybe some components where some very universal stylings that we would like to extract out so that server can cache it. So if we generate, we have some use case is that we also try some of this, but we realize is that we use style component actually, but there are something that we would like to make it very global or not really global but very common component and common styling. We would like to extract it in a file and we put it in the link tag so that we can cache it and we use it with the... Of course you can do it. So if you write it in a way that it's in a file, you can actually create style sheet. It returns your style sheet. You can save it somewhere. Thank you. Actually, I do have one question. There's another. Oh, sorry. I think it's a pretty fast question. I guess I was just wondering whether by default, CSS, the scope, was it local or is it global? It's local. It's JavaScript. I mean, the class names they put, they're global. So they create unique names for all your local... Some kind of hash? Yes. It's how you minimize your CSS. Thank you. Richie, can I ask one question? Okay, so I got tasks on the front-end task now. I'm building a UI library and all that stuff and basically the system. And the main thing I realized is how undisciplined we are when it comes to CSS. Are there any tricks about how you organize your code and stuff to make sure all your other fellow colleagues don't mess the system up? Yes. Putting everything in a single file. Really? Yes. Put your classes. No, no. Put your styles inside the component that actually uses it. So other people, when they go to your file, they know it's yours and they don't mess it up. Best. I'll put in some warnings as well, like comments. One more time, applause please.