Using CSS Modules by simply using HTML. What do you think?

Hey guys!

Here is another small interactive demo. I left a TodoMVC app at visually broken state and you can fix it by following comments in the code 😉.

In our proof of concept, we've made styling (I personally believe) super simple. They are not only scoped per UI section, but they are applied by CSS classes in HTML. So, you write HTML normally without thinking of naming collisions and under the hood you get code styled by CSS modules.

Do you think it's something you'd enjoy using? Should we introduce CSS processors?

More links:

Our website
Repo
Kickstarter campaign

Here is the previous post

We need contributors, backers and being noticed so stars on Github are very appreciated.

Comments

[John Peters]

Nice, was wondering if you could give a little more information on theory, and implementation (in words). I think you have something really useful here

[chris-czopp]

Thanks John. There is much details behind the project but I can give it a go.

What is it? - an online IDE built around a simple framework which uses simple unidirectional app state management. We didn't use e.g. React because it would be an overkill - all we need is reactivity provided by Virtual DOM . More can be found here: github.com/gluecodes/gluecodes-fra...

Why? - probably the frustration that in order to start working on UI I need a boilerplate, preferably Docker, Webpack etc. Also , by using the unidirectional state management the app becomes very generic so writing all the glue code for actions, action creators and all other magical words seems unnecessary. We should write features. I don't want to oversell but can't resist to mention this - Imagine you can quickly prototype UI with HTML, add few attribute directives and boom! You didn't touch JS yet but you already have a working app. Actions are generated and they use data you wrote in HTML. E.g. what you have in your LI tags becomes and action which returns an array of objects. When you done coding, you can download stand-alone code run docker-compose up and you can keep changing it as you wish. It uses Webpack, Babel and all other open source goodies.

Implementation - HTML gets parsed to function calls which construct virtual DOM. There is many transformations happening based on attribute directives. This includes turning CSS classes which exist in stylesheets into references to styles[className] where styles is CSS file imported in the given page layout, slot or reusable slot. In live preview it's emulated but in the generated code it uses CSS Modules. Soon I'm going to deploy the "downloading"...

Hopefully what I wrote is useful for you 😉