Improving the Performance of Elm-CSS

Improving the Performance of Elm-CSS

Robin Heggelund Hansen

Most Elm projects I work on in a professional setting make use of a wonderful library, created by Richard Feldman, called elm-css. This library gives you statically typed CSS which can live alongside you view functions, making it easy to see the connections between HTML elements and CSS styling.

Recently, I came across a performance problem in one of our applications, triggered by the amount of work elm-css had to perform every time there was a change in state. While I did manage to fix the problem using aHtml.Lazy function, I walked away with a hope that elm-css could be made faster so that there wasn’t a problem to begin with.

In this article, we’ll take a look at how elm-css works, and how I found a way to nearly double its performance.

The workings of elm-css

Let’s start off with a simple example. Below you’ll see the source code of a very simple elm-css based application:

module Main exposing (main)

import Css

import Html exposing (Html)

import Html.Styled

import Html.Styled.Attributes exposing (css)

main : Html msg

main =

Html.Styled.toUnstyled view

view : Html.Styled.Html msg

view =


[ css

[ Css.backgroundColor <| Css.rgb 0 0 0 ]

Join the pack! Join 8000+ others registered users, and get chat, make groups, post updates and make friends around the world!



Hey! look, i give tutorials to all my users and i help them!

you're currently offline