 Singapore? How are you doing? I'm gonna take my shoes off. Alright, so I'm Mike. I'm a web developer from Australia. It's an absolute pleasure to be here today. I've been through Singapore many times. I've never actually stayed. I'm super excited and I'm really enjoying it so far. I'm really looking forward to JSConf Asia as well. So I'm going to be there. Please come and say hello if you have like any questions about tonight's talk. You can talk to me there. You can talk to me here. Whatever you like. You can also talk to me on Twitter as well. So if you don't feel comfortable asking a question or you know whatever you just missed the opportunity to do it there, it's not actually the law. I apologize for that. I just don't know what I was thinking. So the title of my talk today is Understanding CSS Custom Properties. And the reason that it is called this is it's kind of based on a talk that I gave in a blog post that I wrote previously which was a strategy guide to CSS custom properties. And I encourage you to have a look at that if you want a little bit more detail about what I'm speaking about tonight. But the truth is I left my slide deck at home. So I've recreated this with what I had online and stuff and we're going without notes today. So hopefully this goes alright. I want to give you a quick demo firstly of what we can do with CSS Custom Properties. Was that Phil Nash in the background by the way? He's also from Australia. I'm going to call him out and get him to pick tonight's color scheme. Pick a color Phil for your primary. Yeah, I thought so. Now do you remember that? Do you remember the hex number? Anyone? Is it like let's just pick green. It's kind of a bluish green, right? Yes, it'd be nice to him. Phil, what do you want as your secondary color, mate? Say it again. Christ, where do I even enter a hex thing? Can you give me a HSL? Mate, you're getting hot pink, okay? That's what's happening. Alright, so you can see that the custom properties have been written down here and this is genuinely happening in the browser at the moment. We're just writing this to like a style tag and this is actually affecting the slides and you can see it's already affected the title of this slide and hopefully the title of the slides that come as well. So that's kind of how they work. I want to give you a little bit more detail about how they work but I'm not going to focus too much on the syntax. Just very briefly, they're not really like variables but they sort of are. You probably know that we use a dollar sign to denote a variable in SAS and unless we use an at symbol and custom properties have a similar convention they have a dash dash prefix but you'll notice two other small differences there and that is that they're contained within a CSS selector in this case the root selector and we will talk more about that in a moment. But also there's a different syntax for assigning a value to a custom property than there is for retrieving that value. So when we're retrieving the value of a custom property we use that little var function there and that should be familiar to people who use like Calc or in Max or other sort of color functions or any of those more functional parts of CSS that are making their way into the modern language. So hopefully that's not too confusing. The other difference is that pre-processor variables can be used almost anywhere and this means that they can be used like in break points, selectors, values basically anywhere and there's a whole bunch of examples here where you can see like I'm writing out like the selectors variable here and I'm using it as a value and I'm using it in an at rule and all of these examples would be invalid if we were using custom properties. So custom properties can be used anywhere that normal CSS properties are valid and that basically means between these curly braces here. So you can see again we've assigned that to a particular selector between those curly braces and that also can be used inside like a media rule as well so we can change the value of the same custom property in different contexts within the same page and that really is the key difference so just take note of that. So similarly that var statement can be used anywhere that normal CSS values are valid and what that means is that they can be used as single values in shorthand statements they can even be used inside calc and color functions and things like that so you can see there's an example of assigning a single value to a color I'm using it as a shorthand for the right margin there and I'm also using it in a calc equation here to apply padding so there's lots of different ways you can use CSS variables and if you're thinking about the var statement all you have to remember is is it somewhere with I can put a normal CSS value or a unit type thing and that pretty much ends my crash course on CSS custom properties it's probably a whole lot more that you want to know but that should be enough to sort of to help you with the rest of the talk I guess so cosmetic differences aside the most significant difference between preprocessor variables and custom properties is that custom properties are dynamic so you possibly have some idea what like dynamic variables mean and what static variables mean but as far as preprocessors are concerned what what's static so preprocessor variables are static custom properties are dynamic so static as far as preprocessors is concerned means that the value of the variable can change but it's not going to update anything anywhere else in the page or anywhere when the browser changes so what that means is I can set the background variable here to red and then it'll be output as red so this is the this is the CSS this is the CSS that gets generated and again I can change it to blue it's not changing the one above and variables sometimes do behave like that if they're dynamic depending on depending on the language and how they're used but basically with preprocessors you should be able to read an entire dot CSS file and if you've got enough patience you should be able to work out exactly what the output is without needing to know any other context about the HTML the device or anything else like that and that is not the case with custom properties so as I've said already custom properties are dynamic and where CSS is concerned dynamic dynamic means that their scope to selectors and subject to inheritance and the cascade and I just want to give you a little like visual example of what that means we've kind of already seen it but if I apply this CSS here you can see that the color of my slide heading my primary color has been updated to tomato and you can see that that's affected every slide but I can of course change this here and I can just say I think this is what I called it yes I can just say like the only this dynamic slide and that is now only affecting this particular example here so that's kind of what dynamic means with custom properties and we'll show you some more examples of that as we go through as well okay so in addition to to being sort of like dynamic or static custom properties and variables can also be global or local and again if you if you write JavaScript you'll know what I mean here variables can either be applied to sort of everything within an application or their scope can be limited to specific functions or blocks of code and custom properties are kind of the same so by default custom properties are scoped locally to the selectors that we apply them to so they're kind of like local variables but custom properties are also inherited and you'll know what this means if you've done things with like font properties or color or any other thing that you want to force to inherit in CSS and that means that like when we're looking for the that retrieving the value of a custom property and there's not custom property assigned to that particular selector it's going to walk up the dome and find the nearest parent that has that particular custom property and it's going to inherit that value from there and that means that custom properties are kind of global as well and especially when we apply custom properties to the root selector which is a very common pattern you see in a lot of examples including some of mine but it's not really a pattern that I would suggest you use to widely okay I love when I put the microphone on my throat and you can all hear me swallow so this idea of like global and local variables and stuff is not just like limited to code there's like global and local things in design as well and if you look at any design system and this is just like a wide screenshot of the material design system you'll see like consistency in terms of colors sizes shapes so design has things that are global and things that are local as well so some of the local things are like the button size variations whether like an avatar's on the left or the right of a component these are local things that like change from component to component and then you have like global things that you want applied like consistently across your application right you want your spacing and your topography and all of that hopefully to be consistent so as it turns out most global things in design most global things in CSS are also static right your topography doesn't change from one build to the next typically definitely doesn't change from one component to the next maybe there's a few little exceptions but typically you want these things fairly consistent and they can change but where it does happen it tends to be like a global redesign and not something that happens regularly with a mature product and for that reason I think that you should consider using preprocessors for static variables and aside from helping keep like those dynamic and static concerns separate it visually denotes them in your code and that makes your CSS a whole lot easier to read and therefore easier to maintain as well so don't necessarily just jump to it because you can so you might think that given my fairly strong stance on that last thing about all global things being static and remember when I say static I mean pretty much preprocessors you might think that okay well if all global things are static by reflection all local things should be dynamic and yes I agree kind of that tendency is nowhere near as strong as the tendency for global things to be static and I think that it's perfectly okay to have locally static variables sometimes and particularly in the case of like complex UI components but of course complex UI components don't make fantastic slides so I've got the simplest version of that that I can which is a bunch of buttons with different sizes again pretty lazy of me really but basically you can see that like just as a developer convenience I've got three variables here that dictate the different sizes and I'm using them on different classes there to get those different sizes you've probably all done something like this before now obviously this would make a lot more sense if we were using these variables more than once it would make even more sense if we were deriving padding and marginal using like you know preprocessors to do maths or something like that so yeah obviously that makes more sense but you can do it like this too and something like that I think it's perfectly fine to have preprocessor variables and I like to prefix them with the component names so they know that these are local variables you can use any prefix you like or you can choose to prefix your global variables but for me it helps to know that these are local static variables because the most of my static variables in my code if I'm using custom properties are going to be more global in nature the topography that the constants things like that maybe you'll capitalize them find some way to differentiate them I think is the point that I'm trying to make now I want you to imagine a situation where on a small screen or a mobile device you always want to use the small variation and then like above say 800 pixels you want them to use these sizes here so like no matter whether you've used the large class on a small screen it's just always going to be small and suddenly we have like a more dynamic situation right and in that case I think it makes sense to continue using this and this might be a pattern you use if you like refactoring code where you make these like locally static variable variables into dynamic local variables and I want you to have a little look at this example here I know everyone said hates reading code but let me explain it I have one custom property here called button size I assign all of my buttons the value of button small now you might be wondering what's this little hash in the curly braces in SAS that means I want you to output the value of this variable instead of doing anything with that variable because you only need this in special cases and just so happens that the value of dollar BTN dash SML is a valid custom property value so I don't know why you would use it but you can write that in CSS so this just tells us I want you to output the value of that variable so now we can ignore that so we've got a custom property that's assigning a size of small initially then above 800 pixels what we're saying is for the button medium and the button large I want you to use this other property here we're changing the value of the same custom property at no point yet have we used that custom property it's not until down here on the button class which is applied to every button that I'm using or retrieving the value of that custom property and that will know because it's scoped the variables are different depending on the other classes that are on those buttons so what we kind of have here is a separation of like the logic component and the declarative code for styling CSS and this is just an introduction to that example will begin to make more sense in a moment but I want to take a little bit of a breather now a little bit of a diversion and remind people to not be too clever so this is an example of some code that I saw in an article by Bill Sawyer on the free code camp medium and I kind of love it it's like it creates an array it loops over a bunch of numbers basically and pushes like a character code converted to a string into the array to get the letters of the alphabet right and it's small and it's concise and all these faster than typing out all the letters of the alphabet by hand especially since we have like a lot of Chinese speakers here as well I imagine that would take a long time right yeah so it's cool but like in production I'd much rather have something like this right because the fact is we read code far more often than we write it and I want to see what's inside that variable immediately so something like this makes more sense to me in a production setting and the same thing can be said for custom properties as well now when custom properties when you someone sent me this example and I was like oh yeah that's awesome and for about like an hour it was awesome and I'll quickly explain it actually so because custom properties run in the browser at runtime this is generating like a modular scale which is like a series of numbers that relate to each other does anyone use modular scales before they're just imagine headings that sort of get larger and the rate at which they get larger gets larger as they get larger and makes so much sense and so basically what it's doing is it's multiplying this ratio by the value of the previous custom property to step up in the scale right you don't have to you don't have to like understand how that works but what you do have to understand is how cool it is that I can just change the value of the ratio and all of those other values will be updated automatically so I can switch from a 1.2 ratio for my heading sizes to a 1.33 ratio and that's cool but then I realize that in production once again I'd much rather something a little bit more like this right so again I want to be able to read those values by all means I think that you should experiment and do things like the previous example but in production maybe consider something like this now this isn't perfect as well because it violates the rule earlier that sort of global things should be static and I feel like these are like kind of global so I'd much rather use pre-processor variables for this as well and then convert them to like locally dynamic properties using the the method that I showed you with the button before so and what the other reason for it is basically when you have something like this you can end up doing a thing where you go from using font size 1 to font size you know 2 to font size 3 inside media queries and that's really not how custom properties should be used that's how static variables are used so I want to say be careful of familiar patterns right so here we've got an example of like a font size small and a font size large and then initially we're applying the small size and then we're using a media query and we're applying the large size right that's exactly what you would do with SAS and this is typically the wrong thing to do with custom properties what you want to do with custom properties is change the value not the variable and what that means is this right so we have an example class again we're applying the example font size we have a variable called it's got that that custom property belongs to that selector and then we update the value of the same custom property using a media query and then we only have to retrieve that value once once again we've got that separation here where the code where we apply the custom properties and the code where we sort of like declare all of the logic that relates to them do people sort of see the difference there that I'm demonstrating few nods okay so I'm running out of time I just want to quickly talk about custom properties for responsive design because it relates kind of to the previous example one thing you can do is if you're using a media query or anything to update the value of a normal CSS property then maybe that thing should be a custom property stick it in a custom property move it up to the top of the page along with all of the rest of your logic that changes the value of that property and then down the bottom you'll have like one place where you use all of your variables and if done correctly this means that media query should only be used to update custom properties and this is if you take this to the extreme it sort of feels a bit weird at first but it's actually really nice and what it does is it helps you separate the logic from the design I've come up with this metaphor that I call like a logic fold which is like I'll show you what it is so basically in this example here this is the code that would be like above the fold what I'm talking about when I keep doing this and that means that we have like in this example I'm creating like a grid type system here and I'm creating a row which initially is set to display block and then using a media query I'm setting its display to flex which will mean that like any flex properties that I've applied to it will come into effect so basically a grid system that starts off full width all the time and then above 800 pixels it applies the logic and then below the fold we have the logic so you can see that there's no media queries here I'm here I'm using applying the value of the custom properties and what I can do now is I can look and see anywhere that I've used a vast statement I immediately know that that is a value that's going to change and with previous methods of writing CSS there was really no way of knowing this right you'd have to I'm sure many of you got very good at reading and understanding CSS on the fly and keeping track of things in your head I don't want to be good at that like and it's amazing how good some of us got at it so basically what it results in is like this highly declarative code below the fold it's kind of like the CSS that we used to write before media queries and before a lot of the complexities of the modern language and it feels really nice and I can switch between examining like the logic of my application or the logic of my components to examining okay what styles and what variables are being applied and that separation is really nice and actually makes CSS a whole lot easier to read and maintain as well and one of the big advantages is it makes things easy to delete as well so all of those are I think huge advantages to using CSS in this way okay one and a half minutes I'm going to talk about theming so theming is kind of the exception to the rule I was saying before that like all global things should be static I'm going to give a caveat for theming so theming I mean like changing the value of the colors on your slide deck for example or on your Twitter profile or like updating the profile picture these are all examples of like theming things that are individual to different users of your application so I think that we should capitalize global custom properties if we're using like if you're theming something you can use the root selector you can say okay this is the thing that I want across my entire application and I'm going to say my default theme color here is tomato and then I'm going to do this and I'm sorry that wrapped hang on a sec yeah so what I'm doing here is I'm setting the value of theme color to the value of user theme color if it exists and the second value inside the vast statement is a fallback value so what that means is here I'm saying the theme color is user theme color or tomato if it doesn't exist and then what we can do is we can for each individual user we can just say the user's theme color is in this case Rebecca purple and then I say the background is theme color which will inherit from here and then the value will be updated does that make sense to people so basically what that allows is you can say I have a tomato time all right well that's it I was on my last slide now you notice the second half of that talk might have been a little bit sketchy and this is what I was doing today instead of working on my talk and there's another video where like I absolutely nailed it triple backflip but this is the one you're getting all right thanks so much how do I stop this turn off hello hello so how did you write that slide sorry how those slides um reveal js and the code editor thing is a custom thing I wrote using carbon now sh reveal I don't know how how do I do it thank you you're in luck we have time for another question I'm trying to put on my game show host boys and he's not working oh it is this looks really awesome is the custom attribute something similar to the pre-processor variables it doesn't require anything to be right in the browser what to introduce is the same as the sass variables sorry I have custom attributes what do you mean I mean sorry sorry for messing up with the name was that what you introduced similar to the sass variables so a custom property similar to sass okay I mean only a little bit like they're not really even variables so they are kind of standard technology going forward in the native in the browser unlike pre-processes yeah you don't it's not custom properties are not a pre-processed pre-processed step fantastic and they're supported in all browsers so you can use them tomorrow says downloads go down