Project: Simple notes

I made this project for trying the Lit library, which called my attention since it seems to be way lighter than React.

I didn’t like the way that Lit works. Lit Web Components are way harder to read in the browser devtools than React components, even though the elements code is almost identical to React class components. But there is a small but annoying detail: the styles.

Styles

I decided to use the Skeleton.css boilerplate (yes, not a library/framework, they call themselves like that). I really liked to use it, plus it looks really good. For any style that didn’t come with Skeleton, I used Sass, and for animations, Animate.css.

Adding the style files to the application was a headache: there is no way to use them globally, you had to import them in every single element. After searching for a decent time, I found some kind of solution: import the styles from the html file, then, from the JS, take all those styles, and put them into the Lit element. I made a file where I put the solution I found, and exports the document styles as globalStyles. However, I still had to import globalStyles from every single element.

Is it lightweight?

The bundled and minified js code is just 68,1 kb, which means that the code is loaded really fast. But I’m not sure if the performance is the best. There are some animations that don’t play fluidly.