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.
Variables
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
- $c_ color codes
- $z_ z-indices used throughout the application
- $t_ animation timings
- $b_ responsive breakpoints
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.
Class Names
The second most common usage of namespacing is by utilizing a CSS class naming. The prefix o- can be used for CSS object class name declarations, while c- can be used for classes. The fundamental distinction between objects and classes is that they may appear more than once in different templates of our design, hence making them harder to meddle with. Separating objects from classes makes it easier for a developer to navigate within a relatively unknown codebase. Another clever concept is to disassociate all the classes solely used in JavaScript with the js- prefix. Finally, is- can define application states such as is-active or is-visible, while u- can prefix utility classes such as u-pull-left.
