Building Your Theme Styles with Modern Variables

Theming is no new concept with CSS. Having a baseline style file that covers the generic and baseline styles you’d experience in your application can be an amazing time saver. There are a vast number of examples using preprocessors like SASS and LESS, but what about plain old CSS?

In the past, this would’ve been easily out of the question. Today though, modern CSS shouldn’t be an immediate no. It has everything you would need and requires no real setup. As we’ve already gone over CSS variables before, let’s now take a look at building out a CSS theme incorporating them.

Theme Structure

In anything relating to code, one of the key things to get as right as possible at the beginning is architecture. Like any other coding, through imports and proper code separation, CSS allows for that and is vital to ensure quality. With that in mind, let’s take a quick look at a sample project structure.

./
./form
  _button.css
  _check-box.css
  _file-upload.css
  _input.css
  _index.css
  _select.css
./utility
 _icons.css
 _index.css
 _modal.css
 _notificaiton.css
 _progress-bar.css
index.css

The folder structure above should be very simple to follow. There is one main CSS file at the root of the project, subfolders containing several feature based files, and the main file. Each feature-based file will be imported into the main subfolder file with the CSS @import rule. Then each subfolder main file will be imported into the root project index.css file using the same rule.

Naming Convention

CSS in a project is, in more or less words, very open to interacting rule sets from different sources. By this I mean it is very easy to have conflicting style rule declarations from different sources. That can create a mess of conflicts leading and a number of random hiccups in site styling expectations.

Strictly following naming conventions solves these issues. A solid theme naming convention structure isn’t difficult to achieve. Start with a prefix/base class name. That should be something unique to only your theme, and then generate the class names of sub-components inside your theme starting with that prefix/base class name. Following a structure like BEM or SMACSS would be a helpful starting point.

Load From Variables

Keeping things consistent throughout your theme files is essential. With that, ensuring that all your necessary rule values are the same takes priority. So of course, CSS variables to the rescue. Utilizing CSS variables for your theme keeps everything consistent, and reduces your risks.

In Closing

While this article wasn’t the most eventful, it does serve a purpose. In context, this shows you how much you already know about building out your theme styles in good ole plain CSS. It’s not that different from using a preprocessor, and requires nothing to get started. At the end of the day, the goal in any codebase to build small and have as little as possible setup steps.