The November 2020 Updated made it possible to do all kinds of crazy layouting stuff with Custom CSS (see Demos in Custom rem-level formatting with tags).
I plan to release a bunch of those codes and some additional material possibly inspiring others to even more CSS.
But there is a consideration: RemNote is developed fast. This of course reflects in the markup. A lot of things are not as clean and polished as they could be. (In software engineering this is called Technical Dept.)
Keep in mind though that I am not a dev. I have no insights into why a design descision was made. Maybe it is already as good as it gets.
If there is (large) room for improvement (which I think there is), the question is: Should the devs invest more time into optimizing the HTML (now)?
This is a trade-off.
- Cleaner, easier to understand markup makes styling easier (for beginners).
Now vs Later:
- Sooner improvements would break less because there is less already developed.
- Already existing CSS breaks. The only larged shared theme I know of is Eva’s. But I’m sure there are other many users having made some customizations as well.
- It is a large time investment without much improvement for most users (except that it is easier to make it look nice).
- Yes, fix as soon as possible (at the cost of other features).
- Yes, but wait after all main features are implemented/RemNote is released (at the cost of breaking existing CSS).
- No, it is already ok/great, what are you talking about?
- No, I already have much CSS and I don’t want to fix it.
- No, I don’t need those visuals/I want only real features.
What do I mean by “improving markup”?
Basically simplify/fix things that make theming harder. There are many things mentioned in Custom Rem-level formatting with tags.
Compared with Roam Research and Obsidian it seems overly complex:
- size of the main CSS file [lines of code]:
- Obsidian: ?
- RemNote: 10000
- Roam: 3000
- size of a custom theme [lines of code]:
Here is a comparison of a parent and two children in Roam:
The nesting depth of a simple parent with two children block is ~15 while in Roam it is ~10.
Another thing is that the builtin CSS often uses a long list of selectors (some of which are ids) which can only be overwritten by an at least as long list.
As an extreme you sometimes have (to type) selectors like this
#document .document__top-bar .document__options-menu .document__options-menu__sub-menu-container .document__options-menu__sub-menu>.icon
Again: Maybe I just don’t know what I am talking about. The devs generally do a great job and maybe it just has to be this way.