Stop using rgba() and hsla()

Key Takeaways

Are you still writing colors in CSS like this? If so, there's actually two reasons why you should change that habit. First of all, you can just save some characters along the way cuz you can drop the A. The RGB function and HSL function are essentially just aliases the browser points to using the A version of it anyway. And the second thing though is that this version, even without the A in there, is actually part of the legacy syntax. The the commas there don't need to be there either. So you can actually save yourself a few more characters by getting rid of those commas. And the reason you might want to do this isn't just cuz oh I'm saving a few characters, but there's new color functions that have come into CSS. We have things like okay LCH and lab and other color models as well. And none of those actually support the commaepparated version. They only support the spaceepparated syntax. There is one very important thing with the space separated syntax is if you want to lower the opacity, we do that with a forward slash and then the alpha value. And this seems a little bit strange at first glance cuz you're not used to this type of thing. But it really does help just distinguish the color from the alpha value. And in some of the new color spaces that we have, there's not always three values. You might have a different number of values. So that forward slash is always distinguishing the color values from the alpha value. And if none of this has convinced you, third bonus tip I guess along the way here is that relative colors also use the space separated syntax. And if you haven't started using relative colors, then I'd suggest you check out this video that is right hereish somewhere. You can click on that. Uh, I definitely would suggest you check it out because relative colors are absolutely amazing.