CSS "Module"

[rgbkrk]

Since the style attribute has to be a dict pure code has to be written like this:

div("hello", style={
    "border": "red 3px solid",
    "padding": "10px 20px 10px 20px",
    "display": "inline-block",
    "fontWeight": "600",
    "color": "red"
})

Since I really like using keyword arguments throughout (since we use it for all the DOM properties), I sometimes use a dict, sometimes aliasing it as style:

div("hello", style=dict(
    border="red 3px solid",
    padding="10px 20px 10px 20px",
    display="inline-block",
    fontWeight="600",
    color="red"
))

# or even
style = dict
div("hello", style=style(
    border="red 3px solid",
    padding="10px 20px 10px 20px",
    display="inline-block",
    fontWeight="600",
    color="red"
))

What would you all think if we had from from vdom import style or from vdom import css, where it was just a simple function that turned all keyword arguments into the proper style dict. This would help us close #31, at least for styles.

[aunyks]

IMHO, I think the original dictionary approach is more intuitive regarding CSS (since the syntax is relatively similar), but if we were to go with a function that returns a dictionary I think from vdom import css is the best approach.

Simply because I think

div("hello", style=css(
    border="red 3px solid",
    padding="10px 20px 10px 20px",
    display="inline-block",
    fontWeight="600",
    color="red"
))

looks better than

div("hello", style=style(
    border="red 3px solid",
    padding="10px 20px 10px 20px",
    display="inline-block",
    fontWeight="600",
    color="red"
))

[rgbkrk]

Yeah css sounds good! One extra thing that negates style -- I just introduced the <style> component in #42, so the namespace belongs to the element now.

It sounds like you're also more in favor of the raw dictionary which is cool with me because we can just do nothing and let people continue to use it the way they want.

[mpacer]

Might I suggest we look into building utilities for something like NotebookNode from nbformat, so that we have access to attribute based reassignment?

We could augment it with a js like fallback where dot access does not raise a keyerror if the key is not present but instead returns None.

but then it would probably be more appropriate for it to be Css() or even CSS() since this would require creating a class to manage this utility.

[mpacer]

Note I'm not suggesting we shouldn't allow dictionaries in there — that should always be possible.

It also might be fun to be able to link one of these objects to a update handler so that you could modify how a VDOM object renders after the fact… but that's probably over-the-top especially for the 1.0.

It might be nice to have a vdom element that can essentially add a CSS sheet to the page even if it's not passed in via a style sheet. This would be needed to encourage people to use CSS selector like logic for consistent styling information.