CSS Variables in LWC
Few developer like me who do not have UI/UX sight, writing and maintaining CSS takes time. Thus, few techniques like creating libraries for CSS files, comes very handy. With Summer 20 release, CSS library components can be created in LWC and can be used by importing library component in .js file and CSS file in .css file. Library component becomes the one place to change the application styling. However, some attributes values would be repeated all over the library component. Thus, making changes to application styling, one has to find and update such values. Thanks to advanced CSS and LWC for support of the standard web components, which lets developer define the custom properties or variables. Lets dive in how we can use CSS variables. Where to declare variables in LWC CSS file? The selector given to the ruleset defines the scope that the custom property/variables can be used. :root is the most common global. However, :root is not available in LWC.