A new CSS framework: miraculous CSS

There’s no end to the treadmill of new CSS frameworks.

But all of them have at least one of these problems, and sometimes all of them:

💀 Tied to a specific CSS approach
💀 Tied to a JavaScript framework
💀 Adds bloat to your CSS
💀 Requires a custom development workflow

Miraculous CSS is a breakthrough approach to CSS that has none of these limitations:

👍 Works with all kind of CSS
👍 Not linked to a JavaScript framework
👍 No bloat
👍 No change in development workflow

As an added bonus, it’s self contained in a single file and highly customizable!

As with many other frameworks, it uses a declarative approach.

To add a specific CSS attribute to an element, annotate it with the attributes you want, using this easy to grasp syntax (the default M_ prefix stands for miraculous, but it’s configurable):

<div class="M_display_flex">
  <!-- bla bla bla -->
</div>

When the page is loaded, a very short JavaScript snippet generates the relevant CSS and adds it to the page:

.M_display_flex {
  display: flex;
}

This means the CSS is always up to date with the HTML, and for each page only the required CSS is generated.

Here’s a more complex example that include the miraculous snippet, so you can paste it in your project and start hacking right away !

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Miraculous</title>
    <script>
      /**
       * Miraculous CSS
       * Copyright © 2021 Julien Kirch
       * Released under MIT license
       */
      const miraculousPrefix = "M_"

      function onLoadAsync(callback) {
        if (document.readyState === "loading") {
          document.addEventListener(
            "DOMContentLoaded",
            callback);
        } else {
          callback();
        }
      }

      function processClass(className) {
        if (className.startsWith(miraculousPrefix)) {
          if (knownClasses.indexOf(className) === -1) {
            knownClasses.push(className)

            const shortClassName = className.substr(
              miraculousPrefix.length, 
              className.length - miraculousPrefix.length
              );
            const splittedClassName = shortClassName.split('_');
            const attributeName = splittedClassName[0];
            const attributeValue = splittedClassName[1];
            styleContent += 
              `.${className} {${attributeName}:${attributeValue};}`;
          }
        }
      }

      onLoadAsync(function () {
          const knownClasses = [];
          let styleContent = "";
          const processElement = function (element) {
            for (const className of element.classList) {
              processClass(className);
            }
          };
          processElement(document.querySelector("body"));
          const elements = document.querySelectorAll("body *");
          for (const element of elements) {
            processElement(element);
          }
          const styleSheet = document.createElement("style");
          styleSheet.innerHTML = styleContent;
          document.body.appendChild(styleSheet);
        }
      )
    </script>
</head>
<body class="M_font-family_sans-serif">
<h1 
  class="M_font-size_5em M_position_sticky M_top_0 M_text-align_center"
  >Header</h1>
<p>Lorem ipsum dolor sit amet.</p>
</body>
</html>