How can I maintain stylesheets during Elm development?

You're probably better off not using elm-reactor for your main development because of those limitations. It is perfectly acceptable to use your own external CSS file and I agree, that's a much better practice than embedding styling in the output html.

I've used gulp and the gulp-elm package to set up a file watching task that compiles all Elm code (as well as SCSS files) on save, and that works wonderfully.

There is a Grunt plug-in for Elm if you're into that.

There is a webpack loader for Elm if you prefer that over gulp or grunt.

There is a young project that offers a Single Page Application generator for Yeoman which bundles together some of the live-reloading tasks. It is very opinionated on some of the decisions it makes, but it's a good reference if you want to get running quickly.

I found a good solution for those who want quick prototyping in elm-reactor with full CSS but don't want to figure out build tooling or more sophisticated elm CSS packages. You can get started pretty fast using basic elm, elm-html, and css.

This solution uses standard Elm to generate inline styles and Html.node to create a style tag so you can apply a CSS rule to the body of the document.

-- VIEWS

view model =
  main_
    [ cssMain ]
    [
      styleTag 
    , div 
        [ cssControlPanel ]
        [
          button 
            [ cssBtn
            , cssBtnGenerate
            , onClick GenerateMap
            ]
            [ text "GENERATE MAP" ]
        ]

-- STYLES 

styleTag : Html Msg
styleTag =
  let
    styles = 
      """
        body { overflow: hidden; }
      """
  in
    node "style" [] [ text styles ]

cssMain : Attribute Msg
cssMain =
  style
    [ ("backgroundColor", "#eee")
    , ("position", "relative")
    , ("width", "100vw")
    , ("height", "100vh")
    ] 

...