I wrote a customizable CSS engine in JavaScript

Custom selectors, custom rules and custom events. You determine its behavior

For some things CSS is simply not enough, we need JavaScript. I’m sure that we all experienced it not once, nor twice, the feeling of wanting to have a specific behavior or style that aren’t supported by CSS. An arbitrary example: selecting an element based on regular expression, playing a transition dynamically to the element’s changes in dimension, or sticky positioning (which is arguably working in some browsers based on my personal experience). However, this is not why I wrote the CSS engine.

I wrote the engine to repeat the same thinking process that the original developers went through, and to understand the difficulties and challenges that they faced. Why? Because it helps you think. With a custom implementation of CSS you can achieve exactly what I mentioned in the first paragraph and thus understand the mechanism a lot better.

disclaimer: I haven’t looked into the native implementation of CSS. There’s a lot you can take from my article (at least I hope), yet please take my words with a grain of salt.

First thing first — demo

Here’s an example of a stylesheet with a custom rule named boom: