CSS NameSpacing ClassNameCSS
Namespacing can be used in any type of programming language, and the advantages are innumerable. However, with CSS, some of the advantages are not particularly obvious. We will take a look at the two most common namespacing usages in CSS and we will discuss their advantages in more detail.
Using variables in CSS is the simplest and the most common use. Let’s take a look at the following SCSS example code:
`` // Our common variables
// Fonts $f_arial: Arial, Helvetica, sans-serif
// Colors $c_red: #FF0000; $c_black: #000;
// Z-indices $z_index_back: -1; $z_index_base: 1; $z_index_max: 9999;
// Animation Timings $t_medium_animation: 200ms;
// Breakpoints $b_mobile: 700px; $b_desktop: 1200px; ``
we have defined five different organizational categories:
$f_font and webfont families
$z_z-indices used throughout the application
The biggest advantages of utilizing the organizational categories structure with variables as described above are code clarity and rapid development. This is especially important in large teams where more developers work on the same CSS files. One more notable advantage is added autocomplete feature. Simply by entering a $f in our IDE, we will get an autocomplete list of all declared fonts, or by entering a $b we will get all responsive breakpoints, and so on.