A bit OT, but it appears the 'class' attribute has now become the home for DSLs for styling. I wonder if there are better ways of doing this because after a while it becomes difficult to process mentally.
Maybe these projects should actually create their own markup language and release a transformer to HTML.
That's effectively what React Bootstrap [1] is. I'm wondering if there's a nice way to make a factory-like version of something similar which takes DSL definitions and generates the necessary components for you to use in a sandbox.
Or custom element types for Emmet [2] which expand to the appropriate HTML.
You can do quite a bit with naming conventions. Classes are case sensitive. So, you can for example use uppercase camel case for your building blocks and lowercase camel case for the things they are made of.
There are also dashes and underscores. I use underscores for "modifiers". That is, classes which modify the look of some building block. E.g. "Button" is the usual one and "Button _large" is a large one.
Custom elements will hopefully help to make this kind of structure a bit more popular. Right now they still have a few rough edges though.
A bit OT, but it appears the 'class' attribute has now become the home for DSLs for styling. I wonder if there are better ways of doing this because after a while it becomes difficult to process mentally.
Maybe these projects should actually create their own markup language and release a transformer to HTML.