Le blog d'Archiloque

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 -->

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">
    <meta charset="UTF-8">
       * Miraculous CSS
       * Copyright © 2021 Julien Kirch
       * Released under MIT license
      const miraculousPrefix = "M_"

      function onLoadAsync(callback) {
        if (document.readyState === "loading") {
        } else {

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

            const shortClassName = className.substr(
              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) {
          const elements = document.querySelectorAll("body *");
          for (const element of elements) {
          const styleSheet = document.createElement("style");
          styleSheet.innerHTML = styleContent;
<body class="M_font-family_sans-serif">
  class="M_font-size_5em M_position_sticky M_top_0 M_text-align_center"
<p>Lorem ipsum dolor sit amet.</p>