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.