mayu-live/framework

css: Create classes for tag-selectors and apply them automatically

aalin opened this issue · 0 comments

aalin commented
:ruby
  def self.get_initial_state(initial_value: 0)
    { count: initial_value }
  end

  def handle_decrement(_)
    update do |state|
      { count: [0, state[:count].pred].max }
    end
  end

  def handle_increment(_)
    update do |state|
      { count: state[:count].succ }
    end
  end

:css
  article {
    display: flex;
  }

  output {
    font-size: 2em;
  }

  button {
    background: #f0f;
  }

- prev_disabled = state[:count].zero?

%article
  %button(title="Decrement" onclick=handle_decrement){disabled: prev_disabled}
    -
  %output
    = state[:count]
  %button(title="Increment" onclick=handle_increment)
    +

It would be pretty neat if class names were generated for these tags and matched automatically with the elements...

With this change, if one would write small components and compose them into larger, and using semantic HTML, class selectors wouldn't have to be used very often...