Preprocessors like Sass and Less certainly help to keep your CSS codebase organized and maintainable. Features like variables, mixins, loops, etc. — by adding dynamic capabilities to CSS coding — contribute to minimize repetition and speed up your development time.
In recent years, a few dynamic features have started to make their appearance as part of the CSS language itself. CSS variables — or “custom properties”, as they're officially called — are already here and have great browser support, while CSS mixins are currently in the works.
In this article, you'll find out how you can start integrating CSS variables into your CSS development workflow to make your stylesheets more maintainable and DRY (Don't Repeat Yourself).
Let's dive right in!
What are CSS Variables?
If you've used any programming language, you're already familiar with the concept of a variable. Variables let you store and update values your program needs in order to work.
For instance, consider the following JavaScript snippet:
[code language="js"]
let number1 = 2;
let number2 = 3;
let total = number1 + number2;
console.log(total); // 5
number1 = 4;
total = number1 + number2;
console.log(total); // 7
[/code]
number1 and number2 are two variables which store the number 2 and 3 respectively.
total is also a variable which stores the sum of the number1 and number2 variables, in this case resulting in the value 5. You can dynamically change the value of these variables and use the updated value anywhere in your program. In the snippet above, I update the value of number1 to 4 and when I perform the addition again using the same variables, the result stored inside total is no longer 5 but 7.
The beauty of variables is that they let you store your value in one place and update it on the fly for a number of various purposes. No need for you to add new entities with different values all over your program: all value updates happen using the same storage place, i.e., your variable.
CSS is mostly a declarative language, lacking in dynamic capabilities. You'd say that having variables in CSS would almost be a contradiction in terms. If front-end development were just about semantics, it would be. Fortunately, the languages of the Web are very much like living languages, which evolve and adapt according to the surrounding environment and the needs of their practitioners. CSS is no exception.
In short, variables have now become an exciting reality in the world of CSS, and as you'll soon see for yourself, this awesome new technology is pretty straightforward to learn and use.
Are There Benefits to Using CSS Variables?
The benefits of using variables in CSS are not that much different from those of using variables in programming languages.
Here's what the spec has to say about this:
[Using CSS variables] makes it easier to read large files, as seemingly-arbitrary values now have informative names, and makes editing such files much easier and less error-prone, as one only has to change the value once, in the custom property, and the change will propagate to all uses of that variable automatically.
In other words:
By naming your variables in ways that make sense to you in relation to your project, it'll be easier for you to manage and maintain your code. For example, editing the primary color in your project will be much easier when what you need to change is one value for the --primary-color CSS custom property, rather than change that value inside multiple CSS properties in various places.
What's the Difference Between CSS Variables and Preprocessor Variables?
One way you might have been taking advantage of the flexibility of variables when styling websites is by using preprocessors like Sass and Less.
Preprocessors let you set variables and use them in functions, loops, mathematical operations, etc. Does this mean CSS variables are irrelevant?
Not quite, mainly because CSS variables are something different from preprocessor variables.
The differences spring from the fact that CSS variables are live CSS properties running in the browser, while preprocessor variables get compiled into regular CSS code, therefore the browser knows nothing about them.
What this means is that you can update CSS variables in a stylesheet document, inside inline style attributes and SVG presentational attributes, or choose to manipulate them on the fly using JavaScript. You can't do any of this with preprocessor variables. This opens up a whole world of possibilities!
This is not to say that you need to choose between one or the other: nothing will stop you from taking advantage of the super powers of both CSS and preprocessor variables working together.
The post A Practical Guide to CSS Variables (Custom Properties) appeared first on SitePoint.
by Maria Antonietta Perna via SitePoint
No comments:
Post a Comment